Hide and show highchart legend

Question

I have a highchart that have a lot of legends on it. I wrote a function to toggle between the visibility of the legend. Following is my code:

function generateChart(divId, xText, yText) {
var options = ({
    chart: {
        type: 'scatter',
        zoomType: 'xy',
        renderTo: divId,

    },
    title: {
        text: 'Scatter Chart'
    },

    xAxis: {
        title: {
            enabled: true,
            text: xText
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
        title: {
            text: yText
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: 18,
        floating: true,
        backgroundColor: 'rgba(211,223,181,0.4)',
        borderWidth: 1,
        enabled: true,

    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br />'

            }
        }
    }
});
function showHideHandler(chart) {
    $("#btnShowHide").click(function (e) {
        var legend = chart.legend;
        if (legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
            $("#btnShowHide").text("Show Legend");
        }
        else {
            legend.group.show();
            legend.box.show();
            legend.display = true;
            $("#btnShowHide").text("Hide Legened");
        }
    });
}
var chart = new Highcharts.Chart(options, showHideHandler);    
return chart;

I am binding this chart via data recieved from an Ajax service

var chart = generateChart(id, xText, yText);
.
.
.
chart.addSeries({
        color: colorCoode,
        data: seriesData,
        name: seriesName
});

The chart works fine when the page is loaded at first. I have a button which recalls the code above and the chart data is renewed.

But when I try to hide the legend of the re-loaded chart, it gives me the following error.

TypeError: legend is undefined
if (legend.display) {

Can someone guide me as to why I am getting this error?

EDIT

I have put up a live example on jsfiddle. This is the example I am talking about. http://jsfiddle.net/9x4vmqyj/6/

 $(function() { BindChart('container', 'EP No.6', 'EP No.7', '12', '13', '1429', '1449', 'Ring'); $("#btnReGenerate").click(function() { var minring = 1429; var maxring = 1449; BindChart('container', 'EP No.6', 'EP No.7', '12', '13', minring, maxring, 'Ring'); }); }); function generateChart(divId, xText, yText) { var options = ({ chart: { type: 'scatter', zoomType: 'xy', renderTo: divId, }, title: { text: 'Correlation Chart' }, xAxis: { title: { enabled: true, text: xText }, startOnTick: true, endOnTick: true, showLastLabel: true }, yAxis: { title: { text: yText } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: 0, y: 18, floating: true, backgroundColor: 'rgba(211,223,181,0.4)', borderWidth: 1, enabled: true, }, plotOptions: { scatter: { marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, states: { hover: { marker: { enabled: false } } }, tooltip: { headerFormat: '<b>{series.name}</b><br />', pointFormat: 'Ring No.: <b>{point.ring}</b><br />' + 'Chainage: <b>{point.chainage}</b><br />' + xText + ': <b>{point.x}</b><br />' + yText + ': <b>{point.y}</b>' } } } }); function showHideHandler(chart) { $("#btnShowHide").click(function(e) { var legend = chart.legend; if (legend.display) { legend.group.hide(); legend.box.hide(); legend.display = false; $("#btnShowHide").text("Show Legend"); } else { legend.group.show(); legend.box.show(); legend.display = true; $("#btnShowHide").text("Hide Legened"); } }); } var chart = new Highcharts.Chart(options, showHideHandler); return chart; } function BindChart(id, xText, yText, xLoop, yLoop, startRing, endRing, type) { var chart = generateChart(id, xText, yText); var serviceurl = "/Analysis/CorrelationRingData"; if (type == "Chainage") { serviceurl = "/Analysis/CorrelationChainageData"; } var result = getJson(); if (result.Success == true) { var seriesData = {}; var geoClrCodes = {}; if (result.Geologies != null && result.Geologies !== undefined) { $.each(result.Geologies, function(i, geo) { geoClrCodes[geo.GeoID] = geo; }); } if (result.GeoIDs != null && result.GeoIDs !== undefined) { for (i = 0; i < result.GeoIDs.length; i++) { seriesData[result.GeoIDs[i]] = []; } } else { seriesData[0] = []; ringChainage[0] = []; } $.each(result.Data, function(i, item) { //console.log(item); var xVal = Math.round(parseFloat(item.XValue) * 1000) / 1000; var yVal = Math.round(parseFloat(item.YValue) * 1000) / 1000; var chainageVal = Math.round(parseFloat(item.ChianageValue) * 1000) / 1000; //console.log(item.ChainageValue + ", " + chainageVal); var series = 0; if (item.GeoId != null && item.GeoId !== undefined) { series = parseInt(item.GeoId); } //seriesData[series].push([xVal, yVal]); seriesData[series].push({ x: xVal, y: yVal, ring: item.RingNo, chainage: chainageVal }); }); for (j in seriesData) { if (seriesData[j] !== undefined) { if (seriesData[j].length > 0) { var colorCoode = "#a" + j + "a" + j + "a" + j; var seriesName = ""; if (geoClrCodes[j] != null && geoClrCodes[j] !== undefined) { colorCoode = "#" + geoClrCodes[j].GeoClrCode; seriesName = geoClrCodes[j].GeoNm; } chart.addSeries({ color: colorCoode, data: seriesData[j], name: seriesName }); } } } } else { console.log("NO DATA:" + result.Message); } } function getJson() { return { "Data": [{ "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.587, "YValue": 2.9210000000000003, "XLoop": 12, "YLoop": 13, "ChianageValue": 16092.082999991731, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1429, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.548, "YValue": 4.66, "XLoop": 12, "YLoop": 13, "ChianageValue": 16093.410999992002, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1430, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.576, "YValue": 0.597, "XLoop": 12, "YLoop": 13, "ChianageValue": 16094.747999991927, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1431, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.306, "YValue": 0.784, "XLoop": 12, "YLoop": 13, "ChianageValue": 16096.091999991793, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1432, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 0.95000000000000007, "YValue": 0.795, "XLoop": 12, "YLoop": 13, "ChianageValue": 16097.363999991667, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1433, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.822, "YValue": 2.071, "XLoop": 12, "YLoop": 13, "ChianageValue": 16098.420999991608, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1434, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.084, "YValue": 0.233, "XLoop": 12, "YLoop": 13, "ChianageValue": 16099.736999991534, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1435, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.779, "YValue": 4.752, "XLoop": 12, "YLoop": 13, "ChianageValue": 16100.940999991466, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1436, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 0.223, "YValue": 4.477, "XLoop": 12, "YLoop": 13, "ChianageValue": 16102.024999991687, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1437, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 4.646, "YValue": 4.822, "XLoop": 12, "YLoop": 13, "ChianageValue": 16103.050999991585, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1438, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.714, "YValue": 0.911, "XLoop": 12, "YLoop": 13, "ChianageValue": 16104.072999991528, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1439, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.329, "YValue": 2.622, "XLoop": 12, "YLoop": 13, "ChianageValue": 16105.150999991467, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1440, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.5340000000000003, "YValue": 0.95100000000000007, "XLoop": 12, "YLoop": 13, "ChianageValue": 16106.3339999914, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1441, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 0.82400000000000007, "YValue": 2.794, "XLoop": 12, "YLoop": 13, "ChianageValue": 16107.641999991667, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1442, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 4.227, "YValue": 1.057, "XLoop": 12, "YLoop": 13, "ChianageValue": 16109.003999991532, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1443, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 2.873, "YValue": 2.472, "XLoop": 12, "YLoop": 13, "ChianageValue": 16110.163999991346, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1444, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.196, "YValue": 2.859, "XLoop": 12, "YLoop": 13, "ChianageValue": 16111.307999991319, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1445, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 4.763, "YValue": 4.718, "XLoop": 12, "YLoop": 13, "ChianageValue": 16112.504999991252, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1446, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 4.876, "YValue": 4.615, "XLoop": 12, "YLoop": 13, "ChianageValue": 16113.592999991473, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1447, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.334, "YValue": 4.964, "XLoop": 12, "YLoop": 13, "ChianageValue": 16114.858999991347, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1448, "GeoId": 23 }, { "XLabel": "EP No.6", "XUnit": "bar", "YLabel": "EP No.7", "YUnit": "bar", "Type": "RingPv", "XValue": 1.451, "YValue": 1.49, "XLoop": 12, "YLoop": 13, "ChianageValue": 16115.862999991297, "RelativeGeoID": null, "GeologyClr": null, "RingNo": 1449, "GeoId": 23 }], "Success": true, "X": 12, "Y": 13, "GeoIDs": [23], "Geologies": [{ "GeoID": 23, "GeoNm": "Others", "GeoClrCode": "7030A0", "LastUpdate": null, "UpdateById": null, "ErrorMessage": null }] }; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <a href="#" id="btnShowHide">Hide legend</a> <br /> <a href="#" id="btnReGenerate">Regenerate</a> <div id="container" style="height: 400px"></div> 

This is the live code on Stack overflow. Please help as this functionality is very necessary to the project.

Answer 1

I can't tell you exactly what is stopping the passing of variables where, but as I mentioned it seems to be a matter of scope.

After re-generating the chart, the chart variable was not accessible to the click function from which you were calling the hide/show logic.

By

1. moving the declaration of the chart and legend variables outside of all functions
2. removing the click event handlers from a function
3. removing the binding of that function from the Highcharts call back,

everything seems to work ok:

• http://jsfiddle.net/jlbriggs/9x4vmqyj/11/

I am certain there are other ways to make it work, but your setup is rather complex - it seems overly complex, but maybe there are other circumstances that require such complexity...

Answer 2

$('#updateLegend').click(function (e) {
        var legend = chart.legend; 

        if(legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
        } else {

            legend.group.show();
            legend.box.show();
            legend.display = true;
        }
    });