How to set colors for Chart.js tooltip labels

12,846

Solution 1

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
        }
    }

Solution 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)

Solution 3

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

Share:
12,846
Thilina Nakkawita
Author by

Thilina Nakkawita

With more than 8 years of experience, an expert in C#, ASP .NET & MVC, and SQL Server with database analysis and design. Skilled in developing business plans, requirements specifications, user documentation, and architectural systems research.

Updated on June 05, 2022

Comments

  • Thilina Nakkawita
    Thilina Nakkawita over 1 year

    In Chart.js I am unable to set a color for the tooltip.I want to color the label "December 2016" as same as the color of the legend (Blue).

    enter image description here

    Please see below;

    graphOptions.tooltips = {
                        enabled: true,
                        mode: 'single',
                        displayColors: false,
                        callbacks: {
                            title: function (tooltipItem, data) {
                                if (tooltipItem.length > 0) {
                                    return tooltipItem[0].xLabel + ': ' + tooltipItem[0].yLabel +" Scans";
                                }
                                return "";
                            },
                            label: function (tooltipItem, data) {
                                if (data.datasets.length > 0) {
                                    return data.datasets[tooltipItem.datasetIndex].label;
                                }
                                return '';
                            },
                            labelColor: function (tooltipItem, chartInstace) {
                                if (data.length > 0) {
                                    return data[tooltipItem.datasetIndex].backgroundColor;
                                }
                            }
                        }
                    };
    
  • Windmill
    Windmill over 6 years
    This question was asked a while back but... Any idea why this would not work? I can set the backgroundColor if I do so in tooltips {...}, but doing so using the function in callbacks does nothing, even if I hard-code a particular color.. Any ideas?
  • funkysoul
    funkysoul almost 6 years
    There is no labelTextColor property for tooltips.. I think the appropriate option would be bodyFontColor.
  • Alvin Chipmunk
    Alvin Chipmunk almost 6 years
    There is now since Chartjs 2.7 github.com/chartjs/Chart.js/releases/tag/v2.7.0 (Feature #4199)
  • Shaya Ulman
    Shaya Ulman about 3 years
    How is data not undefined?