How to use the reflow() method in Highcharts? How to Auto resize Highchart based on DIV or Contaier?

 Sure, here's an example of how to use the reflow() method in Highcharts:

HTML:

bash
<div id="container"></div>
<button id="resize">Resize</button>

JavaScript:

javascript
// Create the chart
var chart = Highcharts.chart('container', {
  chart: {
    type: 'line',
    width: null,
    height: null
  },
  title: {
    text: 'Example Chart'
  },
  series: [{
    data: [1, 2, 3, 4, 5]
  }]
});

// Add a click event listener to the Resize button
document.getElementById('resize').addEventListener('click', function() {
  // Randomly resize the container
  var container = document.getElementById('container');
  container.style.width = Math.floor(Math.random() * 500 + 300) + 'px';
  container.style.height = Math.floor(Math.random() * 200 + 100) + 'px';

  // Trigger a reflow of the chart
  chart.reflow();
});

In this example, we create a Highcharts line chart inside a container div, and set the chart.width and chart.height options to null to allow the chart to automatically adjust its size based on the size of the container.

We also add a button with an event listener that randomly resizes the container div when clicked. To make sure that the chart reflows properly when the container size changes, we call the reflow() method on the chart object after changing the container size.

When you run this example and click the Resize button, the chart will adjust its size and reflow to fit the new container dimensions.