score: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);

Related Query

More Query from same tag