1

I am using "chart.js": "^3.7.1", along with react-chartjs-2 in react web app. 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

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,
        },
      },
    },
  };
Simhachalam Lankalapalli
  • 13
  • 4

2 Answers2

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>
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
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;
              },
            },
          },
      }
Pouria
  • 1
  • 2