Highcharts exceeds the container in chrome

Question

I have used pie chart in Highcharts and I have a strange issue with chrome browser. I am using it with rails and when the load the link for the first time everything looks fine.(find the image below)

When I navigate other menu and come back to Dashboard, the chart exceed the actual container which is in bootstrap column

<div class="row">
<div class="col-lg-6">
  ...
</div>
<div class="col-lg-6" id="chart_issues_count">
</div>
</div>

Highcharts code

$('#chart_issues_count').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: 'Issues',
                align: 'center',
                verticalAlign: 'middle',
                y: 5
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: true,
                        distance: -50,
                        style: {
                            display:'none',
                            fontWeight: 'bold',
                            color: 'white',
                            textShadow: '0px 1px 2px black'
                        }
                    },
                    size: 300,
                    startAngle: 0,
                    endAngle: 360,
                    center: ['50%', '50%']
                }
            },
            series: [{
                type: 'pie',
                name: 'Issues',
                innerSize: '70%',
                data: [
                    ['Open',   open],
                    ['In - Process',       process],
                    ['Solved', solved],
                    ['Closed',    closed],
                    ['Re - Open',    reopen]

                ]
            }]
        });

This happens only with chrome.I have tested with firefox, IE, Safari and in all the three browsers it works fine.

Is there any workaround for chrome?

Also I have tried with reflow as below and its not working

$(window).load(function(){
        $('#chart_issues_count').highcharts().reflow();
    });

edit

Chrome Version 51.0.2704.106 m

update

I noticed that styles are being applied only after the page loads. As a result it flashes content without styles for a moment and then the styles are applied. Is it a behaviour of rails?( I am pretty new to Ruby on Rails) It never happened with PHP which I am familiar with.

Hi, I think that your problem may be connected with this SO topics: http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using http://stackoverflow.com/questions/25398127/highcharts-wont-fit-in-bootstrap-3-modal-body — Grzegorz Blachliński, Jul 08 '16 at 13:02

score 0 · Accepted Answer · answered Jul 21 '16 at 07:41

Finally I found the solution. I was using bootstrap CDN link and rails seems to load the CDN Link after $(document).ready(); ( I am not sure of it). I load the highchart in ready method where it takes 100% width of the column where the chart is being loaded(before bootstrap applies).

I installed the bootstrap gem and now everything working fine as expected.

https://github.com/twbs/bootstrap-sass

I should have better learning in rails structure and its working.

Highcharts exceeds the container in chrome

1 Answers1