[Chartjs]-Change style of hover and tooltip in chartjs or ng2-charts

by

2👍

✅

Unfortunately there is no built-in functionality for this yet. However you can use this chart plugin (once created for my own purpose) to achieve your goal.

To utilize the plugin, set the following option in your chart­‘s options config :

lineOnHover: {
   enabled: true,
   lineColor: '#bbb',
   lineWidth: 1
}

also, make sure to set the following properties for your dataset :

pointRadius: 0,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'white'

see – live demo

0👍

This answer is to build on top of GRUNT’s answer above to be able to display if its a multiline graph:

Just change the following (in the code snippet he provide here):

posX.forEach(function(pos, posIndex) {
  if (this.posX < pos + radius && this.posX > pos - radius) {
    chart.updateHoverStyle([metaData[posIndex]], null, true);
    chart.tooltip._active = [metaData[posIndex]];
  } else chart.updateHoverStyle([metaData[posIndex]], null, false);
}.bind(this));

to:

posX.forEach(function(pos, posIndex) {
  var metaDatum = []
  if (this.posX < pos + radius && this.posX > pos - radius) {
    chart.data.datasets.forEach((dataset, ind) => {
      metaDatum.push(chart.getDatasetMeta(ind).data[posIndex]);
    })

    chart.updateHoverStyle(metaDatum, null, true);
    chart.tooltip._active = metaDatum;
  } else {
    metaDatum.push(metaData[posIndex]);
    chart.updateHoverStyle(metaDatum, null, false);
  }
}.bind(this));

Leave a comment