issue in canvasjs chart on page load?

Question

My canvasjs chart floats right then on inspection gets back to its original position. What might be the issue?

I have 2 dynamic canvasjs charts in my site inside to tab-body. The 1st chart is displaying fine but when I click on the 2nd tab the chart inside it floats left and then after inspection gets to its original position. All of the data is fine just want to know the js or css issue.

i did the php like this data are all fine and are working good.

<div class="charcon_n" id="chartContainer_n<?php echo $i; ?>" style="height: 350px; width: 100%;" data-point='<?php echo json_encode($data_n, JSON_NUMERIC_CHECK); ?>'></div>

Answer 1

Whenever a tab is switched, the render method of each of the chart in the activated tab should be called so that chart can take the actual dimensions of its container.

$("#tabs").tabs({
create: function (event, ui) {
    //Render Charts after tabs have been created.
    $("#chartContainer1").CanvasJSChart(options1);
    $("#chartContainer2").CanvasJSChart(options2);
},
activate: function (event, ui) {
    //Updates the chart to its container size if it has changed.
    ui.newPanel.children().first().CanvasJSChart().render();
}
});

Please take a look at jQuery gallery example.