JSFiddle - React, Tailwind, and code Playground

by Sibeesh Venu

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id='b'>Increase</button>

JavaScript

$(function() {
  var chart;
  var d = 1;
  var index = 0;

  function getYValue(chartObj, seriesIndex, xValue) {
    var yValue = null;
    var points = chartObj.series[seriesIndex].points;
    for (var i = 0; i < points.length; i++) {
    	if(i == points.length - 1 && points[i].x != xValue){	
      	return 0;
      }
      yValue = points[i].y;
    }
    return yValue;
  }
  $('#b').click(function() {
 		//var newValue = series[0].data[0];
  	//chart.series[0].points[0].update(100);
    chart.series[0].addPoint(0, false, false, false);
    chart.redraw(false);
    chart.series[0].points[chart.series[0].points.length - 1].update(1);
  	/*
  	console.log(index);
    var d = getYValue(chart, index, 20.5);
    console.log(d);
    d++;
    console.log(d);
    chart.addSeries({
      grouping: false,
      data: [
        [20.5, d]
      ]
    });
    index ++;
    */
  })
  chart = new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'container'
    },
    title: {
      text: ''
    },
    xAxis: {
      min: 0,
      //max: 10
    },
    credits: {
      enabled: false
    },
    series: [{
      name: '',
      data: [5, 3, 4, 7, 2]
    }]
  });
});