jquery - Highcharts won't fit in Bootstrap 3 modal body

Question

How do I fit and make a highcharts chart responsive with Bootstrap 3 modals? It seems that the chart is independent from the css of the page, but I'm not sure.

<div class="modal fade" id="chart-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Assortment Analysis</h4>
      </div>
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-body">
            <div id="container"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Lazada', 'Competitor 1', 'Competitor 2', 'Competitor 3', 'Competitor 4']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Price Range'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
        series: [{
            name: '100 - 300',
            data: [5, 3, 4, 7, 2]
        }, {
            name: '301 - 500',
            data: [2, 2, 3, 2, 1]
        }, {
            name: '501 - 1000',
            data: [3, 4, 4, 2, 5]
        }, {
            name: '1001 - 3000',
            data: [3, 4, 4, 2, 5]
        }, {
            name: '3001 - 5000',
            data: [3, 4, 4, 2, 5]
        }, {
            name: '5001 - 10000',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

Here is a jsfiddle.

Reflow fix:

$('#reflow-chart').click(function () {
    $('#first-chart').highcharts().reflow();
    $('#second-chart').highcharts().reflow();
});

Answer 1

This is a common issue with highcharts. The best advice I could get is to use window.resize() after Highcharts is shown, but actually there is an API function in Highcharts called reflow, that could also help.

The solution is to catch bootstrap modal events and update your Highcharts width in callback of shown.bs.modal event:

var chart = $('#container').highcharts();
$('#chart-modal').on('show.bs.modal', function() {
    $('#container').css('visibility', 'hidden');
});
$('#chart-modal').on('shown.bs.modal', function() {
    $('#container').css('visibility', 'initial');
    chart.reflow();
});

See demo. I use visibility css property here so Highchart won't bounce. This is not ideal, but better than nothing.