JSFiddle - React, Tailwind, and code Playground
by samur3
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: 200px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
exporting: { enabled: false },
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
},
},
yAxis: {
title: {
text: 'Risk'
},
min: 0
},
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5,
formatter: function () {
return ' <b> Pii Count: ' + this.point.piiCount + '</b>' +
'<br><b>Risk: '+ this.point.y + '</b></br>' +
'<br><b>Date: '+ this.point.date + '</b></br>';
}
},
plotOptions:
{
spline:
{
lineWidth:2,
dataLabels:
{
enabled: true,
formatter:function()
{
return this.y;
}
},
enableMouseTracking: true
}
},
series: [{
showInLegend: false,
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
lineWidth: 5,
color: '#ff872e',
data: [
{x:Date.UTC(2016, 9, 21),y: 45,piiCount:'10',date:'21/9/2016'},
{x:Date.UTC(2016, 9,...