Search code examples
javascriptamchartsamcharts4

amCharts4: Collapsed charts becoming blank after related interactivity

I have six charts in a page, three gauges and three XY charts. The 3 gauge charts are always visible, while the XY charts are collapsed by default.

On page load, all the charts are correctly drawn, whether they are collapsed or not. But if I refresh all charts, for instance after changing a datepicker value, all the collapsed charts become white.

How can I avoid this? Is there a command to invalidate chart size, or just redraw it when div is resized?

EDIT:

I was able to reproduce a similar behaviour with tabs: on page load all the tabs are correctly shown, but if I click a refresh button to redraw charts, the tabs not currently visible become blank.

You can check here: https://jsfiddle.net/giulia_pinnisi/cqoz5vbg/13/

draw_chart("chart1", data1);
draw_chart("chart2", data2);
draw_chart("chart3", data3);

$('#refresh_button').click(function() {
  draw_chart("chart1", data1);
  draw_chart("chart2", data2);
  draw_chart("chart3", data3);
});

Thank you very much

Giulia

Solution

  • You need to dispose the chart if you want to re-instantiate it.

    chart.dispose();

    Check the updated example: https://jsfiddle.net/hosfrcd8/