Sometimes the chart doesn't fit the parent element's size

[denislins]

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?

[denislins]

I managed to fix this by broadcasting the reflow event. But despite this fact, I think this could be handled automatically by the library. Triggering an event this way seemed a little hacky to me. What do you think?

[iven]

Same as #211?

[kristjanulst]

I tried this #211 but it didnt work.

[manfredk]

I've got the same problem with charts within a bootstrap container initially sized to full window width.

Initially:

After window resizing:

Broadcasting the reflow event as suggested in #211 didn't work, either.

When the chart is rendered initially, the .highcharts-container element shows the full width. After resizing it properly adjusts to the container div's width. I guess it would solve the problem if I explicitly set the width of the parent div (I've read recently about a general issue with propagating computed widths to injected child elements, but can't remember where), but I'm placing charts dynamically in variable width container widgets. So it seems that the container's computed width is not yet set when the chart is rendered or it's not transferred correctly.

@pablojim Barry, any idea how to solve this in a sustainable way?

[pablojim]

Could you make a fiddle?

[manfredk]

Sure, i'll notify you when ready

Am 21.04.2015 um 12:27 schrieb Barry Fitzgerald [email protected]:

Could you make a fiddle?

—
Reply to this email directly or view it on GitHub.

[manfredk]

@pablojim Plunkr demonstrating the issue is ready under http://plnkr.co/edit/OJWhXyUIeyNnYD0qdq0A

[pablojim]

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!

[manfredk]

Great, that worked. Actually, I tried that before, but didn't realize that I would have to inject the dependency for $timeout (didn't look twice and thought it's a plain Javascript timeout).

Thx a lot for your prompt reply and the fix.

[pablojim]

No problem. Could you add an entry to the faq in the main readme?

[manfredk]

Done

[kristjanulst]

I'm using $ionicSideMenuDelegate (Ionic framework) and by resizing the window, the chart width is not correct. I made a codepen: http://codepen.io/anon/pen/OVPRrx

How to fix that?

[SushantKadam008]

HI,
I had a smiliar issue but providing bootstrap class to higchart tag solved the issue.

[mendaomn]

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?

[sadlerw]

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.

[romain10009]

i'm using ng-if, and when the ng-if goes true to show the chart, it gets displayed with a wrong size, i need to resize window to make it behave as intended. It would be nice to have that handled somehow...

[florisb]

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.

[bumblebeen]

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

[SushantKadam008]

@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 ?

[gururajmca]

As florisb mentioned the solution worked me... thanks guys..

[dilani-maheswaran]

Is there any option I can use to stop the chart from redrawing when I update the chart? In my case, I want to dynamically update the title of chart when exporting. The whole chart gets redrawn every time i change the chart title.

[pablojim]

see #550