Skip to main content

Interactive Legend

Many JavaScript-based chart libraries can display chart legends with interactive items. When you click on a legend item, something happens with the related series in the plot area.

Pies may explode, the series may get highlighted or, in most cases, the whole series is hidden from the chart. Whenever this behavior was not implemented by default, we came up with custom implementations or hacks. The interactive legend is disabled when interactivity is turned off.

Interactive Legend in Multi-Series Charts

Multi-series charts – like grouped bar, scatter, line or area charts – show legends with series names. Their visibility is toggled with a mouse click on the legend item. Here are some examples of interactive chart legend: on FusionCharts (built-in implementation on the interactiveLegend property), and CanvasJS (custom implementation). Go to their chart template, remove the chart app filter and try it for all other supported applications.

Interactive Legend in Single-Series Charts

Shape charts – like pie, doughnut, pyramid or funnel charts – are usually single-series. However, many chart applications implemented a similar behavior for their interactive legend, as for the multi-series charts. The legend shows this time point labels, instead of series names. When you click on a legend item, the slice associated with that point is hidden or displayed back. Check it on amCharts and Highcharts here below. Then go to their chart template, remove the chart app filter and try it for all other supported applications.