Create an indicator

An indicator is a script on one of three surfaces:

1. Open the editorCopy Anchor Link

In the indicator list at the top left of the chart, open "Add indicator" and pick "New script". The editor opens next to the chart with a moving average template, close to the script below.

2. Read the scriptCopy Anchor Link

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

/** Simple moving average of the chart's closes, as one line. */
export default defineScript({
  name: "Moving average",
  surface: { kind: "ChartOverlay" },
  inputs: {
    length: input.int({ default: 20, min: 1, label: "Length" }),
    color: input.color({ default: "#f59e0b", label: "Color" }),
  },
  subscribe: (ctx) => ({
    // `warmup` loads 20 bars before the chart's first bar, so the line starts at it.
    bars: ctx.market.bars({ warmup: 20 }),
  }),
  state: () => ({}),
  draw: (_s, frame, g, ctx) => {
    const { time, close, length: count } = ctx.streams.bars;
    const { length, color } = ctx.inputs;
    const xy: number[] = [];
    let sum = 0;

    for (let i = 0; i < count; i += 1) {
      sum += close[i]!;

      if (i >= length) sum -= close[i - length]!;

      if (i < length - 1 || time[i]! < frame.visibleTime.from || time[i]! > frame.visibleTime.to) continue;

      const x = frame.timeToX(time[i]!);

      if (x !== null) xy.push(x, frame.priceToY(sum / length));
    }

    g.polyline(xy, { color, width: 2 });
  },
});

• inputs become the settings dialog. ctx.inputs.length is a number because its default is one.
• subscribe asks for the chart's bars. warmup: 20 loads 20 bars before the chart's first one, so the line starts at the left edge.
• draw reads the bars from ctx.streams.bars, typed arrays of every bar received so far, and draws one polyline. It skips bars outside frame.visibleTime.
• frame.timeToX returns null when there are no bars. Always check it.

3. SaveCopy Anchor Link

Save (Ctrl+S) type checks, compiles and adds the script to the chart.

4. Change itCopy Anchor Link

Change width: 2 to width: 3 and save. The chart reloads the script. Errors show in the editor's Problems panel with their line, runtime errors also in the indicator list. ctx.log(...) writes to the Console panel.

NextCopy Anchor Link

• Keep state across events: State and draw.
• More data: Streams and history.
• Mouse, tooltips, menus: Interaction.
• Complete scripts: Examples.