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

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

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

const options = {
    animation,
    plugins: {
      tooltip: {
        backgroundColor: "#fff",
        displayColors: false,
        borderColor: "#8b7a7a",
        borderWidth: 0.5,
        bodyColor: "#0000",
        titleColor: "#8b7a7a",
        // bodyFontColor: "#8b7a7a",
        padding: 10,
        footerSpacing: 0,
        boxHeight: 10,
        title: {
          font: {
            size: 50,
            family: "'Work Sans',sans-serif",
          },
        },
        callbacks: {
          title: function (t, d) {
            let datae = moment(t[0].label).format("MMM DD, YYYY");
            const aa = t[0].dataset.label;
            const val = t[0].formattedValue;
            return `Date: ${datae.toString()}\n${aa}: ${val}`;
          },
        },
      },
      legend: {
        display: false,
      },
    },

    elements: {
      line: {
        tension: 0,
      },
    },
    legend: {
      display: false,
    },
    scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        grid: {
          display: false,
        },
      },
    },
  };
vwkv1x7d

vwkv1x7d1#

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

snz8szmq

snz8szmq2#

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

plugins: {
          tooltip: {
            titleFont: { size: 13.2, family: "Yekan" },
            bodyFont: { size: 14.2, family: "Yekan" },
            callbacks: {
              // to change the label context
              label: function (context) {
                var label = context.parsed.y;
                return label;
              },
            },
          },
      }

相关问题