JSFiddle - React, Tailwind, and code Playground
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: 200px; margin: 0 auto"></div>
JavaScript
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
animation: false
},
credits: {
enabled: false
},
title: {
text: 'Class Progress'
},
xAxis: {
categories: ['Basic Biology','AP Biology'],
label: {
formatter: function() {
return '' + this.series.name + Highcharts.dateFormat(' %b %e %l:%M %p', this.y);
}
}
},
yAxis: {
type: 'datetime',
title: {
text: 'Days at each stage'
},
min: Date.UTC(2012, 8, 24)
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true,
enabled: true
},
tooltip: {
formatter: function() {
console.log(this, this.point.stackY);
if (this.y != Date.UTC(2012, 9, 1)) {
return '' + this.series.name +': Days: '+ (this.y/1000/60/60/24) +'';
} else {
return '' + this.series.name + Highcharts.dateFormat(' %b %e', this.y);
}
}
},
plotOptions: {
series: {
stacking: 'normal',
events: {
legendItemClick: function(event) {
var visibility = this.visible ? 'visible' : 'hidden';
return false;
}
}
}
},
series: [{
name: 'Idle',
data: [Date.UTC(2012, 10, 16) -...