JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div id="container"></div>
<button id="setSize">setSize</button>
JavaScript
$(function () {
var flag = true;
$('#container').highcharts({
chart: {
inverted: true,
animation: false,
alignTicks: false,
type: 'column',
events: {
redraw: function () {
var chart = this;
setTimeout(function () {
var yAxis = chart.get('mainAxis'),
customIndex = yAxis.options.customAxisIndex;
if (flag) {
chart.yAxis[customIndex].setExtremes(chart.yAxis[customIndex].min, chart.yAxis[customIndex].max, true, false);
flag = false;
}
}, 1);
}
}
},
yAxis: [{
tickInterval: 145,
title: {
text: 'Primary Axis'
}
}, {
tickInterval: 500,
gridLineWidth: 1,
opposite: true
}],
plotOptions: {
series: {
animation: false
}
},
series: [{
data: [20, 50, 75, 300, -120, -150],
yAxis: 0
}, {
data: [750, 250, 280, -500, -680],
yAxis: 1
}]
}, function (chart) {
var fyAxisZero = chart.yAxis[0].toPixels(0),
syAxisZero = chart.yAxis[1].toPixels(0),
index = 1,
index2 = 0;
if(chart.inverted) {
if (fyAxisZero > syAxisZero) {
index = 1;
index2 = 0;
chart.yAxis[index].customZeroValue = fyAxisZero;
} else {
index = 0;
index2 = 1;
chart.yAxis[index].customZeroValue = syAxisZero;
}
} else {
if (fyAxisZero < syAxisZero) {
index = 1;
index2 = 0;
...