liveline 0.0.5 → 0.0.7

package/README.md

@@ -1,6 +1,6 @@
 # Liveline
 
-Real-time animated charts for React. Line and candlestick modes, canvas-rendered, 60fps, zero CSS imports.
+Real-time animated charts for React. Line, multi-series, and candlestick modes, canvas-rendered, 60fps, zero CSS imports.
 
 ## Install
 
@@ -54,6 +54,7 @@ The component fills its parent container. Set a height on the parent. Pass `data
 | `badgeTail` | `boolean` | `true` | Pointed tail on badge pill |
 | `fill` | `boolean` | `true` | Gradient under the curve |
 | `pulse` | `boolean` | `true` | Pulsing ring on live dot |
+| `lineWidth` | `number` | `2` | Stroke width of the main line in pixels |
 
 **Features**
 
@@ -83,6 +84,16 @@ When `mode="candle"`, pass `candles` (committed OHLC bars) and `liveCandle` (the
 
 The `onModeChange` prop renders a built-in line/candle toggle next to the time window buttons.
 
+**Multi-series**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `series` | `LivelineSeries[]` | — | Multiple overlapping lines `{ id, data, value, color, label? }` |
+| `onSeriesToggle` | `(id, visible) => void` | — | Callback when a series is toggled via built-in chips |
+| `seriesToggleCompact` | `boolean` | `false` | Show only colored dots in toggle (no text labels) |
+
+Pass `series` instead of `data`/`value` to draw multiple lines sharing the same axes. Each series gets its own color, label, and endpoint dot. Toggle chips appear automatically when there are 2+ series — clicking one hides/shows that line with a smooth fade. The Y-axis range adjusts when series are hidden. Badge, momentum arrows, and fill are disabled in multi-series mode.
+
 **State**
 
 | Prop | Type | Default | Description |
@@ -123,7 +134,7 @@ When `loading` flips to `false` with data present, the loading line morphs into
 | `formatValue` | `(v: number) => string` | `v.toFixed(2)` | Value label formatter |
 | `formatTime` | `(t: number) => string` | `HH:MM:SS` | Time axis formatter |
 | `lerpSpeed` | `number` | `0.08` | Interpolation speed (0–1) |
-| `padding` | `Padding` | `{ top: 12, right: 80, bottom: 28, left: 12 }` | Chart padding override |
+| `padding` | `Padding` | `{ top: 12, right: auto, bottom: 28, left: 12 }` | Chart padding override (`right` is 80/54/12 based on badge/grid) |
 | `onHover` | `(point \| null) => void` | — | Hover callback with `{ time, value, x, y }` |
 | `cursor` | `string` | `'crosshair'` | CSS cursor on canvas hover |
 | `className` | `string` | — | Container class |
@@ -209,6 +220,30 @@ When `loading` flips to `false` with data present, the loading line morphs into
 />
 ```
 
+### Multi-series (prediction market)
+
+```tsx
+<Liveline
+  data={[]}
+  value={0}
+  series={[
+    { id: 'yes', data: yesData, value: yesValue, color: '#3b82f6', label: 'Yes' },
+    { id: 'no', data: noData, value: noValue, color: '#ef4444', label: 'No' },
+  ]}
+  grid
+  scrub
+  pulse
+  windowStyle="rounded"
+  formatValue={(v) => v.toFixed(1) + '%'}
+  onSeriesToggle={(id, visible) => console.log(id, visible)}
+  windows={[
+    { label: '10s', secs: 10 },
+    { label: '30s', secs: 30 },
+    { label: '1m', secs: 60 },
+  ]}
+/>
+```
+
 ### Loading + pause
 
 ```tsx
@@ -241,6 +276,7 @@ When `loading` flips to `false` with data present, the loading line morphs into
 - **Frame-rate-independent lerp** on value, Y-axis range, badge color, and scrub opacity
 - **Candlestick rendering** — OHLC bodies + wicks with bull/bear coloring, smooth live candle updates
 - **Line/candle morph** — candle bodies collapse to close price, morph line extends center-out, coordinated alpha crossfade
+- **Multi-series** — overlapping lines with per-series toggle, smooth alpha fade, and dynamic Y-axis range
 - **ResizeObserver** tracks container size — no per-frame layout reads
 - **Theme derivation** — full palette from one accent color + light/dark mode
 - **Binary search interpolation** for hover value lookup