JSFiddle - React, Tailwind, and code Playground
by dronpes
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script>
$(function() {
var d = new Date();
var timezone = d.getTimezoneOffset();
var timezoneOffset = timezone * -60 * 1000;
$('#regimentKIAs').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Troops Remaining per Regiment'
},
subtitle: {
text: 'Visualization of each regiment in the No Fap War IV\'s momentum over time'
},
xAxis: {
min: (1429488000000 + timezoneOffset), // 1399014359000+timezoneOffset),
// min: (1405641600000 + timezoneOffset), // 1399014359000+timezoneOffset),
// max: (1406199600000 + timezoneOffset), //1409295959000 //1402531200000+timezoneOffset),
// max: (1402531200000+timezoneOffset),
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
// min: 0,
// max: 100,
title: {
text: 'Soldiers'
},
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0, '', ',');
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e. %b', this.x) + ': ' + Highcharts.numberFormat(this.y, 0, '', ',') + ' soldiers';
}
},
series: [{
name: 'Navy',
// Define the data...