JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/stock/highstock.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 () {
var chart;
$(document).ready(function(container) {
container='container';
chart = new Highcharts.StockChart({
rangeSelector: {
buttons: [{
count: 1,
type: 'year',
text: '2Y'
}, {
count: 2,
type: 'year',
text: '4Y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 2
},
chart: {
renderTo: container,
type: 'column'
},
title: {
text: 'Hospitalizations per patient'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: ['2000', '2001', '2002', '2003', '2004', '2005', '2006',
'2007', '2008', '2009', '2010', '2011', '2012'],
minRange: 12* 30 * 24 * 3600 * 1000,
type: 'datetime',tickInterval :12* 30 * 24 * 3600 * 1000,startOnTick :true,
dateTimeLabelFormats: {
second: '%Y',
minute: '%Y',
hour: '%Y',
day: '%Y',
week: '%Y',
month: '%Y',
year: '%Y'
}
},
yAxis: {
min: 2,
max:5,
title: {
text: '# of Hospitalizations'
}
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
verticalAlign: 'bottom',
floating: false,
shadow: true
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
...