1

For first load its overflowing. Other than this highcharts is working all fine in other events and resizing accordingly afterwards.

Err Screenshot Link http://screenshot.co/#!/d97639604f

mypage.tmpl.html

<div class="dashboard" layout="column">
 <div layout="column"  class="drag-container" layout-xs="column" layout-margin id="chartcontainer">
        <div id="linechart" class="highcharts-container"  >Placeholder for chart</div>
    </div>
</div>

mypage.tmpl.scss

.highcharts-container
{
  width:auto !important; height:auto !important; overflow: hidden !important;
}

myctrl.js

(function () {
    'use strict';

    angular
        .module('app.mymodule')
        .controller('myCtrl', myCtrl);

    /* @ngInject */
    function myCtrl($scope, $timeout) {

        var vm = this;


        //HIGHCHARTS

        Highcharts.chart('linechart', {
            chart: {

                events: {
                    load: function(event) {
                        event.target.reflow();

                    }
                },
                renderTo: 'chartcontainer',
                zoomType: 'xy'
            },
            title: {
                text: 'Average Monthly Temperature and Rainfall in Tokyo'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Rainfall',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value} mm',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 120,
                verticalAlign: 'top',
                y: 100,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            series: [{
                name: 'Rainfall',
                type: 'column',
                yAxis: 1,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                tooltip: {
                    valueSuffix: ' mm'
                }

            }, {
                name: 'Temperature',
                type: 'spline',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                tooltip: {
                    valueSuffix: '°C'
                }
            }]
        });

    }
})();
Mr X
  • 1,637
  • 3
  • 29
  • 55
  • 1
    Have you tried using chart.reflow() method after making your chart? http://api.highcharts.com/highcharts/Chart.reflow Here you can find topic that may be connected with your issue http://stackoverflow.com/questions/25398127/highcharts-wont-fit-in-bootstrap-3-modal-body – Grzegorz Blachliński Sep 09 '16 at 09:03
  • Its happening as there is side nav which gets loaded later before the main panel seems, and then when complete page reloads , the size of highchart div remains full width of browser, once any event gets trigger it wrks fine. So have to make some process where once complete page loads then highchart gets trigger. I am not getting that part how to ? – Mr X Sep 09 '16 at 09:31
  • Have you seen this topic? http://stackoverflow.com/questions/18646756/how-to-run-function-in-angular-controller-on-document-ready it may help you load chart on page ready – Grzegorz Blachliński Sep 09 '16 at 10:00

1 Answers1

0

Calling setSize() on the chart on load fixed the problem for me:

chart: {
    events: {
        load: function() {
            this.setSize();
        }
    }

Using Highcharts 11.

franzo
  • 1,379
  • 1
  • 15
  • 30