The chart does not appear in a tab.

Hey I’ve seen similar issues to this before with Highcharts.

Essentially the chart library, in your case, Chart.js isn’t rendering the chart because it’s invisible on initial page load.

Sometimes the solution is to force Chart.js to render the chart. Since the chart object is there in the page still you can do that by calling the object like this ins one Javascript:

m_chart_chartjs_21108_1.chart.render();

But in your case the charts are rendered but because they were invisible Chart.js seems to be giving each chart a height of 0.

That actually makes the fix pretty simple.

Just have some javascript that runs whenever the tabs are clicked that finds the canvas objects and gives them the height you actually want.

In jQuery that would look something like this:

jQuery( 'canvas.m-chart' ).css( 'height', '400px' );

If you go to that tab and open your browser console paste that line of code in and hit return you’ll see both charts pop up like you expect them to look.

Thank you for this quick response !
How do I add this code to my site? Sorry I’m noob ..

Ok, i found !

So you got it taken care of? Sorry just had a moment to look at this again a moment ago.

But you’ve got a few solutions, jQuery can watch for you to click on the tab and then run that code for you. Or it might work if you just put it in the footer between two script tags which is potentially worth a try though a bit cludgy of a solution.