[Chartjs]-How to set colors for Chart.js tooltip labels

by

7👍

You haven’t defined anything called data in the labelColor callback function. Another confusion with this callback in charts.js, is the second parameter passed to the labelColor callback function is the chart instance, and not the datasets like some of the other chartjs callbacks.

Anyway, this should work.

    labelColor: function(tooltipItem, chart) {
        var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
        return {
            backgroundColor : dataset.backgroundColor
        }
    }

2👍

You might want to try with labelTextColor instead of labelColor

This is a feature available since Chartjs 2.7
https://github.com/chartjs/Chart.js/releases/tag/v2.7.0
(Feature #4199)

1👍

labelTextColor: function(tooltipItem, chart) {
   if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label === "amount") 
      {
           return "#1ff368";
       }
   if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label ==="transactions") {
                return "#8577ec";
              }
            }

just type your chart label like “amount” and then modify your colors in hand

0👍

Actually, the problem is that in labelColor callback you returning the backgroundColor. Below is the right return type of above callback method.

function (tooltipItem, chartInstance) {
                return {
                    borderColor: borderColor,
                    backgroundColor: backgroundColor
                };
            }

In backgroungColor assign the color for the label. and you can leave the borderColor.

[Sample-Code]

labelColor : function(tooltipItem, chartInstance){
                    return {
                        backgroundColor : data.datasets[tooltipItem.datasetIndex].backgroundColor[0]
                    };
                }

0👍

Actually, if your dataset color is just an item and not an array this you shall not need an extra tooltip callback eg.

Single color intepreted as the one shown in the tooltip automatically

const myDataset = {
    label: 'My dataset',
    data: [1,2.3,4,-5],
    fill: true,
    // this will show the tooltip with red color
    backgroundColor: '#e23944',
    borderColor: 'blue'
}

instead of

Array of colors not intepreted as the one shown in the tooltip

const myDataset = {
    label: 'My dataset',
    data: [1,2.3,4,-5],
    fill: true,
    // need to remove the array of color here
    backgroundColor: ['#e23944'],
    borderColor: ['blue']
}

According to the screenshot, you have only one dataset matching one color, so you don’t need to put the colors as an array. If you need to set multiples points within the same dataset using different colors, then you shall use

Array of colors distributed to each data points

const myDataset = {
    label: 'My dataset',
    data: [1,2.3,4,-5],
    fill: true,
    // need to remove the array of color here
    backgroundColor: ['#e23944', '#D4E157', '#26A69A', '#758BE2'],
    borderColor: ['blue', 'green', 'white', 'dark']
}

But then you shall forgot this solution ^^ and adopt the one given above 😉

PS :For border and background colors you can use hexa, rbg or string notations.

Hope it helps 🙂

-2👍

‘tooltipItem’ doesn’t exists, misspelling the final ‘s’. So, your code should be

labelColor : function(tooltipItem, chartInstance){
    return {
        backgroundColor : data.datasets[tooltipItems.datasetIndex].backgroundColor[0]
    };
}

Leave a comment