View on GitHub

Legend Highlighter

for Highcharts.js

Download this project as a .zip file Download this project as a tar.gz file

What is it?

Legend Highlighter is a plugin for Highcharts.js, which adds a new data series highlight effect to your charts.

How does it work?

Well, it's very simple - just hover over one of the data series label in legend box. You'll see, that all data series except hovered one are dimmed (to be specific, they will be transparent). An additional "pie chart" effect makes the hovered portion of data sliced out of the chart.

Here is a simple demo:

How do I start using the magic?

Include our plugin in your page:

<script src="highcharts-legend-highlighter.src.js"></script>

Enable the plugin by adding this code to your chart options:

legend: {
    highlightSeries: {
        enabled: true
    }
}

Can I see any demos?

Demo 01 - Lines
Demo 02 - Area
Demo 03 - Area & Lines (using linkSeries)
Demo 04 - Bars
Demo 05 - Pie (with allowSelectPoint enabled)
Demo 06 - Bubbles
Demo 07 - Bars & Lines (two separated charts)
Demo 08 - Funnel
Demo 09 - Data madness!

(Note: all demos are based on original Highcharts.js demos available here: http://www.highcharts.com/demo/)

So, what can it actually do?

Dim charts of one of the following types: line, spline, area, areaspline, arearange, areasplinerange, column, columnrange, bar, scatter, bubble, boxplot, errorbar, waterfall, pie, gauge, funnel
Slice out hovered pie chart portion and present it to the user
Support multiple charts of different types in one painting area
Remember "user selected" chart portion and restore the selection when user stops hovering over a label (usefull if using allowPointSelect in pie chart)
Properly handle all linkedSeries - if other series are linked to the series currently beeing hovered over, they won't be dimmed (because they are treated as a part of hovered series)

Are there any settings?

Yes, you can change plugin settings by adding new entries in chart options, under legend.highlightSeries group. Currently, the plugin will only use three additional options:

dimPiePieces - if set to true, plugin will additionally dim pie portions not hovered over by user
defaultOpacity - opacity level of chart element in "normal state" (default: 1)
dimmedOpacity - opacity level of chart element in "dimmed state" (default: 0.25)

Authors

License

License file can be found here:
https://raw.github.com/Sidnet/highcharts-legend-highlighter/master/LICENSE