JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: '#ffffff',
borderColor: '#a2a2a1',
borderWidth: 0,
borderRadius: 0,
type: 'area',
plotBackgroundColor: '#fffdf6'
},
colors: ['#3399FF','#ff00ff','#00ff00','#0000ff'],
legend: {
enabled: false
},
title: {
text: 'Graf'
},
tooltip: {
borderRadius: 0,
borderWidth: 0,
shadow: false,
style: {
fontSize: '7pt',
color: '#000000'
},
formatter: function() {
return this.value
}
},
xAxis: {
labels: {
rotation: -45,
x: 0,
y: 40,
style: {
color: '#333333'
}
},
lineWidth: 1,
lineColor: '#333333',
minPadding: 0,
maxPadding: 0,
title: {
text: ''
},
tickInterval: 2,
tickmarkPlacement: 'on'
},
yAxis: {
gridLineWidth: 0,
labels: {
formatter: function() {
return this.value},
style: {
color: '#333333'
}
},
lineWidth: 1,
lineColor: '#333333',
min: 0,
minPadding: 0,
maxPadding: 0,
title: {
text: ''
}
},
series: [{
name: 'Tokyo',
data: [7.0,...