CODEWITHSUNDEEP
javascripthtml5-canvaschart.js
TJ56
TJ56

Reputation: 125

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

I have a stacked bar chart as follows:

enter image description here

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:

enter image description here

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

Any help is really appreciated; thank you!

Upvotes: 0

Views: 374

Answers (1)

Ted Fitzpatrick
Ted Fitzpatrick

Reputation: 944

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.

Upvotes: 1

Related Questions