highcharter: chart.hide is not a function

I'm trying to replace the chart rendered with another chart using highcharts, using highcharter in R:

test_code <- JS("
function toggleSeries_test() {
  var chart1 = Highcharts.charts[0]; 
  var chart2 = Highcharts.charts[1]; 
  if (chart1.visible) {
    chart1.hide();
    chart2.show();
  } else {
    chart2.hide();
    chart1.show();
    }
  }

document.getElementById('toggleButton_test').addEventListener('click', toggleSeries_test);
")

But I'm getting an error: chart2.hide is not a function

Can't figure out whether this is a syntax error or something else?

No, there are no hide or show functions, nor is the visible property ever defined, unless you define it yourself. If ever interested, here's the full documetation for the Chart instances, with all properties and methods.

The usual way charts are hidden (not to be disposed of) is by using CSS. Here's a very basic set of functions to show, hide and enquire visibility:

function toggleSeries_test() {
  var chart1 = Highcharts.charts[0]; 
  var chart2 = Highcharts.charts[1]; 
  if (isChartVisible(chart1)) {
    hideChart(chart1);
    showChart(chart2);
  } else {
    hideChart(chart2);
    showChart(chart1);
    }
  }

  function isChartVisible(chart){
     return chart.container.style.display !== 'none';
  }

  function showChart(chart){
     return chart.container.style.display = '';
  }

  function hideChart(chart){
     return chart.container.style.display = 'none';
  }

Of course, all this goes inside inside the JS call, with the event listener.

This is untested because there isn't the full code here; there are also other possibilities but my doubts are mainly related by the way you manage to hide the second chart initially. Please let me know.