JSFiddle - React, Tailwind, and code Playground
by mark47
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 500px"></div>
JavaScript
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
title: {
text: 'Activity and Fatigue Levels - Last Two Weeks'
},
subtitle: {
text: 'Based on your diary entries'
},
xAxis: [{
type: 'datetime',
gridLineWidth: 1,
labels: {
formatter: function() {
return Highcharts.dateFormat(' %b. %e', this.value);
},
step: 1,
align: 'center'
}
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'';
},
style: {
color: '#9ea58e'
}
},
title: {
text: 'Activity Duration (minutes)',
style: {
color: '#9ea58e',
backgroundColor: '#fff'
}
},
opposite: true,
min: 0,
max: 50
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Fatigue Level',
style: {
color: '#AA4643',
backgroundColor: '#fff'
}
},
labels: {
formatter: function() {
return this.value +'';
...