JSFiddle - React, Tailwind, and code Playground
by jacobwsmith
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>JavaScript
$(function () {
$('#container').highcharts({
title: null,
xAxis: [{
categories: ['Jan', 'Feb'],
plotLines: [{
zIndex: 1,
width: 1,
color: '#000000'
}],
lineColor: '#000000',
lineWidth: 1,
tickColor: '#C0D0E0',
tickWidth: 1,
}],
yAxis: [{ // Primary yAxis
plotLines: [{
zIndex: 1,
width: 1,
color: '#000000'
}],
lineColor: '#000000',
lineWidth: 1,
tickColor: '#C0D0E0',
tickWidth: 1,
gridLineWidth: 1,
labels: {
formatter: function () {
return this.value + '°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Second',
style: {
color: '#89A54E'
}
},
opposite: true,
//endOnTick: false
}, { // Secondary yAxis
plotLines: [{
zIndex: 1,
width: 1,
color: '#000000'
}],
lineColor: '#000000',
lineWidth: 1,
tickColor: '#C0D0E0',
tickWidth: 1,
gridLineWidth: 1,
title: {
text: 'First',
style: {
color: '#4572A7'
}
},
//endOnTick: false,
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#4572A7'
}
},
}, { // Tertiary yAxis
plotLines: [{
zIndex: 1,
width: 1,
color: '#000000',
...