JSFiddle - React, Tailwind, and code Playground

by core972

HTML

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

<select id="mySelect">
    <option value="0">mon</option>
    <option value="1">tues</option>
    <option value="2">wed</option>
    <option value="3">thr</option>
</select>

<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

const chart = Highcharts.chart('container', {
    plotOptions: {
        series: {
            point: {
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
document.getElementById("mySelect").onchange = function() {myFunction()};
  function myFunction() {
    var x = document.getElementById("mySelect").value;
    if (x == 0){
      const series = chart.series[0];
      if (series.data.length) {
          chart.series[0].remove();
      }
      chart.addSeries({
          data: [100, 100, 100, 100, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
      });
    }else if (x == 1){
      const series = chart.series[0];
      if (series.data.length) {
          chart.series[0].remove();
      }
      chart.addSeries({   
          data: [200, 200, 200, 200, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
      });
    }else if (x == 2){
      const series = chart.series[0];
      if (series.data.length) {
          chart.series[0].remove();
      }
      chart.addSeries({
          data: [200, 200, 200, 200]
      });
    }
  }