如何在chart.js中更改React折线图工具提示标题字体系列

ybzsozfc  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(225)

我使用的是“chart.js”:“^3.7.1”,沿着react web应用程序中的react-chartjs-2。我想更改图表工具提示字体系列。以下是我在图表中使用的选项。我无法将字体系列应用到折线图。我想为工具提示中的标题应用自定义字体。我使用了chart js文档中提到的属性

  1. const options = {
  2. animation,
  3. plugins: {
  4. tooltip: {
  5. backgroundColor: "#fff",
  6. displayColors: false,
  7. borderColor: "#8b7a7a",
  8. borderWidth: 0.5,
  9. bodyColor: "#0000",
  10. titleColor: "#8b7a7a",
  11. // bodyFontColor: "#8b7a7a",
  12. padding: 10,
  13. footerSpacing: 0,
  14. boxHeight: 10,
  15. title: {
  16. font: {
  17. size: 50,
  18. family: "'Work Sans',sans-serif",
  19. },
  20. },
  21. callbacks: {
  22. title: function (t, d) {
  23. let datae = moment(t[0].label).format("MMM DD, YYYY");
  24. const aa = t[0].dataset.label;
  25. const val = t[0].formattedValue;
  26. return `Date: ${datae.toString()}\n${aa}: ${val}`;
  27. },
  28. },
  29. },
  30. legend: {
  31. display: false,
  32. },
  33. },
  34. elements: {
  35. line: {
  36. tension: 0,
  37. },
  38. },
  39. legend: {
  40. display: false,
  41. },
  42. scales: {
  43. x: {
  44. grid: {
  45. display: false,
  46. },
  47. },
  48. y: {
  49. grid: {
  50. display: false,
  51. },
  52. },
  53. },
  54. };
vwkv1x7d

vwkv1x7d1#

如此处所示,您需要在titleFont属性中配置工具提示标题的字体,而不是在title.font属性中:
第一个

snz8szmq

snz8szmq2#

您可以在chart.js中的chart的options属性中更改tooltip的样式。在options*,中,您需要访问plugins对象中的tooltip**,所以首先您需要创建它,然后在其中创建tooltipobject。现在,您可以根据此link更改tooltip的一些特性。
例如:

  1. plugins: {
  2. tooltip: {
  3. titleFont: { size: 13.2, family: "Yekan" },
  4. bodyFont: { size: 14.2, family: "Yekan" },
  5. callbacks: {
  6. // to change the label context
  7. label: function (context) {
  8. var label = context.parsed.y;
  9. return label;
  10. },
  11. },
  12. },
  13. }

相关问题