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

by darrion.kuhn , in category: Javascript , a year ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by samara , a year 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.

Related Threads:

How to append more data in tooltip of graph in chart.js?
How to replace a symbol in a text string in php?
How to append text to a line in d3.js
How to detect when tooltip closes in chart.js?
How to display kb, mb, gb, tb in chart.js tooltip?
How to have different values for the chart and the tooltip in chart.js?