[Chartjs]-Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?

by

2👍

Idea is to find the dataset object corresponding to the plot line you want to change, update its borderWidth property, then call chart.update().

Below is an example, pay attention to the onHover function.

var config = {
  type: 'line',
  options: {
    tooltips: {
      mode: 'nearest',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: false
    },


    // LOOK AT ME!!! I'M SO IMPORTANT!!!
    onHover: function onHover (evt, activeElements) {
      if (!activeElements || !activeElements.length) return;
      var datasetIndex = activeElements[0]._datasetIndex;
      var activeDataset = this.data.datasets[datasetIndex];
      activeDataset.borderWidth = 5;
      this.update();
    },


  },
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'BlueLine',
      fill: false,
      backgroundColor: window.chartColors.blue,
      borderColor: window.chartColors.blue,
      data: [57, 66, 17, 23, 16, 38, 60, 25, 5],
    }, {
      label: 'RedLine',
      fill: false,
      backgroundColor: window.chartColors.red,
      borderColor: window.chartColors.red,
      data: [23, 6, 32, 57, 38, 17, 19, 7, 23],
    }]
  },
};

var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);

Leave a comment