highcharts-ng: Sometimes the chart doesn't fit the parent element's size

I’m having a problem adding a chart into a fluid div. It doesn’t fit the size of the chart’s parent div, and it overflows it instead, like this:

If I keep refreshing the page, eventually it will work, showing the chart correctly:

I later discovered that if I resized the browser, the chart will then be displayed correctly, regardless of the resolution I choose, so the problem only occurs on the first load. Another test I did was to remove the chartConfig object, passing an empty object instead, but it didn’t help as well.

I’m using bootrstrap, with a markup similar to this:

<div class="col-md-7">
  <highchart class="chart" config="ctrl.chartConfig"></highchart>
</div>

Also, I’m using latest Angular, Highstock (with standalone adapter) and Highcharts-ng. I tried switching to Highcharts, but no help.

Could this be a bug?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 22 (9 by maintainers)

Most upvoted comments

I have fixed this by making the chart data available a bit after the page is loaded. This way the containers get setup first. Then the chart is loaded, this way the proper size is already available to highCharts and everything works as expected (including animations)

$timeout(function() {
    $scope.dashboardData = dashboardData;
}, 100);

In my template i simple use <highchart config="dashboardData" ng-if="dashboardData"></highchart> to prevent loading the highcharts element before data is available.

florisb on Dec 14, 2015

Hello everybody, I’m using the reflow fix but this causes the initial series’ animation to be skipped or stopped, how can I have it working after reflowing?

mendaomn on Sep 14, 2015

Not a complete fix but… http://plnkr.co/edit/PwkHRJtsMXlxG9UMXJol?p=preview

See: http://stackoverflow.com/questions/17301572/angularjs-evalasync-vs-timeout and http://stackoverflow.com/questions/17225106/anyway-to-trigger-a-method-when-angular-is-done-adding-scope-updates-to-the-dom/17239084#17239084

So maybe we need a callback from the directive to execute after the DOM changes are made?

Pull requests accepted!

pablojim on Apr 22, 2015

@mendaomn : Even I am facing the same issue. Initially when I use reflow the chart does not animate. For all the subsequent times I can see the animation.

Did you get any solution for this ?

SushantKadam008 on Apr 17, 2016

This did the trick for me instead of using $timeout. I guess it all depends on when you display and render your data

 func: function (chart) {
     $scope.$evalAsync(function () {
            chart.reflow();
       });
  }

bumblebeen on Feb 18, 2016

Should we open a new issue for the above question about how to get the initial animation back? I’d like to know the answer too.

sadlerw on Oct 5, 2015