JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script>
<script src="http://code.highcharts.com/stock/1.3.7/highstock.js"></script>
<script src="http://code.highcharts.com/3.0.7/modules/exporting.js"></script>
CSS
</style>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.css" rel="stylesheet" />
<style type="text/css">
JavaScript
$(function () {
//$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Need sample data by the minute.
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector : {
selected : 1,
inputDateFormat : "%m/%d/%Y",
inputEditDateFormat : "%m/%d/%Y",
inputDateParser: function (s) {
return Date.UTC(
parseInt(s.substr(6, 4)),
parseInt(s.substr(0, 2) - 1),
parseInt(s.substr(3, 2)),
12
);
}
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2,
xDateFormat: '%A, %b %e, %l:%M %P'
}
//'%Y-%m-%d<br/>%H:%M'
//'%A, %b %e, %l:%M %P'
}]
}, function (chart) {
// apply the date pickers
setTimeout(function () {
var rangeSelector = $('#container input.highcharts-range-selector');
rangeSelector.datepicker({
autoclose: true,
todayHighlight: true
});
var inputMin = rangeSelector.filter('[name=min]');
var inputMax = rangeSelector.filter('[name=max]');
inputMin.datepicker().on("changeDate", function(event) {
...