JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://leeoniya.github.io/uPlot/src/uPlot.css">
<script src="https://leeoniya.github.io/uPlot/dist/uPlot.iife.min.js"></script>
CSS
.chart {
margin-top: 30px;
}
JavaScript
const data = [
[1566453600, 1566457260, 1566460860, 1566464460], // Unix timestamps
[0.54, 0.15, 3.27, 7.51 ], // CPU
[12.85, 13.21, 13.65, 14.01 ], // RAM
[0.52, 1.25, 0.75, 3.62 ], // TCP Out
];
const opts = {
width: 800,
height: 400,
cursor: true,
series: {
x: {
data: data[0],
},
y: [
{
label: "CPU",
data: data[1],
scale: "%",
value: v => v.toFixed(1) + "%",
color: "red",
width: 2,
dash: [10, 5],
},
{
label: "RAM",
data: data[2],
scale: "%",
value: v => v.toFixed(1) + "%",
color: "blue",
},
{
label: "TCP Out",
data: data[3],
scale: "mb",
value: v => v.toFixed(2) + "MB",
color: "green",
}
],
},
axes: {
y: [
{
scale: '%',
values: (vals, space) => vals.map(v => +v.toFixed(1) + "%"),
},
{
side: 3,
scale: 'mb',
values: (vals, space) => vals.map(v => +v.toFixed(2) + "MB"),
grid: null,
},
],
},
};
let uplot = new uPlot(opts);
document.body.appendChild(uplot.root);