Change line colour on hover

[aseverino]

I believe it would be nice to see a good interaction support with Stacked Line charts, where one could get a Tooltip and a background color change by hovering over the filling of a line.

[etimberg]

@kilouco have you looked at the tooltip modes sample? https://github.com/chartjs/Chart.js/blob/master/samples/tooltips/interaction-modes.html

[aseverino]

@etimberg yes I have.

None of the examples give me any clue on how to achieve a background color change based on y position and values tooltip based on x position.

Am I missing something?

[etimberg]

oh, sorry I misunderstood what you're looking for. At the moment, there is no way to change the style of the line (fill/stroke) on hover.

Possible duplicate of #2136

[aseverino]

I don't think it's a duplicate. He is asking for a change on line color on hover. I'm asking for a fill color change. The idea is pretty much the same, though.

[juanjalvarez]

Hey, currently on 2.7.3 and wondering if this feature is still missing from Chart.js. With @types/chart.js I can see that the dataset takes a backgroundColor and hoveredBackgroundColor but does not apply it to the "stacked" lines.

[djsharkk]

I'm stuck on this also, I need to be able to highlight the dataset with the line included.

[etimberg]

@kurkle looks like the dataset mode hover stopped working. Do you recall what happened to it?

[kurkle]

@kurkle looks like the dataset mode hover stopped working. Do you recall what happened to it?

@etimberg looks like its working?
https://codepen.io/kurkle/pen/ZEOWbGv

[etimberg]

So it is! I must have setup my test case wrong when I tried it locally.

[kurkle]

So, this is actually quite trivial to achieve using Chart.js v3 and a custom interaction mode:

Chart.Interaction.modes.under = function(chart, e, options, useFinalPosition) {
  const metas = myChart.getSortedVisibleDatasetMetas();
  for(meta of metas) { // loop the metasets from top to bottom
    if (meta.dataset.interpolate(e, 'x').y < e.y) { // the line is above mouse position
      return [{datasetIndex: meta.index, element: meta.dataset}]; // could return all the points here too
    };
  }
  return [];
};

https://codepen.io/kurkle/pen/vYKbzKo

[etimberg]

Closing since the above solution works well