Concepts
Ink & precision
Every chart has two modes. ink (the default) draws by hand; precision switches the inking off entirely and draws exact, even strokes.
Side by side
| x | value | previous |
|---|---|---|
| Q1 | 42 | 35 |
| Q2 | 58 | 44 |
| Q3 | 51 | 49 |
| Q4 | 73 | 60 |
| x | value | previous |
|---|---|---|
| Q1 | 42 | 35 |
| Q2 | 58 | 44 |
| Q3 | 51 | 49 |
| Q4 | 73 | 60 |
<LineChart data={data} xKey="hour" valueKey="hits" title="Hits per hour" mode="precision" /><SpLineChart :data="data" x-key="hour" value-key="hits" title="Hits per hour" mode="precision" /><sp-line-chart [data]="data" xKey="hour" valueKey="hits" title="Hits per hour" mode="precision" />line_chart(data=DATA, x_key="hour", value_key="hits", title="Hits per hour", mode="precision")When to use it
- Print, and dense dashboards where many small charts sit together.
- Readers who prefer it: offer it as a setting.
- Automatically: a chart switches to precision by itself under
prefers-contrast: moreorforced-colors: active. No prop overrides that.
The drawing is deterministic
The hand drawing never uses Math.random() or Date.now() on the render path. Its seed derives from id (or is given as seed), so the same props draw the same strokes on the server and in the browser, and a snapshot test stays stable.