JSFiddle - React, Tailwind, and code Playground

by ChrisCross82

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <button onclick="firstData()">First Data</button>
  <button onclick="newData()">New Data</button>

  <div id="chart1" style="height: 300px"></div>
  <div id="chart2" style="height: 300px"></div>
</body>

JavaScript

var chart1;
var chart2;

chart1 = Highcharts.chart('chart1', {
  series: [{
    data: [],
  }, {
    data: [],
  }]
});

chart2 = Highcharts.chart('chart2', {
  series: [{
    data: [],
  }, {
    data: [],
  }]
});

function firstData() {
  var series1 = [3, 3, 3, 3, 3];
  var series2 = [4, 4, 1, 2, 0];
  updateChart(series1, series2);
}

function newData() {
  var series1 = [4, 4, 4, 4, 4];
  var series2 = [2, 1, 1, 1, 0];
  updateChart(series1, series2);
}

function updateChart(series1, series2){
  chart1.update({
    series: [{
      data: series1
    }, {
      data: series2
    }]
  });

  chart2.update({
    series: [{
      data: series1
    }, {
      data: series2
    }]
  });
  console.log(series1, series2);
}