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

Question

I am using "chart.js": "^3.7.1", along with react-chartjs-2 in react web app.我在 react web 应用程序中使用“chart.js”：“^3.7.1”以及 react-chartjs-2。 I want to change the chart tooltip font family.我想更改图表工具提示字体系列。 Here is the options i am using in the chart.这是我在图表中使用的选项。 I am unable to apply font family to the line chart.我无法将字体系列应用于折线图。 i want to apply a custom font for the title in the tooltip.我想为工具提示中的标题应用自定义字体。 i have used props mentioned in the documentation of chart js我使用了图表 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,
        },
      },
    },
  };

Answer 1

As can be read here you need to configure the font for the tooltip title in the titleFont property and not in the title.font property:正如可以在此处阅读的，您需要在titleFont属性中而不是在title.font属性中配置工具提示标题的字体：

 var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'orange' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'pink' } ] }, options: { plugins: { tooltip: { titleFont: { family: 'commic-sans-ms' } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script> </body>

Answer 2

you can change the style of tooltip in the chart.js, in the options property of chart.您可以在图表的options属性中更改 chart.js 中工具提示的样式。 Inside options you need to access tooltip inside of plugins object, so first you have to create it, then create tooltip object inside it.在选项里面你需要访问插件object里面的工具提示，所以首先你必须创建它，然后在里面创建工具提示object 。 Now, you can change some features of tooltip according to the this link .现在，您可以根据此链接更改工具提示的一些功能。

for example:例如：

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;
              },
            },
          },
      }

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2022-05-10 07:59:48

解决方案2
0 2022-09-22 13:14:54

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2022-05-10 07:59:48

解决方案2 0 2022-09-22 13:14:54

解决方案1
0 已采纳 2022-05-10 07:59:48

解决方案2
0 2022-09-22 13:14:54