JSFiddle - React, Tailwind, and code Playground

by shashi3337

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!-- <script src="http://github.highcharts.com/bugfix/highcharts.js"></script> -->
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div id="container"></div>
<button id="modify">
Modify Data
</button>

<button id="add">
Add Data
</button>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

function test(n) {
  var data = [];
  for (var i = 0; i < n; i++) {
    var value = Math.random() * 10;
    var x = {
      id: i,
      name: 'test ' + i,
      y: value
    }
    data.push(x);
  }
  return data;
}

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    },
  },
  xAxis: {
    type: 'category',
    min:0,
    max:5
  },
  scrollbar: {
    enabled: true
  },
  series: [{
      name: "A",
      data: test(20)
    }, {
      name: "B",
      data: test(20)
    },
    {
      name: "C",
      data: test(20)
    },
    {
      name: "D",
      data: test(20)
    }
  ]
});


$(document).ready(function(){
  $('#modify').click(function(){
   if(chart){
    while (chart.series.length > 0)
         chart.series[0].remove(true);
   
    chart.update({
      xAxis: {
        min:0,
        max:0
        }
     });
   
     chart.addSeries({
     name: 'new',
     	data: test(1)
     });
    }
  });
  
  $('#add').click(function(){
   if(chart){
    while (chart.series.length > 0)
         chart.series[0].remove(true);
   
    chart.update({
      xAxis: {
        min:0,
        max:5
        }
     });
   
     chart.addSeries({
     name: 'A',
     	data: test(20)
     });
    }
  });
});