Drawing a horizontal line on a stacked bar chart on hover (chart js)

Question

I have a stacked bar chart as follows:

I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:

I looked alot in online as well as the documentation, but couldn't find anything.

Any help is really appreciated; thank you!

Answer 1

In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.