javascript - Highcharts: Hide and show legend -
i'd able toggle visibility of legend of chart when user clicks button.
i've tried hiding legend using undocumented destroy()
method, when try re-render legend , it's items, items appear in top left of chart instead of within legend. items don't seem have of event handlers attached (clicking on item no longer toggles series).
is there better way this? have support both svg , vml implementations, looking solution address both.
$('#updatelegend').on('click', function (e) { var enable = !chart.options.legend.enabled; chart.options.legend.enabled = enable; if (!enable) { chart.legend.destroy(); //"hide" legend } else { var allitems = chart.legend.allitems; //add legend items chart (var = 0; < allitems.length; i++) { var item = allitems[i]; item.legenditem.add(); item.legendline.add(); item.legendsymbol.add(); } //re-render legend chart.legend.render(); } });
in case when destroy legend, need generate full legend. simpler solution use hide() / show() function elements.
http://jsfiddle.net/sbochan/3bh7b/1/
$('#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; } });
Comments
Post a Comment