[Chartjs]-Change the background color of tooltip dynamically using chart color

by

4đź‘Ť

âś…

Working “dynamic” example.

***keep in mind the access to data related to your data structure.

Using tooltip-model
https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html#tooltip-model

“hello world” example – Change all tooltips background to red:

tooltips: {
   custom: function(tooltipModel) {
   tooltipModel.backgroundColor = "red";
  }
},

Code Snippet:

var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: ["red", "blue","green", 'purple'],
    data: [1000,1500,2000, 2200]
  }]
};

var options = {
  title: {
    text: 'Dynamically change tooltip background example',
    display: true
  },
  tooltips: {
    titleFontSize: 20,
    borderWidth: 2,
    borderColor: "white",
    displayColors: false, /* if true, color boxes are shown in the tooltip */
    /*########### Custom model ###########*/
    custom: function(tooltipModel) {
      /* if data & datasets not empty & tooltip available */
      if (tooltipModel.opacity !== 0 && data.labels.length && data.datasets.length) {
        /* get dataPoints index */
        var index = tooltipModel.dataPoints[0].index;
        /* get dataPoints datasetIndex */
        var dataSetIndex = tooltipModel.dataPoints[0].datasetIndex;
        /* get the current color on index and datasetIndex position */
        var color =  data.datasets[dataSetIndex].backgroundColor[index];
        /* set backgroundColor */
        tooltipModel.backgroundColor = color;
      };

    }
  },
  scales: {
    xAxes: [{
      stacked: true
    }],
    yAxes: [{
      stacked: true
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});
<canvas id="chart" width="800" height="450"></canvas>



<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

The outline of the code

  1. “if” (To avoid console errors):
/*########### Custom model ###########*/
custom: function(tooltipModel) {
      /* if data & datasets not empty & tooltip available */
      if (tooltipModel.opacity !== 0 && data.labels.length && data.datasets.length) {
     /* do something */
     console.log(tooltipModel.dataPoints[0]); /* return object */

console.log Return object:

Object {
  datasetIndex: 0,
  index: 1,
  label: "Asia",
  value: "1500",
  x: 338.6845703125,
  xLabel: "Asia",
  y: 215.28,
  yLabel: 1500
}
  1. Than we use dot (.) notation to access the object values.
console.log(tooltipModel.dataPoints[0].index); /* return 1 */
  1. We use this index “anchor” to get the correct index for backgroundColor array:
console.log(data.datasets[dataSetIndex].backgroundColor[index]); /* return "blue"
  1. Last step is to use this color value:
/* set backgroundColor */
tooltipModel.backgroundColor = color;

UI

Usefull to hide color boxes:

displayColors: false, /* if true, color boxes are shown in the tooltip */

https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html#tooltip-configuration

codepen:

https://codepen.io/ezra_siton/pen/dyoQeGe?editors=1011

1đź‘Ť

I also had same problem today.Solution is implementing custom tooltip method but you dont need to create custom tooltip from scratch.

  colorArray=["blue","red","green"];

tooltips: {
    custom: function(tooltipModel) {
      tooltipModel.backgroundColor=this.colorArray[tooltipModel.dataPoints[0].index];
      },
  },

This code worked for me.Depends on which tooltip you click it will bring the index of color from colorArray.

Leave a comment