JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>How to add min and max thresholds in Highcharts</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Sales By Month',
},
subtitle: {
text: 'Metrics',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Revenue'
},
plotLines: [
{	id: 'limit-min',color: '#FF0000',dashStyle: 'ShortDash',width: 2,value: 22000,zIndex: 0,
	label : {text : 'Last Year\'s Minimum Revenue'}
}, 
{id: 'limit-max',color: '#008000',dashStyle: 'ShortDash',width: 2,value: 32000,zIndex: 0,
	label : {text : 'Last Year\'s Maximum Revenue'}
}
]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': $'+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Revenue',
data: [21000, 24000, 27500, 33000, 29000, 26000, 19000, 21000, 25000, 29000, 23000, 18000]
}]
});
});
 
});
</script>
</head>
<body>
 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
 
</body>
</html>