@zuttora/charts 0.1.0 → 0.3.0

package/README.md

@@ -20,7 +20,20 @@ chart.on('needMore', (oldest) => { /* load older candles, then chart.prependData
 chart.on('liveChange', (atLive) => { /* show or hide a "Go to live" button */ });
 ```
 
-Also: `replaceClosed`, `setOptions`, `setPriceLines`, `setMarkers`, `scrollToLive`, `fitAll`, `destroy`.
+Also: `replaceClosed`, `setOptions`, `setPriceLines`, `setMarkers`, `setIndicators`, `setDrawingTool`, `setDrawings`, `getDrawings`, `updateDrawing`, `deleteSelected`, `clearDrawings`, `setDrawingColor`, `scrollToLive`, `fitAll`, `destroy`.
+
+Drawing tools (`setDrawingTool(tool)`): `hline`, `trend`, `ray`, `rect`, `fib`, `note` and `measure` (a ruler that is never saved). Tap or click to place each point, or press and drag. A finished drawing is picked; drag it to move it, drag a square to move one point, `Delete` removes it, `Escape` backs out. Drawings sit at a time and a price, so they stay in place when the candle size changes.
+The host owns saving: listen to `drawingsChange(list)`, store it, and restore with `setDrawings(list)`. `drawingEdit(drawing)` fires when a note needs its words (`updateDrawing(id, { text })`); `drawProgress` tells a hint line how far along the trader is; `setDrawingColor(color)` colours the next drawing and the picked one.
+
+Indicators (`setIndicators(specs)`, diffed by `id`): `sma`, `ema` and `bollinger` are drawn over the candles; `rsi` and `macd` get their own pane under the price.
+They are calculated from every loaded close, the forming candle included, so they move live.
+
+```js
+chart.setIndicators([
+  { id: 'sma20', type: 'sma', period: 20, color: '#FFD34D' },
+  { id: 'rsi', type: 'rsi', period: 14, color: '#C792EA' },
+]);
+```
 
 Gestures: drag to pan, wheel or pinch to zoom, press and hold (touch) or hover (mouse) for the
 crosshair, drag the price axis to scale it, double-click or double-tap to reset, arrow keys, `+`/`-`,
@@ -31,7 +44,8 @@ crosshair, drag the price axis to scale it, double-click or double-tap to reset,
 | | |
 |---|---|
 | Core, rendering, interaction (M3 to M5) | done |
-| Indicators (M8) | `0.2.0` |
+| Indicators (M8) | done, `0.2.0` |
+| Drawing tools (M9) | done, `0.3.0` |
 | Published to npm | after review (needs the `NPM_TOKEN` secret) |
 
 ## Develop

package/dist/chart.js

@@ -1,3 +1,4 @@
+import { createDrawApi } from "./drawApi.js";
 import { Emitter } from "./core/emitter.js";
 import { buildDom } from "./dom/root.js";
 import { watchEnvironment } from "./dom/environment.js";
@@ -69,6 +70,15 @@ export function createChartCore(container, options) {
         visible: invalidateAll,
     });
     const animNow = perf;
+    const drawApi = createDrawApi({
+        s,
+        root,
+        events,
+        invalidate,
+        lastFrame: () => lastFrame,
+        now: animNow,
+        isDestroyed: () => destroyed,
+    });
     const chart = {
         setData(closed, forming, hasMore) {
             if (destroyed)
@@ -80,6 +90,7 @@ export function createChartCore(container, options) {
             const keepT = hadData && !wasLive ? s.series.timeAt(Math.min(edge, s.series.lastIndex())) : null;
             s.series.setData(closed, forming, hasMore);
             s.haBars.rebuild();
+            s.indicators.rebuild(s.series);
             s.vp.setLastIndex(s.series.lastIndex());
             s.moreGate.clear();
             s.closeTween.jump(forming ? forming.c : 0);
@@ -105,6 +116,7 @@ export function createChartCore(container, options) {
             if (added > 0) {
                 s.vp.onPrepend(added);
                 s.haBars.rebuild();
+                s.indicators.rebuild(s.series);
             }
             s.moreGate.clear();
             updateLegend();
@@ -115,6 +127,7 @@ export function createChartCore(container, options) {
                 return;
             if (s.series.replaceClosed(candles) > 0) {
                 s.haBars.rebuild();
+                s.indicators.rebuild(s.series);
                 updateLegend();
                 invalidateAll();
             }
@@ -125,6 +138,7 @@ export function createChartCore(container, options) {
             const r = s.series.applyTick(price, time, s.options.intervalMs, s.options.tzOffsetMs);
             if (r.kind === 'ignored')
                 return;
+            s.indicators.onTick(s.series, r);
             const t = animNow();
             if (r.kind === 'updated') {
                 s.closeTween.set(price, t, s.options.reducedMotion ? 0 : CLOSE_TWEEN_MS);
@@ -175,6 +189,15 @@ export function createChartCore(container, options) {
             updateLegend();
             invalidate('main');
         },
+        setIndicators(specs) {
+            if (destroyed)
+                return;
+            s.indicators.setSpecs(specs, s.series);
+            s.rangeReady = false;
+            updateLegend();
+            invalidateAll();
+        },
+        ...drawApi.methods,
         scrollToLive() {
             host.scrollToLive();
         },
@@ -202,6 +225,7 @@ export function createChartCore(container, options) {
     const host = createHost({
         root,
         state: s,
+        draw: drawApi.controller,
         events,
         invalidate,
         invalidateAll,

package/dist/chartState.d.ts

@@ -1,5 +1,8 @@
 import { CandleSeries } from './core/series.ts';
 import { PriceScale } from './core/priceScale.ts';
+import type { Drawing } from './core/drawings.ts';
+import { IndicatorSet } from './core/indicatorSet.ts';
+import type { DrawState } from './draw/controller.ts';
 import { MoreGate, Viewport } from './core/viewport.ts';
 import type { ChartLabels, ChartOptions, Marker, PriceLine } from './core/types.ts';
 import { HeikinBars, SeriesBars } from './render/bars.ts';
@@ -23,6 +26,9 @@ export interface ChartState {
     moreGate: MoreGate;
     lines: readonly PriceLine[];
     markers: readonly Marker[];
+    indicators: IndicatorSet;
+    drawings: Drawing[];
+    draw: DrawState;
     rangeMin: Tween;
     rangeMax: Tween;
     rangeReady: boolean;

package/dist/chartState.js

@@ -1,5 +1,7 @@
 import { CandleSeries } from "./core/series.js";
 import { PriceScale } from "./core/priceScale.js";
+import { IndicatorSet } from "./core/indicatorSet.js";
+import { createDrawState } from "./draw/controller.js";
 import { MoreGate, Viewport } from "./core/viewport.js";
 import { HeikinBars, SeriesBars } from "./render/bars.js";
 import { Tween } from "./render/tween.js";
@@ -41,6 +43,9 @@ export function createState(options) {
         moreGate: new MoreGate(),
         lines: [],
         markers: [],
+        indicators: new IndicatorSet(),
+        drawings: [],
+        draw: createDrawState(options.theme.accent),
         rangeMin: new Tween(0),
         rangeMax: new Tween(1),
         rangeReady: false,

package/dist/core/drawings.d.ts

@@ -0,0 +1,21 @@
+import type { Time } from './types.ts';
+export type DrawingTool = 'hline' | 'trend' | 'ray' | 'rect' | 'fib' | 'note' | 'measure';
+export type DrawingKind = Exclude<DrawingTool, 'measure'>;
+export interface Point {
+    t: Time;
+    price: number;
+}
+export interface Drawing {
+    id: string;
+    type: DrawingKind;
+    points: Point[];
+    color: string;
+    text?: string;
+}
+export declare const MAX_DRAWINGS = 100;
+export declare const MAX_NOTE_LENGTH = 60;
+export declare const FIB_LEVELS: readonly number[];
+export declare function pointsNeeded(tool: DrawingTool): number;
+export declare function isKind(tool: string): tool is DrawingKind;
+export declare function newDrawingId(): string;
+export declare function sanitizeDrawings(list: readonly unknown[]): Drawing[];

package/dist/core/drawings.js

@@ -0,0 +1,46 @@
+export const MAX_DRAWINGS = 100;
+export const MAX_NOTE_LENGTH = 60;
+export const FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+const KINDS = ['hline', 'trend', 'ray', 'rect', 'fib', 'note'];
+export function pointsNeeded(tool) {
+    return tool === 'hline' || tool === 'note' ? 1 : 2;
+}
+export function isKind(tool) {
+    return KINDS.includes(tool);
+}
+let counter = 0;
+export function newDrawingId() {
+    counter += 1;
+    return `d${Date.now().toString(36)}${counter.toString(36)}`;
+}
+const finite = (n) => typeof n === 'number' && Number.isFinite(n);
+export function sanitizeDrawings(list) {
+    const out = [];
+    const ids = new Set();
+    for (const raw of list) {
+        if (out.length >= MAX_DRAWINGS)
+            break;
+        if (typeof raw !== 'object' || raw === null)
+            continue;
+        const d = raw;
+        if (typeof d.id !== 'string' || ids.has(d.id) || typeof d.type !== 'string' || !isKind(d.type))
+            continue;
+        if (typeof d.color !== 'string' || !Array.isArray(d.points))
+            continue;
+        const need = pointsNeeded(d.type);
+        const points = [];
+        for (const p of d.points.slice(0, need)) {
+            const q = p;
+            if (q && finite(q.t) && finite(q.price))
+                points.push({ t: q.t, price: q.price });
+        }
+        if (points.length !== need)
+            continue;
+        const drawing = { id: d.id, type: d.type, points, color: d.color };
+        if (d.type === 'note')
+            drawing.text = typeof d.text === 'string' ? d.text.slice(0, MAX_NOTE_LENGTH) : '';
+        ids.add(d.id);
+        out.push(drawing);
+    }
+    return out;
+}

package/dist/core/indicatorSet.d.ts

@@ -0,0 +1,20 @@
+import type { CandleSeries, TickResult } from './series.ts';
+import type { Calc } from './indicators.ts';
+import type { IndicatorSpec } from './types.ts';
+export declare const MAX_INDICATORS = 8;
+export interface IndicatorEntry {
+    spec: IndicatorSpec;
+    calc: Calc;
+    key: string;
+}
+export declare class IndicatorSet {
+    entries: IndicatorEntry[];
+    private closes;
+    get subCount(): number;
+    main(): IndicatorEntry[];
+    subs(): IndicatorEntry[];
+    setSpecs(specs: readonly IndicatorSpec[], series: CandleSeries): void;
+    rebuild(series: CandleSeries): void;
+    onTick(series: CandleSeries, result: TickResult): void;
+    private loadCloses;
+}

package/dist/core/indicatorSet.js

@@ -0,0 +1,66 @@
+import { isSubPane, makeCalc } from "./indicators.js";
+export const MAX_INDICATORS = 8;
+const keyOf = (spec) => JSON.stringify({ ...spec, color: undefined, signalColor: undefined });
+export class IndicatorSet {
+    constructor() {
+        this.entries = [];
+        this.closes = [];
+    }
+    get subCount() {
+        let n = 0;
+        for (const e of this.entries)
+            if (isSubPane(e.spec))
+                n++;
+        return n;
+    }
+    main() {
+        return this.entries.filter((e) => !isSubPane(e.spec));
+    }
+    subs() {
+        return this.entries.filter((e) => isSubPane(e.spec));
+    }
+    setSpecs(specs, series) {
+        const old = new Map(this.entries.map((e) => [e.spec.id, e]));
+        const next = [];
+        const seen = new Set();
+        for (const spec of specs) {
+            if (seen.has(spec.id) || next.length >= MAX_INDICATORS)
+                continue;
+            seen.add(spec.id);
+            const key = keyOf(spec);
+            const kept = old.get(spec.id);
+            next.push(kept && kept.key === key ? { ...kept, spec } : { spec, key, calc: makeCalc(spec) });
+        }
+        const fresh = next.filter((e) => !this.entries.some((o) => o.calc === e.calc));
+        this.entries = next;
+        if (fresh.length > 0) {
+            this.loadCloses(series);
+            for (const e of fresh)
+                e.calc.computeFrom(this.closes, 0);
+        }
+    }
+    rebuild(series) {
+        if (this.entries.length === 0)
+            return;
+        this.loadCloses(series);
+        for (const e of this.entries)
+            e.calc.computeFrom(this.closes, 0);
+    }
+    onTick(series, result) {
+        if (this.entries.length === 0 || result.kind === 'ignored')
+            return;
+        const n = series.count;
+        if ((result.kind === 'closed' && result.shifted > 0) || this.closes.length < n - 1 || this.closes.length > n) {
+            this.rebuild(series);
+            return;
+        }
+        this.closes[n - 1] = series.closeAt(n - 1);
+        for (const e of this.entries)
+            e.calc.computeFrom(this.closes, n - 1);
+    }
+    loadCloses(series) {
+        this.closes = [];
+        for (let i = 0; i < series.count; i++)
+            this.closes.push(series.closeAt(i));
+    }
+}

package/dist/core/indicators.d.ts

@@ -0,0 +1,53 @@
+import type { IndicatorSpec } from './types.ts';
+export type Values = (number | null)[];
+export interface Calc {
+    computeFrom(closes: readonly number[], from: number): void;
+    lines: Record<string, Values>;
+}
+export declare class Sma implements Calc {
+    readonly values: Values;
+    readonly lines: Record<string, Values>;
+    private period;
+    constructor(period: number);
+    computeFrom(closes: readonly number[], from: number): void;
+}
+export declare class Ema implements Calc {
+    readonly values: Values;
+    readonly lines: Record<string, Values>;
+    private period;
+    private k;
+    constructor(period: number);
+    computeFrom(input: readonly (number | null)[], from: number): void;
+}
+export declare class Bollinger implements Calc {
+    readonly mid: Values;
+    readonly upper: Values;
+    readonly lower: Values;
+    readonly lines: Record<string, Values>;
+    private period;
+    private width;
+    constructor(period: number, stdDev: number);
+    computeFrom(closes: readonly number[], from: number): void;
+}
+export declare class Rsi implements Calc {
+    readonly values: Values;
+    readonly lines: Record<string, Values>;
+    private gain;
+    private loss;
+    private period;
+    constructor(period: number);
+    computeFrom(closes: readonly number[], from: number): void;
+}
+export declare class Macd implements Calc {
+    readonly macd: Values;
+    readonly hist: Values;
+    readonly lines: Record<string, Values>;
+    private fast;
+    private slow;
+    private signal;
+    constructor(fast: number, slow: number, signal: number);
+    computeFrom(closes: readonly number[], from: number): void;
+}
+export declare function makeCalc(spec: IndicatorSpec): Calc;
+export declare function isSubPane(spec: IndicatorSpec): boolean;
+export declare function indicatorTitle(spec: IndicatorSpec): string;

package/dist/core/indicators.js

@@ -0,0 +1,187 @@
+function cut(values, n) {
+    if (values.length > n)
+        values.length = n;
+}
+function whole(n) {
+    return Math.max(1, Math.floor(Number.isFinite(n) ? n : 1));
+}
+function windowMean(x, end, period) {
+    let sum = 0;
+    for (let j = end - period + 1; j <= end; j++)
+        sum += x[j];
+    return sum / period;
+}
+function firstValue(x) {
+    for (let i = 0; i < x.length; i++)
+        if (x[i] !== null)
+            return i;
+    return -1;
+}
+export class Sma {
+    constructor(period) {
+        this.values = [];
+        this.lines = { main: this.values };
+        this.period = whole(period);
+    }
+    computeFrom(closes, from) {
+        cut(this.values, from);
+        for (let i = this.values.length; i < closes.length; i++) {
+            this.values.push(i < this.period - 1 ? null : windowMean(closes, i, this.period));
+        }
+    }
+}
+export class Ema {
+    constructor(period) {
+        this.values = [];
+        this.lines = { main: this.values };
+        this.period = whole(period);
+        this.k = 2 / (this.period + 1);
+    }
+    computeFrom(input, from) {
+        cut(this.values, from);
+        const start = firstValue(input);
+        for (let i = this.values.length; i < input.length; i++) {
+            if (start < 0 || i < start + this.period - 1)
+                this.values.push(null);
+            else if (i === start + this.period - 1)
+                this.values.push(windowMean(input, i, this.period));
+            else {
+                const prev = this.values[i - 1];
+                this.values.push(prev + this.k * (input[i] - prev));
+            }
+        }
+    }
+}
+export class Bollinger {
+    constructor(period, stdDev) {
+        this.mid = [];
+        this.upper = [];
+        this.lower = [];
+        this.lines = { mid: this.mid, upper: this.upper, lower: this.lower };
+        this.period = whole(period);
+        this.width = Number.isFinite(stdDev) ? stdDev : 2;
+    }
+    computeFrom(closes, from) {
+        for (const v of [this.mid, this.upper, this.lower])
+            cut(v, from);
+        for (let i = this.mid.length; i < closes.length; i++) {
+            if (i < this.period - 1) {
+                this.mid.push(null);
+                this.upper.push(null);
+                this.lower.push(null);
+                continue;
+            }
+            const mean = windowMean(closes, i, this.period);
+            let sq = 0;
+            for (let j = i - this.period + 1; j <= i; j++)
+                sq += (closes[j] - mean) ** 2;
+            const band = this.width * Math.sqrt(sq / this.period);
+            this.mid.push(mean);
+            this.upper.push(mean + band);
+            this.lower.push(mean - band);
+        }
+    }
+}
+export class Rsi {
+    constructor(period) {
+        this.values = [];
+        this.lines = { rsi: this.values };
+        this.gain = [];
+        this.loss = [];
+        this.period = whole(period);
+    }
+    computeFrom(closes, from) {
+        for (const v of [this.values, this.gain, this.loss])
+            cut(v, from);
+        const p = this.period;
+        for (let i = this.values.length; i < closes.length; i++) {
+            if (i < p) {
+                this.values.push(null);
+                this.gain.push(null);
+                this.loss.push(null);
+                continue;
+            }
+            let g;
+            let l;
+            if (i === p) {
+                g = 0;
+                l = 0;
+                for (let j = 1; j <= p; j++) {
+                    const d = closes[j] - closes[j - 1];
+                    if (d > 0)
+                        g += d;
+                    else
+                        l -= d;
+                }
+                g /= p;
+                l /= p;
+            }
+            else {
+                const d = closes[i] - closes[i - 1];
+                g = (this.gain[i - 1] * (p - 1) + (d > 0 ? d : 0)) / p;
+                l = (this.loss[i - 1] * (p - 1) + (d < 0 ? -d : 0)) / p;
+            }
+            this.gain.push(g);
+            this.loss.push(l);
+            this.values.push(l === 0 ? (g === 0 ? 50 : 100) : 100 - 100 / (1 + g / l));
+        }
+    }
+}
+export class Macd {
+    constructor(fast, slow, signal) {
+        this.macd = [];
+        this.hist = [];
+        this.fast = new Ema(fast);
+        this.slow = new Ema(slow);
+        this.signal = new Ema(signal);
+        this.lines = { macd: this.macd, signal: this.signal.values, hist: this.hist };
+    }
+    computeFrom(closes, from) {
+        this.fast.computeFrom(closes, from);
+        this.slow.computeFrom(closes, from);
+        cut(this.macd, from);
+        for (let i = this.macd.length; i < closes.length; i++) {
+            const f = this.fast.values[i];
+            const s = this.slow.values[i];
+            this.macd.push(f !== null && f !== undefined && s !== null && s !== undefined ? f - s : null);
+        }
+        this.signal.computeFrom(this.macd, from);
+        cut(this.hist, from);
+        for (let i = this.hist.length; i < closes.length; i++) {
+            const m = this.macd[i];
+            const g = this.signal.values[i];
+            this.hist.push(m !== null && m !== undefined && g !== null && g !== undefined ? m - g : null);
+        }
+    }
+}
+export function makeCalc(spec) {
+    switch (spec.type) {
+        case 'sma':
+            return new Sma(spec.period);
+        case 'ema':
+            return new Ema(spec.period);
+        case 'bollinger':
+            return new Bollinger(spec.period, spec.stdDev);
+        case 'rsi':
+            return new Rsi(spec.period);
+        case 'macd':
+            return new Macd(spec.fast, spec.slow, spec.signal);
+    }
+}
+export function isSubPane(spec) {
+    return spec.type === 'rsi' || spec.type === 'macd';
+}
+export function indicatorTitle(spec) {
+    switch (spec.type) {
+        case 'sma':
+            return `SMA ${spec.period}`;
+        case 'ema':
+            return `EMA ${spec.period}`;
+        case 'bollinger':
+            return `BB ${spec.period} ${spec.stdDev}`;
+        case 'rsi':
+            return `RSI ${spec.period}`;
+        case 'macd':
+            return `MACD ${spec.fast} ${spec.slow} ${spec.signal}`;
+    }
+}

package/dist/core/types.d.ts

@@ -62,6 +62,8 @@ export interface Marker {
     label?: string;
     tooltip?: string;
 }
+import type { Drawing, DrawingTool } from './drawings.ts';
+export type { Drawing, DrawingKind, DrawingTool, Point } from './drawings.ts';
 export type IndicatorSpec = {
     id: string;
     type: 'sma';
@@ -97,6 +99,14 @@ export interface ChartEvents {
     candleClosed: (candle: Candle) => void;
     liveChange: (atLive: boolean) => void;
     crosshair: (candle: Candle | null) => void;
+    drawingsChange: (drawings: readonly Drawing[]) => void;
+    selectionChange: (id: string | null) => void;
+    drawProgress: (info: {
+        tool: DrawingTool;
+        placed: number;
+        needed: number;
+    } | null) => void;
+    drawingEdit: (drawing: Drawing) => void;
 }
 export interface Chart {
     setData(closed: readonly Candle[], forming: Candle | null, hasMore: boolean): void;
@@ -106,6 +116,17 @@ export interface Chart {
     setOptions(patch: Partial<ChartOptions>): void;
     setPriceLines(lines: readonly PriceLine[]): void;
     setMarkers(markers: readonly Marker[]): void;
+    setIndicators(specs: readonly IndicatorSpec[]): void;
+    setDrawingTool(tool: DrawingTool | null): void;
+    setDrawings(drawings: readonly Drawing[]): void;
+    getDrawings(): Drawing[];
+    updateDrawing(id: string, patch: {
+        text?: string;
+        color?: string;
+    }): void;
+    deleteSelected(): void;
+    clearDrawings(): void;
+    setDrawingColor(color: string): void;
     scrollToLive(): void;
     fitAll(): void;
     on<E extends keyof ChartEvents>(event: E, listener: ChartEvents[E]): () => void;

package/dist/dom/indicatorReadings.d.ts

@@ -0,0 +1,7 @@
+import type { IndicatorEntry } from '../core/indicatorSet.ts';
+type Reading = {
+    text: string;
+    color: string;
+};
+export declare function indicatorReadings(entries: readonly IndicatorEntry[], i: number, fmt: (v: number) => string): Reading[];
+export {};

package/dist/dom/indicatorReadings.js

@@ -0,0 +1,26 @@
+import { indicatorTitle } from "../core/indicators.js";
+export function indicatorReadings(entries, i, fmt) {
+    const out = [];
+    const at = (values) => {
+        const v = values?.[i];
+        return v === null || v === undefined ? '–' : fmt(v);
+    };
+    for (const e of entries) {
+        const l = e.calc.lines;
+        const name = indicatorTitle(e.spec);
+        switch (e.spec.type) {
+            case 'bollinger':
+                out.push({ text: `${name} ${at(l.lower)} ${at(l.mid)} ${at(l.upper)}`, color: e.spec.color });
+                break;
+            case 'macd':
+                out.push({ text: `MACD ${at(l.macd)} sig ${at(l.signal)}`, color: e.spec.color });
+                break;
+            case 'rsi':
+                out.push({ text: `${name} ${at(l.rsi) === '–' ? '–' : l.rsi[i].toFixed(1)}`, color: e.spec.color });
+                break;
+            default:
+                out.push({ text: `${name} ${at(l.main)}`, color: e.spec.color });
+        }
+    }
+    return out;
+}

package/dist/dom/legend.d.ts

@@ -3,11 +3,16 @@ export interface LegendInput {
     candle: Candle | null;
     notes: readonly string[];
     caption: string | null;
+    indicators: readonly {
+        text: string;
+        color: string;
+    }[];
 }
 export declare class Legend {
     readonly el: HTMLDivElement;
     private line;
     private extra;
+    private readings;
     constructor(doc: Document, theme: ChartTheme);
     applyTheme(theme: ChartTheme): void;
     update(input: LegendInput, labels: ChartLabels, theme: ChartTheme, decimals: number, fmt: (v: number) => string, locale: string): void;

package/dist/dom/legend.js

@@ -4,8 +4,10 @@ export class Legend {
         this.el = doc.createElement('div');
         this.line = doc.createElement('div');
         this.extra = doc.createElement('div');
+        this.readings = doc.createElement('div');
         this.line.style.cssText = 'display:flex;flex-wrap:wrap;column-gap:12px';
-        this.el.append(this.line, this.extra);
+        this.readings.style.cssText = 'display:flex;flex-wrap:wrap;column-gap:12px';
+        this.el.append(this.line, this.readings, this.extra);
         this.el.setAttribute('aria-live', 'off');
         this.applyTheme(theme);
     }
@@ -27,6 +29,7 @@ export class Legend {
         const k = input.candle;
         this.line.textContent = '';
         this.extra.textContent = '';
+        this.readings.textContent = '';
         if (!k)
             return;
         const parts = [
@@ -46,6 +49,12 @@ export class Legend {
         change.textContent = `${ch.arrow} ${ch.amount} (${ch.percent})`.trim();
         change.style.color = ch.direction > 0 ? theme.up : ch.direction < 0 ? theme.down : theme.textMuted;
         this.line.append(change);
+        for (const r of input.indicators) {
+            const span = doc.createElement('span');
+            span.textContent = r.text;
+            span.style.color = r.color;
+            this.readings.append(span);
+        }
         const lines = input.caption ? [input.caption, ...input.notes] : [...input.notes];
         this.extra.textContent = lines.join('\n');
         this.extra.style.color = theme.textMuted;