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="chartContainer" style="min-width: 310px; height: 400px; margin: 0"></div>
JavaScript
$(function () {
$('#chartContainer').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'spline',
marginTop:50,
spacingBottom: 5,
marginBottom: 100,
zoomType: 'xy',
},
credits: {
enabled: false
},
title: {
text: 'Product health',
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
min: 0,
max:110,
tickInterval:10,
title: {
text: 'Passrate'
},
},
legend: {
title: {
text: '<span style="font-size: 9px; color: #666; font-weight: normal">To toggle between different branches click on the branch names in the legend</span>',
style: {
fontStyle: 'italic'
}
},
layout: 'horizontal',
},
tooltip: {
formatter: function() {
return 'Branch: <b>'+ this.series.name +
'</b><br/>Date: '+ Highcharts.dateFormat('%e %b',this.x)+
'</b><br/>Pass rate: '+ this.y +'%';
}
},
plotOptions: {
spline: {
dataLabels: {
enabled: 'True',
crop: false,
overflow: 'none'
...