JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px"></div>
JavaScript
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function(data) {
Highcharts.setOptions({
colors: ['#00BFFF']
});
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1,
buttons: [{
type: 'month',
count: 1,
text: '1 mois'
}, {
type: 'month',
count: 3,
text: '3 mois'
}, {
type: 'month',
count: 6,
text: '6 mois'
}, {
type: 'ytd',
text: 'Ann\351e s\351l.'
}, {
type: 'year',
count: 1,
text: '1 an'
}, {
type: 'all',
text: 'Tout'
}],
buttonTheme: {
fill: '#87CEFA',
stroke: 'none',
width: 75,
style: {
color: '#039'
},
states: {
hover: {
fill: '#00BFFF'
},
select: {
style: {
color: 'white'
}
}
}
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
inputStyle: {
color: 'white'
},
inputDateFormat: '%d %b. %Y',
inputEditDateFormat: '%d-%m-%Y'
},
title: {
text: 'Fr\351quentation portail reporting',
style: {
color: 'white'
}
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'ouvert',
data: data
}]
});
});
});
/*
Highcharts.theme = {
colors: ['#DDDF0D'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 400],
stops: [
[0, '#606060'],
[1, '#101010']
]
},
borderWidth: 0,
borderRadius: 15,
plotBackgroundColor: null,
plotShadow: false,
plotBorderWidth: 0
},
xAxis: {
gridLineWidth: 0,
...