JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>
<div id="container" style="height: 300px"></div>
<div id="csv">2011-11-01,196.00
2011-11-02,197.00
2011-11-03,193.00
2011-11-04,198.00
2011-11-05,197.00
2011-11-06,193.00
2011-11-07,195.00</div>
CSS
#csv {
display: none
}
JavaScript
var options = {
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 5,
buttons: [{
type: 'month',
count: 1,
text: '1m'},
{
type: 'month',
count: 3,
text: '3m'},
{
type: 'month',
count: 6,
text: '6m'},
{
type: 'ytd',
text: 'YTD'},
{
type: 'year',
count: 1,
text: '1y'},
{
type: 'all',
text: 'All'}]
},
title: {
text: 'Lake Maggiore level'
},
xAxis: {
type: 'datetime',
tickWidth: 1
/*,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}*/
},
yAxis: {
title: {
text: 'meters'
},
plotLines: [{
value: 196.0,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Piena straordinaria',
align: 'right',
x: -10
}},
{
value: 195.0,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Piena ordinaria',
align: 'right',
x: -10
}}],
min: 193.5,
max: 197.0
},
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#CCC'
},
series: []
};
(function(data) {
//alert("data in the file: " + data);
var series = {
name: 'Lake level (m)',
id: 'lake_level',
type: 'line',
/*marker:...