CODEWITHSUNDEEP
jquerycsstwitter-bootstraphighchartstwitter-bootstrap-3
Christian Burgos
Christian Burgos

Reputation: 1591

Highcharts won't fit in Bootstrap 3 modal body

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();
});

Upvotes: 14

Views: 13595

Answers (5)

itzmevant
itzmevant

Reputation: 31

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();
});

Upvotes: 0

Eric
Eric

Reputation: 1291

Apply this

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

Upvotes: 0

Orkun Tuzel
Orkun Tuzel

Reputation: 1432

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.

Upvotes: 2

linuxlsx
linuxlsx

Reputation: 138

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

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

will work as expected

Upvotes: -1

Ilya Luzyanin
Ilya Luzyanin

Reputation: 8110

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.

Upvotes: 18

Related Questions