Is there a way to toggle the visibility of panels without having to delete and recreate them each time? I haven't been able to find any examples online.
A big thank you to @Robbert for the helpful reply!
I found a way to hide a panel using this code:
$(".amcharts-stock-panel-div-stockPanel1").hide();
Unfortunately, this method does not adjust the size of each panel. So I tried something like this:
$(".amcharts-stock-panel-div-stockPanel1").hide();
chart.panels[1].percentHeight = 1;
chart.validateNow();
This successfully hides the panel and adjusts the height of each panel. However, I encountered an error when using validateNow() with percentHeight = 1;:
amcharts.js:26 Uncaught TypeError: Cannot read property 'translate' of undefined
at b.fixVLine (amcharts.js:26)
... (error continues) ...
After some trial and error, I came up with a final solution that doesn't rely on CSS. Instead, I used a variable called panelBack to store backup information about the panel:
//removing ...
pos = //panel position.
var panelBack = chart.panels[pos];
chart.removePanel(chart.panels[pos]);
chart.validateNow();
//adding...
chart.addPanelAt(panelBack,1);
chart.validateNow();