5

I've created a Chart.js line plot with multiple lines (1 pixel thickness by default), and I want the user to be able to mouse over any particular line plot (not just the points) and have the plot change its line thickness (i.e. 3 pixels). Is this possible to do in Chart.js?

sunw
  • 535
  • 5
  • 29

1 Answers1

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);
hackape
  • 18,643
  • 2
  • 29
  • 57
  • Thanks for the answer! But it looks like activeElements[0]._datasetIndex is always the same value; did you mean to get _datasetIndex always from only the first item in activeElements? – sunw Apr 09 '19 at 00:04
  • When I tried your solution, hovering anywhere on the chart resulted in only the first dataset changing its style. The expected behavior was to change the styling only for the line that's hovered on, and also to undo the styling once mouse unhovers and moves elsewhere. – sunw Apr 09 '19 at 00:07
  • @sunw I don't know your full config, but `tooltip/hover: { mode: 'nearest', intersect: false }` is also important in my setup. Line is NOT hoverable in chartjs, this hack let you to hover-activate the nearest datapoint dot on the line, and that way we get the similar effect of hovering on the line. Make sure you got that part right. My example is runnable, run it to see the effect. You should see `activeElements[0]` changed. – hackape Apr 09 '19 at 02:48
  • 1
    As of how to *undo the styling* when unhovered, I think that part is up to you to figure out. Full implementation of undoing requires alot of code that I feel reluctant to type out. You already know how to select the hovered line, and how to set style then update its view. Undoing is basically the reverse of this process. – hackape Apr 09 '19 at 02:56
  • The only hard part is in detecting 1) when a previously hovered line goes unhovered now, 2) when a previously hovered line stay hovered now. 1) allow you to undo styling, 2) allow you to rule out unnecessary view update to improve performance. You need to implement a mechanism to keep track of the currently-hovered-target state somewhere. – hackape Apr 09 '19 at 03:01