CODEWITHSUNDEEP
highcharts
Barry Briggs
Barry Briggs

Reputation: 209

Resizing Highchart

What is the recommended way to resize a Highchart that is embedded in an HTML page?

I set the <div> that contains the chart (the chart.options.renderTo) (and the Highcharts div itself) to style.resize="both" but that doesn't seem to take (I suspect because the Highchart URL is in the bottom right of the chart). Specifically I'm looking for the recommended UI cue.

Suggestions?

Upvotes: 0

Views: 620

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to set same padding on the chart container to see the resize. If the chart container dimensions are changed, then you need to call chart.reflow method:

CSS:

#container {
    width: 400px;
    height: 400px;
    background: #e2eaad;
    margin: 0 auto;
    resize: both;
    padding: 10px;
}

JS: 

var chart = Highcharts.chart('container', {
    series: [{
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }]
});

document.getElementById('container').addEventListener("click", function() {
    chart.reflow();
});

Live demo: http://jsfiddle.net/BlackLabel/pnq8w6tr/

API: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

Upvotes: 1

Related Questions