[Chartjs]-How to underline and bold tooltip chart js

This worked for me:

I’ve converted string to bold unicode characters and passed them to tooltip inside label callback. I needed to make bold only part of label. In my case i needed only numbers 0123456789 -> 𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵 [these are unicode bold chars], so i created simple map or you can use library for conversion example: conversion library i’ve found (not tested). You can make other text efects like this. I used this approach because standard tooltip in chartjs is sufficent for my task and I don’t want to code external tooltip from scratch only because of bold text. Tested with ES6.

Here are some handy tools if you want to make your own map like in this example:

• Bold text generator

• Unicode text decoder

• Text normalizer

unicodeValueMap: {
            0: '\u{1D7EC}',
            1: '\u{1D7ED}',
            2: '\u{1D7EE}',
            3: '\u{1D7EF}',
            4: '\u{1D7F0}',
            5: '\u{1D7F1}',
            6: '\u{1D7F2}',
            7: '\u{1D7F3}',
            8: '\u{1D7F4}',
            9: '\u{1D7F5}'
        }

In label callback i’ve just replaced normal string characters with unicodes stored in my map object.

var options = {
  callbacks: {
    label: (item) => {
      let boldValue = "";
      [...item.formattedValue].forEach((char) => {
        if (char in unicodeValueMap) {
          boldValue += unicodeValueMap[char];
        } else {
          boldValue += char;
        }
      });
      return `${item.dataset.label}: ${boldValue}`
    };
  }
}

Result:

Hope this help’s somebody

Hi you can build your own tooltip so that it returns wherever you want, i.e. a custom html

http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips

For the bold font the option of titleFontStyle must be inside options.tooltips:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    },
    tooltips: {
        titleFontStyle: 'bold',
      titleFontSize: 24
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

You can see a working example here:

https://jsfiddle.net/fpjzvh4m/

Hope this helps.

P.D: I recommend that when asking this type of questions that you include some of your code.