Display issue with tabs

[laurent petit]

Hello,
I have set up tabbed navigation to analyse a few server performance metrics. Each tab displays a graph for a specific metric. I am encountering a display issue with the CanvasJS library.
The graph in the default tab appears correctly with the correct size (width 100%, height 280px) as programmed in the HTML code.
When I select a tab, the new graph replaces the previous one and displays it with a wrong size : width of 500px and height of 400px ? That’s not what I coded ?
When I span over an area of the graph, it is then displayed with a width of 100% and a height of 280px with the area zoomed in. If I refresh the graph, I get the correct size of width 100% and height 280px as programmed.

I don’t understand how it works.

Thank you for your help and happy new year…
Laurent

[Ananya]

Laurent,

CanvasJS Chart automatically sets the height and width of the chart according to container’s dimensions. If the values are not set for the container, it takes the default values. If you are using Bootstrap tabs, the issue may be that since the second tab is not displayed initially, the chart takes the default values. To solve this issue, second chart should be re-rendered when the shown.bs.tab event is fired by bootstrap.

You can also refer to this article to read up more about how to fix the issue.

—
Ananya Deka
Team CanvasJS

[laurent petit]

Hello Ananya,
Thank you for your quick response.
I don’t use Bootstrap to manage tabs, only the html, js and css features.
It’s just to set up a proof of concept lab.
I have read the documentations but i don’t see how to set the size of the charts in my code.
Is it possible to share the code in JSFiddle?

Thank’s in advance.

Laurent

[Ananya]

Laurent,

Please take a look at this JSFiddle for a sample implementation of your use case. The chart is re-rendered every time a tab is clicked, such that the chart dimensions are adjusted accordingly.

If your issue still persists, can you please share a JSFiddle reproducing your issue, so that we can understand the scenario better, and help you out?

—
Ananya Deka
Team CanvasJS

[laurent petit]

Hello Ananya,

Thanks to your advice, I have solved my display problem in the tabs.
Everything is working perfectly.
Thank you for your efficiency and speed.

Best regards

Laurent