JSFiddle - React, Tailwind, and code Playground

Balance History chart

by Sushil Mahajan

HTML

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


<div id="container" style="height: 400px"></div>
<button id="b1">
  try it now
</button>

JavaScript

$(function () {
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {

        // Create the chart
        $('#container').highcharts('StockChart', {

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'AAPL Stock Price'
            },

            series: [{
                name: 'AAPL Stock Price',
                data: data,
                type: 'spline',
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });
  $("#b1").click(function () {
    var chart =   $('#container').highcharts();
      var ex = chart.yAxis[0].getExtremes();
									        var minValue = ex.dataMin;
									        var maxValue = ex.dataMax;
									        var yAxisLabels = [minValue, maxValue];
									        
									        var totalValue = maxValue - minValue;
									        var tweentyFifePercentVal= minValue + (25* totalValue /100); 
									        var fiftyPercentVal= minValue+(50* totalValue /100); 
									        var seventyFifePercentVal= minValue+(75* totalValue /100);
									        
									        chart.yAxis[0].update({
									            max: maxValue,
									          	min: minValue,
									          	tickPositioner: function() {
									                    return [minValue, tweentyFifePercentVal,
									                            fiftyPercentVal,
									                            seventyFifePercentVal,
									                            maxValue];
									            }
									        });
  });
});