Graphics

All coordinates are pane px. Colors are CSS colors. A LineStyle is { color, width, dash? }, dash being [on, off] px.

GraphicsCopy Anchor Link

OptionsCopy Anchor Link

/** Hit area in pane px. `Line` hits within `tolerance` px, 4 when omitted. */
export type HitShape =
  | { readonly type: "Rect"; readonly x: number; readonly y: number; readonly width: number; readonly height: number }
  | { readonly type: "Circle"; readonly x: number; readonly y: number; readonly radius: number }
  | {
      readonly type: "Line";
      readonly x0: number;
      readonly y0: number;
      readonly x1: number;
      readonly y1: number;
      readonly tolerance?: number;
    }
  /** Closed outline through `xy` (x0, y0, x1, y1, …). */
  | { readonly type: "Polygon"; readonly xy: readonly number[] };

TexturesCopy Anchor Link

g.texture draws a grid of values as one GPU quad: millions of cells for the cost of one rect. Create the grid once with ctx.createGrid(columns, rows), write values in handlers, draw it in draw.

• grid.set(column, row, value), grid.setColumn(column, values): write cells. Row 0 is the top.
• grid.pushColumn(values): append a column on the right and drop the leftmost, a ring buffer for time scrolling. Only changed columns upload to the GPU.
• NaN is transparent.

scale is { type: "Linear" | "Log", min, max }. Log needs min > 0, e.g. for order sizes. Keep the same stops array across frames: its color table is cached per array.

See Liquidity heatmap.