JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://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: {
type: 'spline',
width: 450,
height: 450,
spacingTop: 40,
spacingBottom: 15,
spacingLeft: 15,
spacingRight: 15
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: null
},
xAxis: {
offset: 10,
minTickInterval: 1,
type: 'linear',
gridLineColor: '#ddd',
gridLineDashStyle: "Dot",
gridLineWidth: 1,
lineColor: '#ddd',
tickColor: '#fff',
tickPosition: 'inside',
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
offset: 10,
min: 3750,
tickInterval: 500,
gridLineColor: '#fff',
title: {
text: null
},
labels: {
format: '{value:,.0f} Kč'
}
},
plotOptions: {
spline: {
linecap: 'square',
dataLabels: {
enabled: false
},
states: {
hover: {
lineWidthPlus: 0,
enabled: true,
halo: false
}
},
marker: {
symbol: 'circle',
fillColor: '{point.color}',
radius: 6,
enabled: false,
states: {
hover: {
lineWidthPlus: 3
}
},
}
}
},
tooltip: {
enabled: true,
hideDelay: 0,
animation: false,
backgroundColor:...