Change the background color of tooltip dynamically using chart color

问题

I have a line chart with 4 datasets, I want to show different tooltip backgrounds for all 4 lines. but tooltip doesn't support dynamic background color, anyway how to do this?

回答1:

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

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

Than we use dot (.) notation to access the object values.

console.log(tooltipModel.dataPoints[0].index); /* return 1 */

We use this index "anchor" to get the correct index for backgroundColor array:

console.log(data.datasets[dataSetIndex].backgroundColor[index]); /* return "blue"

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

回答2:

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.

来源：https://stackoverflow.com/questions/60701019/change-the-background-color-of-tooltip-dynamically-using-chart-color

标签

chart.js