JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<div id="result"></div>
CSS
#result {
text-align: center;
color: #5C6366;
min-height: 2em;
}
th {
font-weight: bold;
text-align: left;
}
td,
th {
padding: 5px;
border-bottom: 1px solid silver;
height: 25px;
}
thead th {
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}
JavaScript
$(function() {
Highcharts.SparkLine = function(elem, options, callback) {
var defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner: function(w, h, point) {
return {
x: point.plotX - w / 2,
y: point.plotY - h
};
...