JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="line" style="height: 500px; min-width: 600px"></div>
JavaScript
function powerLevelLineChart() {
$('.power-level-chart').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Fiber Power Level Chart by ' + $.trim('days')
},
xAxis: {
categories: powerXAxisDate,
title: {
text: powerXAxisTitle,
style: {
color: '#525151',
font: '18px Helvetica',
fontWeight: 'bold'
}
},
labels: {
rotation: -90,
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
}
},
yAxis: {
title: {
text: 'Power Level(dBm)',
style: {
color: '#525151',
font: '18px Helvetica',
fontWeight: 'bold'
}
},
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}, formatter: function() {
return this.value + ' dBm';
}
}
},
tooltip: {
borderRadius: 2,
borderWidth: 1,
borderColor: '#999',
shadow: false,
shared: true,
useHTML: true,
formatter: function() {
var points = '<table class="tip"><caption>' + this.x + '</caption><tbody>';
//loop each point in this.points
var name;
$.each(this.points, function(i, point) {
if (point.y === highest)
{
name = 'HIGHEST';
points += '<tr><th style="color: ' + point.series.color + '">' + name + ': </th>'
...