uChart
Lightweight, canvas‑based charting library written in TypeScript, designed for real‑time data streams and small bundle size.
Features
- 💡 Zero external rendering deps – plain
<canvas> - ⚡ Real‑time friendly – redraws only what’s needed
- 📦 ESM ready – authored as native ES modules
- 📝 TypeScript types included (
*.d.ts) - 🎛️ Configurable axes, ticks, colors & cursor read‑outs
Installation
npm install @meteolab/uchart
Quick strart
<!-- test.html (included in the repo) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>uChart Interactive Test</title>
<style>
#chartContainer{width:1000px;height:400px;margin:20px auto;background:#111}
body{background:#222}
</style>
</head>
<body>
<div id="chartContainer"></div>
<script type="module">
import { createChartElement } from './dist/uchart.js';
const container = document.getElementById('chartContainer');
const chart = createChartElement([], { showYAxis:true, yTicks:5 });
container.appendChild(chart.element);
let phase = 0;
function sine(len, shift, amp, off, f=1){
const now=Date.now(), d=[];
for(let i=0;i<len;i++){
const t=now+i*10, x=i/len*2*Math.PI*f, y=Math.sin(x+shift)*amp+off;
d.push([t,y]);
}
return d;
}
function update(){
chart.setSeries([
{ data: sine(1500, phase, 20, 10, 1), strokeColor:'#0f0' },
{ data: sine(1500, phase, 20, 10, 2), strokeColor:'#f00' },
{ data: sine(1500, phase, 20, 10, 0.5), strokeColor:'#00f' }
]);
phase += 0.01;
}
update();
setInterval(update, 50);
</script>
</body>
</html>
Test
During development you can run a live dev server:
npm run serve