Interface ChartTheme

Visual styling for a chart, threaded through ChartContainer via context. Canvas has no CSS cascade into drawn pixels, so this typed object is the single styling channel for the drawn layers; DOM chrome (axis labels) derives from it too.

The styling pipeline is time series → columns → semantic identifier → style: a draw layer tags its column with a semantic identifier (what the data is — e.g. heartrate, power, or a generic primary), and the theme is the map from identifier → LineStyle. The visual discipline ("a handful of roles, not a hue per channel") lives in the theme, not the type: a good theme maps many identifiers onto few shared styles (estela maps power / speed / cadence → one foam style). Tokens grow as components land (axis tokens with YAxis, band tokens with BandChart).

interface ChartTheme {
    annotation?: {
        color: string;
        depth: readonly [number, number, number];
        fillOpacity: number;
    };
    area: { default: AreaStyle; readonly [semantic: string]: AreaStyle };
    axis: {
        grid: string;
        gridDash: readonly number[];
        label: string;
        sessionDivider?: string;
        title?: { color?: string; opacity?: number; size?: number };
    };
    background?: string;
    band: { default: BandStyle; readonly [semantic: string]: BandStyle };
    bar: { default: BarStyle; readonly [semantic: string]: BarStyle };
    box: { default: BoxStyle; readonly [semantic: string]: BoxStyle };
    candle: { default: CandleStyle; readonly [semantic: string]: CandleStyle };
    chip?: { background: string };
    cursor?: string;
    font: { family: string; size: number };
    gap?: { connectorOpacity: number };
    line: { default: LineStyle; readonly [semantic: string]: LineStyle };
    scatter: {
        default: ScatterStyle;
        readonly [semantic: string]: ScatterStyle;
    };
}

Index

Properties

annotation? area axis background? band bar box candle chip? cursor? font gap? line scatter

Properties

`Optional` `Readonly`annotation

annotation?: {
    color: string;
    depth: readonly [number, number, number];
    fillOpacity: number;
}

The annotation register — the styling for user-authored marks (<Region> / <Baseline> / <Marker>), deliberately a distinct hue from the data's line/area/… so a mark you place never reads as data (the "data stays foam, marks are turquoise" rule). color is the shared register hue (lines, region edges + fill, handles, label text); the region fill draws at fillOpacity. Luminosity encodes depth — brighter reads as forward, dimmer as further back. depth is the three-level ramp: [0] = level 1 (forward / brightest — a selected mark, or an edit-mode line), [1] = level 2 (mid — a hovered mark, or an edit-mode region body), [2] = level 3 (back — the resting, backgrounded state). Cross-row guides draw fainter still (a notional level 4, set in Layers). Falls back to a built-in turquoise.

`Readonly`area

area: { default: AreaStyle; readonly [semantic: string]: AreaStyle }

Map from an area's semantic identifier to its outline-plus-graded-fill style (AreaChart) — outline colour/width and the gradient (opaque at the line, fading to transparent at the baseline). default is the fallback; the esnet two-colour traffic look is two areas composed in the z-stack (e.g. in above the axis + out below), each resolving area[semantic] ?? area.default.

`Readonly`axis

axis: {
    grid: string;
    gridDash: readonly number[];
    label: string;
    sessionDivider?: string;
    title?: { color?: string; opacity?: number; size?: number };
}

Axis chrome: tick-label colour, gridline stroke + dash pattern.

Type Declaration

Readonlygrid: string
ReadonlygridDash: readonly number[]
Gridline dash pattern (px on/off pairs); [] for solid.
Readonlylabel: string
Optional ReadonlysessionDivider?: string
Stroke for session dividers — the solid verticals a trading-time axis draws at each collapsed gap (session/day open). Optional; falls back to grid. Set it a touch stronger than the gridlines so a session boundary reads as structural.
Optional Readonlytitle?: { color?: string; opacity?: number; size?: number }
Typography for the axis title — the rotated y-axis unit strip and the x-axis label (distinct from the per-tick label colour above). Omit a field to fall back: color → label, size → font.size + 1 (a touch larger than the ticks so the rotated strip reads), opacity → 0.85.

`Optional` `Readonly`background

background?: string

Painted behind the layers; omit for a transparent background.

`Readonly`band

band: { default: BandStyle; readonly [semantic: string]: BandStyle }

Map from a band's semantic identifier to its fill style — the variance underlay (BandChart). default is the fallback; a two-tone spread is two bands composed in the z-stack (e.g. outer p5/p95 + inner p25/p75), each resolving band[semantic] ?? band.default.

`Readonly`bar

bar: { default: BarStyle; readonly [semantic: string]: BarStyle }

Map from a bar's semantic identifier to its style — the fill, the selected-bar highlight, and the slot gap / minimum width (BarChart). default is the fallback; a bar resolves bar[semantic] ?? bar.default.

