How to append text or symbol to tooltip of chart.js?

by darrion.kuhn , in category: Javascript , 3 months ago

How to append text or symbol to tooltip of chart.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by samara , 3 months ago

@darrion.kuhn 

To append text or symbol to a tooltip in Chart.js, you can use the callbacks property of the tooltip configuration.


Here is an example of appending a symbol to a tooltip:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3, 9]
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          return value + ' %'; // Append symbol to the value
        }
      }
    }
  }
});


In this example, we have a line chart with sales data for different months. The tooltip will show the sales value followed by the percentage symbol (%).


You can modify the label callback function to append any desired text or symbol to the tooltip. Simply return the desired string in the format you want.


Note that the specific configuration may vary depending on the version of Chart.js and the chart type you are using.