CODEWITHSUNDEEP
javascriptjqueryhighcharts
Fizzix
Fizzix

Reputation: 24395

How to trigger a legend click in HighCharts with jQuery?

So basically, I want to remove the legend that HighCharts creates (using the code below), and have my own with more interactive buttons and styling.

legend: {
     enabled: false
},

Below is a fiddle where there is a simple chart, and a legend. If a legend item is clicked, the relative data is hidden from the chart.

WORKING EXAMPLE

Instead, I would like to create a few simple HTML buttons, styled with CSS, and to add a click event to them to make them do exactly what the legend does in my example.

Pseudo code:

$('.legend-item').on('click', function() {
    var dataIDToHide = $(this).attr("data-chartNumber");
    myChart.hide(dataIDToHide);
});

Below contains two attempts that I tried, although neither worked.

ATTEMPTS

EDIT:

By combining both the below answers, I managed to come up with this: http://jsfiddle.net/c2L5K/6/

Upvotes: 2

Views: 6261

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

See the example http://jsfiddle.net/N3KAC/1/ which introduce how you can call show/hide on the serie, from custom html elements.

 $('#customLegend .item').click(function(){
        var inx = $(this).index(),
            point = chart.series[0].data[inx];

        if(point.visible)
            point.setVisible(false);
        else
            point.setVisible(true);
    });

Upvotes: 1

Jai
Jai

Reputation: 74738

Try this:

change your button's attributes like this:

<button data-id="button1">LegendItemclick Attempt 1</button>
<button data-id="button2">LegendItemclick Attempt 2</button>

You can use data-id instead of just id.

Then in your highcharts method you need to pass that data-id within the series[] object.

Now if you you pass the ids like that then you need a callback function for binding the click events with a chart as an argument:

$(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', // pass it here
            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) { // callback function with chart as an argument
        // 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);
        });
    });
});

Updated Fiddle of yours.

Upvotes: 4

Related Questions