Highcharts Demo

author(s): Torstein Hønsi

by ian_smithz

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button data-id="button1">LegendItemclick Attempt 1</button>
<button data-id="button2">LegendItemclick Attempt 2</button>

JavaScript

$(function () {
        $('#container').highcharts({
            legend: {
                itemStyle: {
                    color: '#000000',
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            series: [{
                id: 'button1',
                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]
            }, {
                id: 'button2',
                data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
            }]
        }, function (chart) {
            // bind events to your own custom legend
            $(document).on('click', 'button', function (e) {
                var el = e.target,
                    id = el.getAttribute('data-id'),
                    series = chart.get(id);
                series.setVisible(!series.visible);
            });
        });
    });