Chart rendering problem inside bootstrap modal having multiple nav-tabs

[ayush.sa01]

I have a bootstrap modal with multiple nav-tabs each containing a chart.
I have set one of the tab to active.
So whenever the modal pop ups, the active tab containing the chart renders properly but when switched to other tabs containing chart does not render (width problem).

• This topic was modified 5 years, 8 months ago by ayush.sa01.

[Priyanka M S]

@ayush-sa01,

CanvasJS Chart automatically sets the height and width of the chart according to the container’s dimension. If the values are not set for the container, it takes the default values.

In bootstrap, since the second tab is not displayed initially, chart takes the default values. To solve this issue, the second chart is rendered when the shown.bs.tab event is fired by bootstrap. Please take a look at this jsfiddle.

If this doesn’t solve your issue, please share a jsfiddle reproducing the issue you are facing.

__
Priyanka M S
Team CanvasJS