• Open in:

Highlighting Line Chart Series on Legend Hover

Charts with multiple series are great to get a high-level view of data but could be hard to read when you want to focus on data in one series. Selecting the series in the legend and highlighting its respective graph is a perfect way to solve this issue.

Key implementation details

We handle the pointerover event on the Legend and get the underlying series from its data item. Then we just go through the series of the chart and highlight our selected series by increasing its stroke width, then dim all the other series. On pointerout we restore the view.

Related tutorials

Demo source