JSFiddle - React, Tailwind, and code Playground

Highcharts Demo from http://api.highcharts.com/highcharts/Axis.setExtremes

by Terry Young

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
Change Chart Type:
<select id="chartType">
  <option value="spline">Line</option>
  <option value="column">Bar</option>
  <option value="areaspline">Area</option>
</select>

<br><br>

<button id="button" class="autocompare">Click To Randomize</button>

JavaScript

Highcharts.setOptions({
	lang: {
		thousandsSep: ','
  }
});

var chart = Highcharts.chart('container', {
    chart: {
        plotBorderWidth: 1
    },

    yAxis: {
				labels: {
						format: '{value:,.0f}'
			  }
    },    

    series: []
});


function getRandomData () {
		var min = 6800;
    var max = 8200;
		return [
    	pickRandom(min, max),
    	pickRandom(min, max),
    	pickRandom(min, max),
    	pickRandom(min, max),
    	pickRandom(min, max),
    	pickRandom(min, max),
    	pickRandom(min, max),
    	pickRandom(min, max),
    	pickRandom(min, max),
    	pickRandom(min, max)
    ]
}

function pickRandom (min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

// the button action
$('#button').click(function () {

		// remove existing series
    while(chart.series.length > 0) {
				chart.series[0].remove(true);
    }
    
		var arrData = getRandomData();

		chart.addSeries({ data: arrData });
    
	  setChartExtremes(chart, arrData);
});

$(document).ready(function () {
		$('#button').trigger('click');
    $('#chartType').on('change', function () {
    		setChartType(chart);
    });
});


function setChartExtremes (chart, arrData) {
		var iMin = getMin(arrData);
    var iMax = getMax(arrData);

    var iMinY = roundDownHalf(iMin);
    var iMaxY = roundUpHalf(iMax);
    
    console.debug('setChartExtremes', 
    	'iMin', iMin, 'iMinY', iMinY, 
      'iMax', iMax, 'iMaxY', iMaxY);

		setChartType(chart); // refresh
    chart.yAxis[0].setExtremes(iMinY, iMaxY);
}

function setChartType (chart) {
		chart.series[0].update({ type: $('#chartType option:selected').val() });
}


function roundUpHalf(x) {
	// round up to half the nearest power of 10
	var y = roundUpPow(x);
    var z = roundDownPow(x);
    var half = y - ((y - z) / 2);
    
    var ret;
    
    if (x >= half) {
    		ret = y;
    } else {
    		ret = half;
    }

    console.debug('roundUpHalf', 
    	'Data', x, 
		'Min', z, 
	  ...