Widgets

Widgets are forms, buttons, stat cards and tables that a script shows as HTML on top of the chart, for content that the GPU drawing calls are not suited to.

widgets: (s, ctx) => [
  {
    id: "stats",
    placement: { type: "Corner", corner: "TopRight" },
    widgets: [
      { type: "StatCard", label: "Range", value: s.range.toFixed(2) },
      { type: "Button", label: s.pinned ? "Unpin" : "Pin", onClick: () => (s.pinned = !s.pinned) },
    ],
  },
],

PanelsCopy Anchor Link

widgets returns panels. Each panel stacks its widgets vertically at one place:

• { type: "Corner", corner }: a corner of the pane (TopLeft, TopRight, BottomLeft, BottomRight).
• { type: "Anchor", time, price }: follows a chart point as the chart pans. Hidden when outside the pane. Chart surfaces only.
• { type: "Rect", rect }: a rect in pane px, e.g. a layout inside a Canvas.

Keep each panel's id stable, so inputs keep their focus between updates.

WidgetsCopy Anchor Link

Button, Toggle, Select, NumberInput, TextInput, Text, StatCard, Table (virtualized, sortable columns), List, Badge, Progress. tone (Neutral, Positive, Negative, Warning) colors text, badges and stat cards. Full list: Widgets reference.

UpdatesCopy Anchor Link

• widgets runs after every state change: handlers, events, widget callbacks.
• Callbacks (onClick, onChange, onRowClick) run like handlers: they may change state, the chart redraws after them.
• A panel whose content did not change is not re-rendered, so returning the same panels each time is cheap.

onHover can return a widget as its tooltip, too.

See Session stats.