In Highcharts, how to redraw chart after legend item width resized?

Question

The requirements are:
1. "ellipsis" visual effect "..." for overflowed legend items' text.
2. After resized, the legend item width should adjust with the new container size. Means if the legend item had text "blahblahblahblah", and after resizing, the chart container get smaller and have no enough space to display the full text, it should display "blahblah...".

I've figured out the 1st requirement by giving the legend itemWidth a fixed width in pixel, and set the textOverFlow to "ellipsis":

chartOptions.legend.itemStyle.width = $container.width() + "px";
chartOptions.legend.itemStyle.textOverflow = "ellipsis";

But for the 2nd requirement, I changed the chart.legend.itemStyle.width to the current container width, and call the chart.redraw(), and it doesn't really redraw the chart.

`chart.legend.itemStyle.width = $container.width() + "px";
`chart.redraw()`

Is there any way I can update the chart with new legend.itemStyle.width?

Jsfiddle: https://jsfiddle.net/scottszb1987/z5qv1t80/

Cheers

Mike Zavarello Mike Zavarello · Accepted Answer · 2016-06-20T11:34:27

In your case, I'd suggest adding a window .resize() event and then producing a new version of the chart with the updated options. That way, your legend size will pull in the new width of the container element.

// whenever the window is resized, destroy the chart and redraw it using updated options
$(window).resize(function() {
    chart.destroy();
    chart = new Highcharts.Chart(getChartOptions($("#container")));
});

Here's an updated version of your fiddle with this change: https://jsfiddle.net/brightmatrix/z5qv1t80/5/

I hope this is helpful for you.

In Highcharts, how to redraw chart after legend item width resized?

1 Answers