# nanocharts

Lightweight SVG+HTML hybrid charts. Zero dependencies, typed. Line, bar & pie.

- **~4.4 KB** brotli (JS ~3.7 KB + CSS ~0.7 KB), ~12 KB minified
- **< 0.5 ms** render time — `innerHTML` single-write, zero reflows
- **Zero dependencies**
- **TypeScript** declarations included
- **Dark mode** via `prefers-color-scheme`, Bootstrap, Tailwind, or standalone
- **CSS custom properties** for full theming control
- **Int16Array/Float64Array** typed arrays for cache-friendly math
- **Lazy hover** — tooltip & indicator DOM created only on first interaction

**[Live Examples](https://anvme.github.io/nanocharts/examples.html)**

## Install

```bash
npm install @anvme/nanocharts
```

```js
import { NanoLineChart, NanoBarChart, NanoPieChart } from '@anvme/nanocharts';
import '@anvme/nanocharts/style.css';
```

### CDN

```html
<link href="https://cdn.jsdelivr.net/npm/@anvme/nanocharts@1.0.3/dist/style.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@anvme/nanocharts@1.0.3/dist/nanocharts.min.global.js"></script>
```

## Usage

```html
<div id="chart" style="max-width: 600px"></div>

<script>
NanoLineChart('chart', {
  data: [[5, 12, 8, 20, 15, 25, 18]],
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  xLabel: 'Day',
  yLabel: 'Sales'
});
</script>
```

```js
NanoBarChart('chart', {
  data: [[40, 65, 30, 80, 55]],
  labels: ['Chrome', 'Firefox', 'Safari', 'Edge', 'Other'],
  xLabel: 'Browser',
  yLabel: 'Users'
});
```

```js
NanoPieChart('chart', {
  data: [40, 25, 20, 15],
  labels: ['Desktop', 'Mobile', 'Tablet', 'Other'],
  donut: true,
  donutWidth: 50
});
```

## API

### NanoLineChart(containerId, config)

| Option | Type | Default | Description |
|---|---|---|---|
| `data` | `number[][]` | -- | Array of series |
| `labels` | `string[]` | -- | X-axis labels |
| `xLabel` | `string` | `''` | X-axis title |
| `yLabel` | `string` | `''` | Y-axis title |
| `colors` | `string[]` | brand palette | Color per series |
| `width` | `number` | container width | Chart width in px |
| `height` | `number` | `350` | Chart height in px |
| `smooth` | `boolean` | `false` | Catmull-Rom spline smoothing |
| `areaFill` | `boolean` | `false` | Fill under lines |
| `areaOpacity` | `number` | `0.1` | Area fill opacity |
| `strokeWidth` | `number` | `2.5` | Line stroke width |
| `showTicks` | `boolean` | `true` | Show tick labels |
| `showGrid` | `boolean` | `true` | Show grid lines |
| `gridDashed` | `boolean` | `false` | Dashed grid lines |
| `hover` | `boolean` | `true` | Enable hover tooltip |

### NanoBarChart(containerId, config)

| Option | Type | Default | Description |
|---|---|---|---|
| `data` | `number[][]` | -- | Array of series |
| `labels` | `string[]` | -- | Category labels |
| `xLabel` | `string` | `''` | X-axis title |
| `yLabel` | `string` | `''` | Y-axis title |
| `colors` | `string[]` | brand palette | Color per series |
| `width` | `number` | container width | Chart width in px |
| `height` | `number` | `350` | Chart height in px |
| `stacked` | `boolean` | `false` | Stack series |
| `horizontal` | `boolean` | `false` | Horizontal bars |
| `barGap` | `number` | `0.2` | Gap between groups (0-1) |
| `showTicks` | `boolean` | `true` | Show tick labels |
| `showGrid` | `boolean` | `true` | Show grid lines |
| `gridDashed` | `boolean` | `false` | Dashed grid lines |
| `hover` | `boolean` | `true` | Enable hover tooltip |

### NanoPieChart(containerId, config)

| Option | Type | Default | Description |
|---|---|---|---|
| `data` | `number[]` | -- | Value per slice |
| `labels` | `string[]` | -- | Label per slice |
| `colors` | `string[]` | brand palette | Color per slice |
| `width` | `number` | container width | Chart width in px |
| `height` | `number` | = width | Chart height in px |
| `donut` | `boolean` | `false` | Donut mode |
| `donutWidth` | `number` | `60` | Ring thickness in px |
| `showLabels` | `boolean` | `true` | Show labels outside slices |
| `hover` | `boolean` | `true` | Enable hover tooltip |

## Dark Mode

Charts auto-adapt via `prefers-color-scheme`. Force dark mode with:

```html
<html data-bs-theme="dark">   <!-- Bootstrap 5.3 -->
<html class="dark">            <!-- Tailwind -->
<div class="chart-dark">       <!-- Standalone -->
```

## License

MIT