uplot sample fixed
by Dat
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>uplot demo</title>
<link rel="stylesheet" href="https://leeoniya.github.io/uPlot/dist/uPlot.min.css">
<style>
#index-2-view,#main-chart{border: solid 1px black}
#index-2-view{height:200px} /* height was zero */
</style>
</head>
<body>
<script src="https://leeoniya.github.io/uPlot/dist/uPlot.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<div id="index-2-view">
<div id="main-chart"></div>
</div>
<script>
</script>
</body>
</html>
JavaScript
let opts = {
class: "uPlot",
width: 500,
height: 250,
scales: { x: { time: true }, y: {
min: 100, max: 200
} },
axes: [
{
grid: {
width: 0.5,
stroke: "rgba(2, 128, 0, 0.5)",
},
},
],
padding: [20, 10, 20, 10],
series: [
{},
{
stroke: 'red', width: 6,
},
{
stroke: 'blue', width: 6,
},
{
stroke: 'green', width: 6,
},
],
};
var data = [
[ 1, 2, 3],
[100,100,100],
[200,200,200],
[150,150,150],
];
//this.chart = new uPlot(opts, null, document.getElementById('main-chart'))
var chart = new uPlot(
opts,
data,
document.getElementById("main-chart")
);