How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?

Question

I'm trying to show some data using a doughnut chart from Chart.js2.

My current chart looks like this:

My desired output must show another attribute, which is the percentage, and looks like this:

I've read the documentation, but I can't cope with this because it's very general and I'm new to JavaScript.

My code for the first chart is the following:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ]
      }]
    };

Tot Zam · Accepted Answer · 2017-05-29T01:30:56.703

160

You can customize the tooltips using the chart options tooltip configuration section, as explained here: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

As shown in the example code below, you can change things like color, sizing and styles. Check out the documentation linked above for a full list of configurable options.

If you want to add the percentage to the tooltip display, you can use tooltip callbacks. The documentation has a list of all the possible customizable callback fields.

In the below example, I set the "title" to show the label name, "label" to show the value, and added the percentage to "afterLabel".

var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: {
    tooltips: {
      callbacks: {
        title: function(tooltipItem, data) {
          return data['labels'][tooltipItem[0]['index']];
        },
        label: function(tooltipItem, data) {
          return data['datasets'][0]['data'][tooltipItem['index']];
        },
        afterLabel: function(tooltipItem, data) {
          var dataset = data['datasets'][0];
          var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
          return '(' + percent + '%)';
        }
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    }
  }
});

Working JSFiddle: https://jsfiddle.net/m7s43hrs/

edited May 29 '17 at 01:30

answered May 16 '17 at 20:14

Tot Zam

8,406
10
51
76

1

`data['datasets'][tooltipItem.datasetIndex]['data'][tooltipItem.index]` as we also have the dataSet index. – dNurb Feb 11 '19 at 20:30
Yes, this is nice if you need a lite-customization. But what if you need to render a button for instance, or a table, or whatelse.. you have to implement `custom` options but is not too easy (https://github.com/jerairrest/react-chartjs-2/issues/450) – Luca Davanzo Oct 24 '19 at 15:04
If you want the dataset label as the title: `data['datasets'][tooltipItem[0].datasetIndex].label` – Sondre Nov 09 '20 at 07:36
Note that some fields, like `title`, are passed an array of `toolTipItem` objects, and others, like `label`, are passed a single object; notice how the index value for each is accessed differently in the example above. – Andrew Jan 15 '21 at 16:22
1

when I try to get total value after reach meta, I noticed that meta nuber is changed dynamic (ex: 0 ,1,14,20). thats why I change the `dataset["_meta"][0]['total']` to `let total = dataset["_meta"][Object.keys(dataset["_meta"])[0]]['total']` – Olcay Jun 16 '21 at 13:50
1

And for V3.5? This totally changed. – Izzi Sep 09 '21 at 07:09

score 11 · Answer 2 · answered Feb 28 '18 at 09:40

As per @Tot Zam's answer, but using arrow functions for brevity:

options: {
  tooltips: {
    callbacks: {
      title: (items, data) => data.datasets[items[0].datasetIndex].data[items[0].index].myProperty1,
      label: (item, data) => data.datasets[item.datasetIndex].data[item.index].myProperty2
    }
  }
}

score 5 · Answer 3 · answered Oct 22 '21 at 02:17

For those who are using latest Chart.js version v3.5.1, below is the code you can add to customize tooltip.

Add below plugins object to chart options

plugins: {
  tooltip: {
    enabled: true,
    usePointStyle: true,
    callbacks: { 
      // To change title in tooltip
      title: (data) => { return data[0].parsed.x } 

      // To change label in tooltip
      label: (data) => { 
            return data.parsed.y === 2 ? "Good" : "Critical"
      }
    },
  },
},

score 3 · Answer 4 · edited Jul 06 '21 at 21:07

Thanks to Tuhin for his answer. It helped me to figure out how to change the tooltip title using a callback function.

I'm quite new to javascript so it wasn't obvious to me from the Chart.js 3.4.1 docs exactly how to work with the tooltip object. By using console.log(tooltipItems), as suggested, I was able to get the info I required.

I ended up with a config object with the following callback set in options.plugins. I wanted a shortened date string to be displayed as the title of the tooltip. Using toDateString() did the trick.

Here's how I set up my callback:

    options: {
      ...

      plugins: {
        tooltip: {
          callbacks: {
            title: tooltipItems => {
              title = tooltipItems[0].parsed.x
              if (title !== null) {
                console.dir(title)
                title = new Date(title).toDateString()
              }
              return title
            },
          },
        },
      },
    },

This worked with react-chartjs-2. options.plugins.tooltip.callbacks is the path you need. — Noel Baron, Aug 25 '21 at 15:10

score 2 · Answer 5 · answered May 20 '21 at 18:07

2

Anybody looking out for solution in 2021 to set the label as title of tooltip, below code snippet works. use console.dir(tooltipItems) to see the contents of tooltipItems.

callbacks: {
        title: function (tooltipItems) {
          return tooltipItems[0].formattedValue;
        }
      }

answered May 20 '21 at 18:07

Tuhin

21
3

how could this works? I still get undefined for scatter. – AbbathCL Jun 18 '21 at 22:57
@JorgeAlvarado works on line chart. make sure you have placed the above code block under options > tooltip as property. – Tuhin Jun 20 '21 at 05:28
I made this possible, with some commands in line; I was using Scatter – AbbathCL Jun 21 '21 at 16:39
Huh. This worked! -- except I just returned `tooltipItems.formattedValue` – Izzi Sep 08 '21 at 12:38

score 2 · Answer 6 · answered Jun 16 '22 at 13:24

Hi i found a practical solution to format the text of tooltip

 const label = (context) => {
   
    let lbl = context.label+' '+ context.formattedValue+' ' + '%'
    return lbl
  }
  const chartOptions = { 
    plugins:{
      tooltip: {
        callbacks: {
            label: label,
        },

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?

6 Answers6

Linked