uplot sample fixed
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://leeoniya.github.io/uPlot/dist/uPlot.min.css">
<style>
.table {display: flex; flex-direction: row;}
.table > div {margin-right: 20px}
</style>
</head>
<body>
<script src="https://leeoniya.github.io/uPlot/dist/uPlot.iife.js"></script>
<div class="table">
<div>
<div>Y Scale's: data min=<span id="ydmin"></span> / visual min=<span id="ysmin"></span></div>
<div>Y Scale's: data max=<span id="ydmax"></span> / visual max=<span id="ysmax"></span></div>
</div>
<div>
<div>R Scale's: data min=5 / visual min=<span id="rsmin"></span></div>
<div>R Scale's: data max=22 / visual max=<span id="rsmax"></span></div>
</div>
</div>
<div id="chart"></div>
</body>
</html>
JavaScript
const data = [
[1, 2, 3],
[10, 20, 30],
[20, 5, 22],
];
const series = [
{},
{stroke: 'rgb(256, 0, 0)', scale: 'y'},
{stroke: 'rgb(0, 0, 256)', scale: 'r'},
];
series.forEach((s, i) => {
if (i > 0) {
s.sum = data[i].reduce((a, b) => a + b, 0);
s.avg = s.sum / data[i].length;
}
});
window.u = new uPlot({
width: 600,
height: 400,
scales: {
y: {
range: (_, min, max) => {
window.ydmin.innerText = min;
window.ydmax.innerText = max;
return [0, 100];
}
},
r: {},
},
axes: [{}, {}, {scale: 'r', side: 1, stoke: 'red'}],
hooks: {
ready: [(i) => {
window.ysmin.innerText = i.scales.y.min;
window.ysmax.innerText = i.scales.y.max;
window.rsmin.innerText = i.scales.r.min;
window.rsmax.innerText = i.scales.r.max;
}]
},
plugins: [{
hooks: {
init: (_, opts, data) => {
/** This is not working */
data.forEach((d, i) => {
if (i > 0) {
opts.series[i].sum = d.reduce((a, b) => a + b, 0)
opts.series[i].avg = opts.series[i].sum / d.length;
}
})
}
}
}],
series,
}, data, window.chart)