Charts

tradingthings Create

TypeScript scripts that read any market data, keep their own state and draw anything on the chart.

A Create script is one TypeScript file. It subscribes to data streams (bars, order flow, trades, the order book, your own API), keeps state that its handlers update, and draws every frame with the same GPU calls our own chart uses. It can react to the mouse, add right-click menu entries and show form widgets.

Our volume profiles, footprint, TPO and liquidity heatmap are Create scripts. Anything they do, your script can do.

Two things you can build

Both use the same API. The concepts and the API reference apply to both.

A script at a glance

import { defineScript, input } from "@tradingthings/tt-create";

export default defineScript({
  name: "Last price",                                   // shown in the indicator list
  surface: { kind: "ChartOverlay" },                    // where it draws
  inputs: { color: input.color({ default: "#f59e0b" }) }, // settings, saved per chart
  subscribe: (ctx) => ({ bars: ctx.market.bars() }),    // named data streams
  state: () => ({ last: null as number | null }),       // fresh on every start
  on: {
    bars: (s, { bar }) => {                             // one handler per stream
      s.last = bar.close;
    },
  },
  draw: (s, frame, g, ctx) => {                         // every frame, reads state only
    if (s.last === null) return;

    const y = frame.priceToY(s.last);

    g.line(0, y, frame.width, y, { color: ctx.inputs.color, width: 1 });
  },
});

Writing scripts

  • "Add indicator", then "New script" in the indicator list, or "Create your own chart" in the chart type menu. The editor type checks against this API as you type.
  • Save compiles and runs the script. Every chart that uses it reloads it.
  • Scripts import only @tradingthings/tt-create at runtime. Type-only imports (import type) from @tradingthings/tt-chart-lib are fine.
  • Let an AI agent write them: the AI skill teaches Claude Code, Codex and others the API.

On this page