Custom tooltip styling in Chart.js

Question

Does anyone know if it's possible to style a Chart.js tooltip in such a way that the text appears more bolded for the values and less bolded for the text preceding it?

Current version:

Desired Version:

I have used callbacks with a multistring array so far to create the lines necessary but I am unable to style the tooltips properly.

callbacks: {
  label: function (tooltipItem, data) {
    if (tooltipItem.datasetIndex === 1 || tooltipItem.datasetIndex === 2) {
      let line1, line2, line3, line4, line5;
      line1 = data.datasets[tooltipItem.datasetIndex].name;
      line2 = 'Transaction Volume: ' + data.datasets[tooltipItem.datasetIndex].tv[tooltipItem.index];
      line3 = 'YoY%: ' + data.datasets[tooltipItem.datasetIndex].tvYoY[tooltipItem.index];
      line4 = 'Deal Count: ' + data.datasets[tooltipItem.datasetIndex].dc[tooltipItem.index];
      line5 = 'YoY%: ' + data.datasets[tooltipItem.datasetIndex].dcYoY[tooltipItem.index];
      const multistringText = [line1];
      multistringText.push(line2);
      multistringText.push(line3);
      multistringText.push(line4);
      multistringText.push(line5);
      return multistringText;
    }
    ...

The tooltips callback works ok but it prevents me from styling specific parts of the callback I think? I am struggling to implement the same feature using the custom tooltip feature of chartJS which has very limited documentation.

user_3775731 · Answer

To do this you'll need to render a custom tooltip. There is a good example on the Chart.js website.

It's a lot of work as you need to handle everything yourself (like positioning) but also the only way to get such a highly formatted result.

Custom tooltip styling in Chart.js

1 Answers