Resize Canvas when parent-div got resized

[Helge]

Hello,

the canvas does not automatically resizes, when its parent-div got resized.
I have seen in the source-code, that the canvas resizes when the window-size is changed.

Automatically checking if parent-div has changed seems to be quite complicated, but if you could put the listener function to public, this would be nice.
So we could trigger it by hand, and take the responsibility, if its called to often.

[Sunil Urs]

Helge,

Makes sense. I’ll consider implementing an API to explicitly call resize function in next version.

—
Sunil

[Helge]

this sounds great.

thank you

[Sunil Urs]

Helge,

In the latest version you can just call render method whenever its container’s size changes and the chart readjusts its size (only if required) and also redraws the chart to fit the new size. You can also explicitly set width and height (in pixels) of chart in chart options and call render method to update its size.

—
Sunil Urs

[Helge]

Thats great, thank you!

[vulturistic]

hi,
I have the same problem as yours, I fixed it by using the following code:

var chart = new CanvasJS.Chart(“chartContainer”,
{
height: 550, //in pixels
width: 600,
title:{
text: “Earthquakes – per month”
},

I have set the height and width inside the property of chart. I have encountered the same bug when I first set the height and width in my <div>. Hope this will help.

[Oyehr]

Hi,
I have met this, too. But the canvas still does not automatically resizes, when its parent-div got resized. If I am using the wrong version…

[Priyanka M S]

@Oyehr,

Charts occupy the width of the container by default and readjust it’s size on resizing the container. Setting width property of the chart makes it unresponsive. To make the chart responsive, you need to set the width of the container instead of charts.

__
Priyanka M S
Team CanvasJS