JSFiddle - React, Tailwind, and code Playground

by Nabaraj Saha

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; min-width: 310px"></div>
<button id="button" class="autocompare">Get Y axis extremes</button>

JavaScript

$(function() {

  var chart;
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
    // Create the chart
    chart = Highcharts.stockChart('container', {


      rangeSelector: {
        selected: 1
      },

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

      series: [{
        name: 'AAPL',
        data: data,
        tooltip: {
          valueDecimals: 2
        }
      }]
    });
  });

  $('#button').click(function() {
    var extremes = chart.xAxis[0].getExtremes();

    chart.renderer.label(
        'dataMax: ' + extremes.dataMax + '<br/>' +
        'dataMin: ' + extremes.dataMin + '<br/>' +
        'max: ' + extremes.max + '<br/>' +
        'min: ' + extremes.min + '<br/>',
        100,
        100
      )
      .attr({
        fill: '#FCFFC5',
        zIndex: 8
      })
      .add();

    $(this).attr('disabled', true);
  });
});