Chartjs-How to change React line chart tooltip title font family in chart.js

by

0👍

✅

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:

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>

0👍

you can change the style of tooltip in the chart.js, in the options property of chart. Inside options you need to access tooltip inside of plugins object, so first you have to create it, then create tooltip object inside it. 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;
              },
            },
          },
      }

Leave a comment