Geek Answers Handbook

Highcharts - resize legend to fit chart?

Is there a way to dynamically set a certain width of legend elements when resizing a chart? I have some very long item names that can be found in the legend, so I need to specify a width to make the text wrap, but I would like to change the width when the width of the chart changes. Thanks.

+4
source share
2 answers

I found a better job for this:

chart.legend.options.width = newwidth;
chart.legend.itemStyle.width = newwidth;
for(var index in this.chart.series) {
        chart.legend.destroyItem(chart.series[index]);
}
chart.legend.render()
+2
source

This is usually not possible, but you can turn off the legend of high maps and prepare your own div (absolutely positioned), which will include a list of all series and a click event. A simple example is available here.

$legend = $('#customLegend');

    $.each(chart.series[0].data, function (j, data) {

        $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');

    });

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

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

http://jsfiddle.net/N3KAC/10/

, $(window).resize() .

0

More articles:


All Articles