Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<p>Click "Show chart" button, and the chart will render in 600px x 400 px size (a default coming from Highcharts) instead of fitting into its container.</p>
<p>Now click "reflow" button, and observe as the chart fits into its container perfectly.</p>

</p>

<button onClick="showChart()">
  Show chart
</button>
<button onClick="reflow()">
 Reflow
</button>
<div id="container"></div>

CSS

#container {
  display: none;
}

JavaScript

function showChart() {
  document.querySelector('#container').style.display = 'block';
}
function reflow() {
  window.Highcharts.charts.filter(chart => chart).forEach(chart => chart.reflow())
}

Highcharts.chart('container', {
  series: [{
    data: [1, 2, 3]
  }]
});