# uChart Lightweight, canvas‑based charting library written in TypeScript, designed for real‑time data streams and small bundle size. ![uChart screenshot](https://git.meteolab.online/mi/uChart/raw/master/docs/screenshot.png) ## Features - 💡 **Zero external deps** – plain `` - ⚡ **Real‑time friendly** – redraws only what’s needed - 📦 **ESM ready** – authored as native ES modules - 📝 **TypeScript types** included (`*.d.ts`) - 🎛️ Configurable axes, ticks, colors, date formatting & cursor read‑outs ## Options The `createChartElement(seriesList, options)` function supports the following options: | Option | Type | Description | |------------------|-------------------------------------|-----------------------------------------------------------------------------| | `width` | `number` | Fixed chart width in pixels (optional, defaults to container width) | | `height` | `number` | Fixed chart height in pixels (optional, defaults to container height) | | `min` | `number` | Minimum Y-axis value (optional, auto-computed if not set) | | `max` | `number` | Maximum Y-axis value (optional, auto-computed if not set) | | `showYAxis` | `boolean` | Whether to render Y-axis ticks and labels | | `yTicks` | `number` | Number of Y-axis ticks (default: `5`) | | `backgroundColor`| `string` | Optional background fill color | | `maxTimeDelta` | `number \| null` | Gap in ms that breaks line continuity (default: `600`) | | `dateFormat` | `(ts: number) => string` | Custom formatter for the cursor timestamp label | ```ts // Example: format timestamp to full Czech date+time dateFormat: (ts) => new Date(ts).toLocaleString('cs-CZ', { hour: '2-digit', minute: '2-digit', second: '2-digit', day: '2-digit', month: '2-digit', year: 'numeric' }) ``` ## Installation ```bash npm install @meteolab/uchart ``` ## Quick strart ```html uChart Interactive Test
``` ## Test During development you can run a live dev server: ```bash npm run serve ```