Highcharts Toggle

Toggle pairs of data in Highcharts

by atype

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="chart" style="width: 500px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var links = {
        'Apples': 'Apples average',
        'Pears': 'Pears average',
				'Oranges': 'Oranges average',
        'Bananas': 'Bananas average'
    };
    $('#chart').highcharts({
        chart: {
            type: 'column'
        },
        legend: {
	        title: {
                text: 'Choose option'
            },
            itemHiddenStyle: {
                color: '#aaa'
            },
            itemWidth: 200,
            align: 'bottom',
            verticalAlign: 'bottom',
            layout: 'horizontal',
            itemMarginTop: 2,
            itemMarginBottom: 2,
            x: 0,
            y: 0
        },
        title: {
            text: ''
        },
        tooltip: {
				backgroundColor: '#e2f2f9',
    		borderColor: 'none',
    		borderRadius: 0,
    		borderWidth: 0
				},
        xAxis: {
            categories: [
                '1 year',
                '3 year',
                '5 year'
            ],
            lineColor: '#eaeaea',
            tickColor: '#eaeaea',
            plotLines: [{
            color: '#eaeaea',
            width: 1,
            value: 0.5
        	}, {
            color: '#eaeaea',
            width: 1,
            value: 1.5
        }],
            crosshair: true
        },
        yAxis: {
	        min: -3,
            max: 12,
            lineColor: '#eaeaea',
            title: {
                text: 'Return %'
            },
            tickInterval: 1,
            gridLineColor: '#eaeaea',
            gridLineWidth: 1,
            lineWidth:1,
            plotLines: [{
                color: '#666',
                width: 1,
                value: 0
            }],
            gridZIndex: -1
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                events: {
                    legendItemClick: function (event) {
                        var sisterSeries =...