score:18

Accepted answer

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.

score:-1 

$('#J_report_graph').on('shown.bs.modal', function (event) {
                            $("#J_report_graph_container").highcharts({});
                        });

$("#J_report_graph").modal();

will work as expected

score:0

Apply this

chart: {
 events: {
            load: function(chart) {
                 $timeout(function() {
                      chart.target.reflow();   
                 );
          }
      }};

score:0

for responsive highcharts with modal on bootstrap 3 just adding this line code on load page

$('#yourmodal').on('off.bs.modal', function() {
    $('#yourselector').css('visibility', 'hidden');
});
$('#yourmodal').on('shown.bs.modal', function() {
    $('#yourselector').css('visibility', 'initial');
    $('#yourselector').highcharts().reflow();
});

score:2

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.


Related Query

More Query from same tag