Rotate long list of items in Highcharts legend in dropdown
I has a graph with approximately 40 elements as separate lines. Now I need to add functionality to enable / disable or highlight any of them via the legend / menu / dropdown list.
Usually when the legend is on, I can click on any element and turn it on / off. However, the very long legend really distorts the (beauty) of my graph. Is there a way to achieve the same (on / off) with a dropdown menu? It can be much more visually appealing.
Otherwise, as a last resort, you just need to click the "enable / disable" legend (for example, this example , although "enable" does not work.
// turn legend on/off with HTML button
function(chart){
$('#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;
}
});
}
source to share
You can prepare a dynamic dropdown legend based on a series. Just what you need is a loop over each of the series and click as an option to select. Then add a change to the event where you show / hide the series.
var $customLegend = $('#customLegend').append('<select id="customSelect"></select>').find('select'),
$option,
serie;
$customLegend.append('<option>Select serie</option>');
$.each(chart.series, function(i, serie){
$customLegend.append('<option>' + serie.name + '</option>');
});
$customLegend.change(function(){
$option = $(this).val();
serie = chart.get($option);
if(serie.visible) {
serie.hide();
} else {
serie.show();
}
});
Example: http://jsfiddle.net/b8chchjo/
source to share