JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
<div id="container" style="height: 500px"></div>
<div id="csv-data" style="display:...
JavaScript
$(function() {
//$.get('/samples/stock/demo/flags-shapes/data.csv', function(csv, state, xhr) {
function load(csv, state, xhr) {
// inconsistency
if (typeof csv != 'string') {
csv = xhr.responseText;
}
// parse the CSV data
var data = [], header, comment = /^#/, x;
$.each(csv.split('\n'), function(i, line){
if (!comment.test(line)) {
if (!header) {
header = line;
}
else {
var point = line.split(';'),
date = point[0].split('-');
x = Date.UTC(date[2], date[1] - 1, date[0]);
if (point.length > 1) {
data.push([
x, // time
parseFloat(point[4]) // close
]);
}
}
}
});
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
title: {
text: null
}
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
tooltip: {
style: {
width: 200
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries'
...