Live Line Chart
NEWA real-time line chart that scrolls right-to-left, with a large current-value readout, a live delta, and a pause control. Hover or touch the chart to freeze the stream and scrub it with a crosshair tooltip.
Requests per second
Live from the edge network. Hover to pause and inspect.
1,104req/s
▼ 7.5% over the last 60s
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/live-line-chart
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| source | (push) => void | (() => void) | — | Data feed subscription; call push(value) for each new reading and return a cleanup |
| initial | number[] | — | Known values, oldest to newest, spaced intervalMs apart and ending now |
| intervalMs | number | 1000 | Approximate arrival interval and the smoothing delay |
| windowSeconds | number | 60 | Seconds visible in the scrolling window |
| height | number | 220 | Chart height in pixels |
| color | string | CHART_COLORS[0] | Line stroke and area gradient color |
| unit | string | "" | Unit shown beside the readout and tooltip values |
| formatValue | (n: number) => string | Intl.NumberFormat | Formats the current value, tooltip, and aria text |
| domain | [number, number] | — | Fixed y-range instead of auto-scaling to the visible window |
| showReadout | boolean | true | Shows the large current value, delta, and pause button |
| ariaLabel | string | auto-generated | Accessible description for the chart image role |
| className | string | "" | Additional CSS classes for the chart wrapper |