npm package: @meteolab/uchart
Description: Lightweight charting library for the browser and Node.js
Latest version: 1.1.0

# µChart

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 `<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, 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                            |
| `averageData`     | `number`                 | Compute simple moving average of lasy n data to smooth out line (optional) |

```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
<!-- 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,
        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'
        })
    });    container.appendChild(chart.element);

    let phase = 0;

    function generateSineSeries(len, shift, amp, off, freq = 1){
        const now = Date.now();
        const data=[];
        for(let i=0;i<len;i++){
            const t = now + i*10;
            const x = i/len*2*Math.PI*freq;
            const y = Math.sin(x+shift)*amp + off;
            data.push([t,y]);
        }
        return data;
    }

    function update(){
        chart.setSeries([
            { data: generateSineSeries(1500, phase, 20, 10, 1),   strokeColor:'#0f0' },
            { data: generateSineSeries(1500, phase, 20, 10, 2),   strokeColor:'#f00' },
            { data: generateSineSeries(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:

```bash
npm run serve
```