JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

var seriesOptions = [{
    data: usdeur
}];

function createChart() {
console.log(seriesOptions);
//alert('cretae chart ' + seriesCounter + " " + names.length);
yAxisOptions = [];
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},

rangeSelector: {

buttons: [{
count: 1,
type: 'day',
text: '1d'
}, {
count: 5,
type: 'day',
text: '5d'
}, {
count: 1,
type: 'month',
text: '1m'
}, {
count: 6,
type: 'month',
text: '6m'
}, {
count: 1,
type: 'year',
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3


},

yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},

plotOptions: {
series: {
compare: 'percent'
}
},

tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
yDecimals: 2
},

series: seriesOptions.slice()
});
}

createChart();