14

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.

highcharts modal

<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();
});
Jeroen
  • 60,696
  • 40
  • 206
  • 339
Christian Burgos
  • 1,572
  • 9
  • 26
  • 48

5 Answers5

18

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.

Community
  • 1
  • 1
Ilya Luzyanin
  • 7,910
  • 4
  • 29
  • 49
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.

Orkun Tuzel
  • 1,342
  • 10
  • 22
0

Apply this

chart: {
 events: {
            load: function(chart) {
                 $timeout(function() {
                      chart.target.reflow();   
                 );
          }
      }};
Eric
  • 1,171
  • 2
  • 14
  • 27
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();
});

itzmevant
  • 31
  • 4
-1
$('#J_report_graph').on('shown.bs.modal', function (event) {
                            $("#J_report_graph_container").highcharts({});
                        });

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

will work as expected

linuxlsx
  • 138
  • 10