Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container" style="height: 400px"></div>
<div class="col-md-6">
  <div class="form-group">
    <label for="category-select"><b>choose data :</b></label>
    <select class="form-control" id="dataSelect">
      <option value="0">Data 1</option>
      <option value="1">Data 2</option>
      <option value="2">Data 3</option>
    </select>
  </div>
</div>

JavaScript

const chart = Highcharts.chart('container', {
  series: [{
    data: [2, 5, 6, 2]
  }]
});

const data = [
  [2, 5, 6, 2],
  [7, 1, 6, 1],
  [5, 2, 1, 1]
]

document.getElementById('dataSelect').addEventListener('change', () => {
  const selectorValue = document.getElementById('dataSelect').value

  chart.series[0].setData(data[selectorValue])
});