`Readonly`box

box: { default: BoxStyle; readonly [semantic: string]: BoxStyle }

Map from a box's semantic identifier to its style — a discrete box-and-whisker per key (BoxPlot), the bar-chart analog of the band. default is the fallback; a chart tags each box series with a role (<BoxPlot as="latency" />) resolving box[semantic] ?? box.default.

`Readonly`candle

candle: { default: CandleStyle; readonly [semantic: string]: CandleStyle }

Map from a candle's semantic identifier to its style — a first-class OHLC mark (Candlestick), the financial sibling of the box. Unlike the other slots a CandleStyle carries a pair (rising/falling, plus an optional neutral doji): direction colouring is intrinsic to the mark, so one colour can't express it. default is the fallback; a chart tags each series with a role (<Candlestick as="AAPL" />) resolving candle[semantic] ?? candle.default. The default pair is neutral / unbranded (a distinguishable up/down, not market green/red) — a consumer supplies its own palette via cssVarTheme; the library owns the type + a renderable default, never a brand.

`Optional` `Readonly`chip

chip?: { background: string }

Readout chip background (the flag / inline tracker modes). The value text is the series colour; this is the panel behind it. Falls back to the plot background if unset.

`Optional` `Readonly`cursor

cursor?: string

Crosshair / tracker stroke colour. Falls back to axis.label if unset.

`Readonly`font

font: { family: string; size: number }

Label / tick typography. One source for axes + chrome.

`Optional` `Readonly`gap

gap?: { connectorOpacity: number }

Styling for the inferred dashed gap connectors — the dashed and step gap modes (GapMode). Drawn fainter than the solid line (via connectorOpacity, 0–1, applied over the layer's colour) so an inferred bridge across a gap reads as secondary to measured data. Per-theme, so a dark ground can tune the faintness independently. Falls back to 0.5 if unset. (The fade mode has its own gradient and isn't governed by this.)

`Readonly`line

line: { default: LineStyle; readonly [semantic: string]: LineStyle }

Map from a line's semantic identifier to its style. default is the fallback for an identifier the theme doesn't name, so a chart always renders; a line resolves line[semantic] ?? line.default.

`Readonly`scatter

scatter: { default: ScatterStyle; readonly [semantic: string]: ScatterStyle }

Map from a scatter's semantic identifier to its point style — the single styling channel for the base mark (ScatterChart): fill colour, base radius, outline, and the optional per-point label colour. default is the fallback; a scatter resolves scatter[semantic] ?? scatter.default.

Scatter additionally supports data-driven radius + colour (a column run through a scale — see src/encoding.ts); that is the deliberate, signed-off exception to one-channel styling. The data-driven encoding overrides this style's radius / color per point; this remains the fallback for unencoded points and the source of the outline + label styling.

Interface ChartTheme

Index

Properties

Properties

`Optional` `Readonly`annotation

`Readonly`area

`Readonly`axis

Type Declaration

`Readonly`grid: string

`Readonly`gridDash: readonly number[]

`Readonly`label: string

`Optional` `Readonly`sessionDivider?: string

`Optional` `Readonly`title?: { color?: string; opacity?: number; size?: number }

`Optional` `Readonly`background

`Readonly`band

`Readonly`bar

`Readonly`box

`Readonly`candle

`Optional` `Readonly`chip

`Optional` `Readonly`cursor

`Readonly`font

`Optional` `Readonly`gap

`Readonly`line

`Readonly`scatter

Settings

On This Page

Interface ChartTheme

Index

Properties

Properties

Optional Readonlyannotation

Readonlyarea

Readonlyaxis

Type Declaration

Readonlygrid: string

ReadonlygridDash: readonly number[]

Readonlylabel: string

Optional ReadonlysessionDivider?: string

Optional Readonlytitle?: { color?: string; opacity?: number; size?: number }

Optional Readonlybackground

Readonlyband

Readonlybar

Readonlybox

Readonlycandle

Optional Readonlychip

Optional Readonlycursor

Readonlyfont

Optional Readonlygap

Readonlyline

Readonlyscatter

Settings

On This Page

`Optional` `Readonly`annotation

`Readonly`area

`Readonly`axis

`Readonly`grid: string

`Readonly`gridDash: readonly number[]

`Readonly`label: string

`Optional` `Readonly`sessionDivider?: string

`Optional` `Readonly`title?: { color?: string; opacity?: number; size?: number }

`Optional` `Readonly`background

`Readonly`band

`Readonly`bar

`Readonly`box

`Readonly`candle

`Optional` `Readonly`chip

`Optional` `Readonly`cursor

`Readonly`font

`Optional` `Readonly`gap

`Readonly`line

`Readonly`scatter