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"></div>
JavaScript
jQuery(function() {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 50],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
}
},
title: {
text: 'USD to EUR exchange rate'
},
xAxis: {
maxZoom: 14 * 24 * 3600000 // fourteen days
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: usdeur,
type: 'area',
fillColor: {
linearGradient: [0, 0, 0, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 255, 200)']
]
}
}]
});
});