Live price chart
A canvas chart wired into a token-driven system.
$116,236.51
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/live-price.jsonCanvas takes colours as props
Liveline draws to a canvas, so it cannot inherit tokens through the cascade like
the SVG marks do. The wrapper reads the CSS custom properties in JS and re-reads
them whenever the theme flips, via a MutationObserver on data-theme. That is
the entire integration cost of a canvas chart in a token system.
Liveline measures time in seconds, not milliseconds — its own formatTime
does new Date(t * 1e3). Passing Date.now() puts every point about 1.7e12
units outside the window, and the chrome renders while the line does not. That
failure looks like a styling bug and is not one.
The window is controlled
windowSecs is a prop so the range tabs can sit where the design wants them
rather than wherever the library draws its own control.
| Prop | Type | Default | Description |
|---|---|---|---|
| seed | number[] | — | Starting series. Times are assigned relative to a page-load origin. |
| windowSecs | number | 60 | Visible window, in seconds. |
| live | boolean | true | Whether to keep appending ticks. |
| onValue | (v, up) => void | — | Reports each tick, so a headline can match the line. |
| onHover | (p | null) => void | — | Lets a readout track the cursor. Time is returned in ms. |