Charting

Charting

Charting is the spatial surface for OHLCV, overlays, and annotations. Implementation is imperative under a Solid shell so lightweight-charts owns its DOM subtree.

Abstract

Conceptual model

Rendering…

Interface surface

Panes

store.panes: { id, type, height, order, visible, label }.

Defaults: price + volume. Indicator/equity created on demand.

Price chart styles (store.chartType)

Topbar Type select (persisted). Implementation: chart/chart-type.ts + createPriceSeries.

Series still live under pane key candle so markers, hlines, and the drawing layer keep a stable host. Changing type swaps the LWC series and rebinds data without a full history reload.

Empty / status overlay

When bars.length === 0, ChartHost shows contextual title/sub from store.status (loading, error, running, or “Load data to begin”).

Price-scale decimals

Price pane labels use chart/price-precision.ts:

UI control cycles A → 0 → … → 8 → A on the price-pane scale chrome. Store field: priceScaleDecimals (persisted).

Plot style parity

Engine plot series honor Pine Script™ plot.style_* via mapPlotStyleToSeriesKind (results/plot-visuals.ts → pane-manager series factory):

LWC limits: Histogram series has no bar-width or gap option, so columns and histogram share the same bar geometry (both zero-based). Point markers are always circular — cross is approximated by discrete markers without a connector; stepline_diamond uses stepline + vertex markers. Sparse plotshape styles map diamond/cross to square markers (optional + / ✕ glyphs when text is omitted).

fill(plot1, plot2, color=…) renders as SVG bands between the two series when both resolve on the same pane.

Multi-chart layouts

• Modes: 1 / 2H / 2V / 4 (store.chartLayout)
• Per-slot symbol/interval via registry; active slot drives topbar + Run
• Named layouts save/load (optional chrome snapshot)
• Recipes in Layouts menu: Scalp 1m+5m, Swing HTF, Quad, BTC majors (layout-recipes.ts)

Bar Replay

Topbar Replay → session over loaded OHLCV (bar-replay.ts):

• Enters with full history visible (cursor on last bar)
• Scrub / step / play; Play at end restarts from bar 0
• Mutually exclusive with Live

Compare & volume profile

• Compare control: second symbol as % or absolute overlay (compare-overlay.ts)
• Volume profile toggle in Layers → OHLCV approximation histogram (volume-profile.ts)

Pane badges

Each pane’s top-left chip (pane-badge.ts): label + script actions when scripts are applied:

Volume/equity without scripts: name + hide.

Drawings toolbar

See Drawings. Tools include cursor, hline, vline, trend, ray, extend, rect, ellipse, arrow, fib, measure, text (plus fib/shape/annotation/trading packs). The style bar edits color/width/dash plus per-tool extras (extend, fib levels, RR, text); last-used style is stored per kind. Templates and duplicate helpers live under Layers / drawings modules.

Crosshair & time

syncTimeScales / syncCrosshair keep multi-pane navigation coherent. scrollToTime / jumpToDebugPin used from Results and debug pins.

Internals

Solid vs imperative boundary

// ChartHost — Solid owns outer shell
// PaneManager only mutates panesEl — never put Solid children inside panesEl

On cleanup: destroy drawing layer, dispose manager, clear accessors.

Data path

setDataToChart(bars) applies OHLCV; createEffect on store.bars re-applies if bars change outside load helper.

Run apply (chart side)

From runAndApply (indicators):

• syncOverlayLines — update existing overlay series in place (avoids destroy→blank→add flash on live re-runs)
• Markers from normalized events (set in place)
• Script drawings atomic replace via DrawingLayer (setScriptDrawings without empty frame); linefill quads and force_overlay geometry route with other script drawings; barcolor tints candles via plot-visuals (not the SVG layer)
• Equity series when strategy report warrants (silent live runs skip hide thrash)

History vs live bars

• Full loads: loadBars → chartDataGen++ → setDataToChart + fitContent
• Live: multiplex → appendBar + manager.appendBar only (no fitContent, no full setData)
• Performance (2.0.x): live tick path is O(1) append + conflation under load; heavy history paint is batched; load requests use AbortController so symbol switches cancel in-flight venue fetches
• Overlay re-runs prefer in-place series updates (syncOverlayLines) to avoid destroy→blank flash

series-factory

Centralizes series construction options, plot-style mapping, and color palette so Results plot summary and chart stay chromatically related.

Invariants

1. Solid reconciliation must not rewrite pane roots.
2. Script drawings ephemeral per run; user drawings store-backed.
3. Overlay routing: engine meta.overlay + script type; oscillator-scale series forced to sub-pane when they would vanish on price (see Indicators).
4. Shared non-overlay sub-pane id is stable: indicator.
5. Manager may be null before mount—runner no-ops chart apply safely.

Failure modes

Worked example (dev)

import { getManager } from './chart/manager-access';
getManager()?.scrollToTime(barTime);

See also

• Indicators
• Results and strategy
• End-user drawings