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

I tried the accepted solution, but in my case I didn't have an option to use a specific module id that already exist in the html, so solution below didn't work for me.

$('<modal-id>').on('shown.bs.modal', function() {
   chart.reflow();
});

What I was trying to do is, dynamically adding a modal to the html as an EmberJS component which only has a specific class.

My solution was this:

App.registerComponentFactory('my-chart', SplineChart.extend({
    setup: (function() {
      $('body')
      .off('shown.bs.modal', '.my-modal')
      .on('shown.bs.modal', '.my-modal', () => this.reflow());
}).on('init'),

So each time my chart module is initialized, it binds the event handler to the modal. And the

.off('shown.bs.modal', '.my-modal')

part is also needed for unbinding the handler each time when the modal is triggered, otherwise the reflow function was running successfully only in the first attempt.

This may be useful for similar cases.