JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="container_good" style="width:500px;height: 300px"></div>
<div id="container_bad" style="width:500px;height: 400px"></div>
JavaScript
var chartValues = [-5,-4,-3,0,2,4,5];
var chart = new Highcharts.Chart({
chart: {
//SET THIS TO 'container_good' || 'container_bad'
renderTo: 'container_bad',
type: 'area',
spacingLeft: 1
},
credits:{
enabled:false
},
title:null,
legend:{
enabled:false
},
xAxis: {
spacingLeft:1,
offset:10,
gridLineWidth: 0,
lineWidth:0,
type: "datetime",
tickMarkPlacement:"on",
labels:{
enabled:false
}
},
yAxis: {
allowDecimals:false,
endOnTick : true,
title:null,
min: -5,
lineWidth:0,
gridLineWidth:0,
max: 5,
labels:{
enabled:false
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
},
plotOptions: {
series: {
connectNulls: true,
fillColor: {
linearGradient:
[0,132,0,133],
stops: [
[0, '#A4B118'],
[1, '#4A5C68'],
]
},
lineWidth:0
}
},
series: [{
data:chartValues,
color: "#000",
marker : {
enabled: false
}
}]
});