Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<button id='btn1'> Show/hide chart 1</button>
<div id="container1"></div>
<button id='btn2'> Show/hide chart 2</button>
<div id="container2"></div>
<button id='btn3'> Show/hide chart 3</button>
<div id="container3"></div>

JavaScript

[document.getElementById('btn1'), document.getElementById('btn2'), document.getElementById('btn3')].forEach((btn, i) => {
  let chartContainer = document.getElementById('container' + (i + 1))
  btn.addEventListener('click', function() {
    console.log(chartContainer.style.display)
    if (chartContainer.style.display === 'none') {
      chartContainer.style.display = 'block'
    } else {
      chartContainer.style.display = 'none'
    }
  })
})


Highcharts.chart('container1', {

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

Highcharts.chart('container2', {

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175].reverse()
  }]
});

Highcharts.chart('container3', {

  series: [{
    data: [43934, 52503, 57177, 69658]
  }]
});