Customization
Hide legend
Use "legend": { "live": true } to show live values at the cursor position instead of the default static legend.
Hide tooltip
Enable crosshair
Show vertical and horizontal hover lines (disabled by default):
Disable hover points
Enable drag-to-zoom
Double-click to reset zoom.
Custom axis range
Custom height
Combining options
All fields can be combined:
Value formatting
Use format to control how values appear in tooltips and y-axis ticks:
| Field | Type | Description |
|---|---|---|
format.decimals | number | Decimal places (default: 2) |
format.prefix | string | Prepended to values (e.g. "$") |
format.suffix | string | Appended to values (e.g. "%", "°C") |
Per-dataset format overrides the global one:
Show all series in tooltip
By default the tooltip shows only the nearest series. Use "tooltip": { "all": true } to show all series at the cursor position:
Code display
By default every chart shows Chart | Code tabs. Use the code field to change where and how the code appears:
Hide code entirely
Code below the chart
Collapsible below (closed by default)
Collapsible below (open by default)
Code above the chart
Side by side
On narrow screens the side-by-side layout stacks vertically.
Options reference
| Field | Type | Default | Description |
|---|---|---|---|
code | false | — | Hide code entirely |
code.position | "below" | "above" | "side" | tabs | Where to place the code. Omit for Chart | Code tabs |
code.collapsible | boolean | true | Wrap in a <details> toggle (for above/below) |
code.open | boolean | false | Start expanded (when collapsible) |
Editable playground
Set "editable": true to let readers edit the JSON and see the chart update live. Try changing the data or colors below:
Advanced: opts reference
The opts field is deep-merged into the uPlot configuration before chart creation. Any valid uPlot option can be passed here, including cursor, scales, axes, select, and more.