External legend in Highcharts

Question

I want to create my own legend instead of using the Highcharts one.

The idea is to show the series data in an external table and by clicking in one row, show or hide the series in the chart.

Is this somehow possible with Highcharts? I couldn't find any way to relate an external element with a specific series.

---

Update

To illustrate it a bit better imagine that I want to create a legend like the one I did in this example: http://jsfiddle.net/msSr7/

Which is mainly like so:

<div class="myLegend">My legend for serie 1 </div>
<div class="myLegend">My legend for serie 1 </div>

Answer 1

If what you want is to click on our custom legend item to toggle the series visibility you can try this:

<div class="myLegend" id="0">My legend for serie 1</div>
<div class="myLegend" id="1">My legend for serie 2</div>

I have given each div an ID equal to the series number. Then in javascript do:

$('div.myLegend').click(function () {
    var theSeries = $(this).attr('id');
    var chart = $('#container').highcharts();
    var series = chart.series[theSeries];

    if (series.visible) {
        series.hide();
    } else {
        series.show();
    }
});

Answer 2

I think this is what you want:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-hide/

html

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button">Select first series</button>

javascript

$(function () {
    $('#container').highcharts({

        plotOptions: {
            series: {
                showCheckbox: true
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
        }]

    });


    // the button action
    $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.series[0].select();
    });
});

So in your table row,you can call the .select depending on the series