JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock-exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
CSS
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<style type="text/css">
JavaScript
//$('#container').modal();
var chart1 = new Highcharts.StockChart({
chart: {
renderTo: 'container',
backgroundColor: '#fff',
borderColor: 'transparent',
borderWidth: 0
},
title: {
text: 'Title'
},
xAxis: {
maxZoom: 30 * 24 * 3600000 // fourteen days
},
yAxis: {
title: {
text: 'Rates'
}
},
rangeSelector: {
inputDateFormat: '%y-%m-%e'
},
series: [{
name: 'Rate',
data: usdeur}]
},
function(chart) {
setTimeout(function() {
$('input', $('#' + chart.options.chart.renderTo)).datepicker();
}, 0);
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
this.onchange();
this.onblur();
}
});