cnc-plot
A canvas chart for real data — time series, lines, areas, OHLC and bars — wrapping
uPlot, loaded from a CDN at mount. Its options are uPlot's own, so the
upstream documentation is the reference for everything the widget does not add.
Quick start
Bind data as uPlot's column-major array — the FIRST entry is the x values and
every entry after it is a series — and options as a uPlot config. The library
is fetched from a CDN inside mount, so the element is empty server-side and until
that import resolves; it is also the one dependency here that needs a network.
<cnc-plot
$data="[[1, 2, 3, 4], [10, 15, 12, 18]]"
$options="{ width: 600, height: 300, scales: { x: { time: false } },
series: [{}, { stroke: '#0ea5e9', fill: '#0ea5e922' }] }"
></cnc-plot>Methods on the element
Unusually for this library, the widget also exposes uPlot's API directly on the host element.
They exist only AFTER ready has fired — the library is imported
asynchronously, so calling one on the line after the element is created will throw.
| Method | Purpose |
|---|---|
| setData(…) |
Replace the data. Binding data does this for you; the method is for a host
driving the chart imperatively.
|
| setScale(…) | Set an axis range — how a host zooms to a window programmatically. |
| addSeries(…) / delSeries(…) | Add or remove a series after creation. |
| setSeries(…) / setSelect(…) / setCursor(…) | Focus a series, set the selection, move the cursor. |
| setSize(…) / redraw(…) | Resize or repaint. |
| posToVal(…) / valToPos(…) | Convert between pixel and data coordinates. |
| _plot | The underlying uPlot instance, for anything not forwarded above. |
Usage guidance
Use cnc-plot when the chart is the content — axes, tooltips, several series,
zooming. For a trend beside a number, cnc-sparkline and
cnc-sparkbar
are the versions with none of that machinery and no CDN dependency.
Wait for ready before calling anything. uPlot is imported asynchronously at mount,
so the element's methods do not exist yet when the surrounding markup runs — and the chart
is blank both server-side and until the import lands, which is worth reserving space for so the
page does not jump.
Pass options as a bound OBJECT whenever it contains functions. A plain attribute is
parsed as JSON, which silently drops every formatter, hook and callback; the binding keeps them.
The options are uPlot's, not this widget's. Read the upstream documentation for axes, scales,
series and cursor configuration — only zoom, control and the two
events above are added here.