Overlay indicators

Indicators that share the price's axis — MA(20) · EMA(50) · BBI · Bollinger · VWAP · SAR · SuperTrend all mount onto mainPane. BBI is the mean of four smas (3, 6, 12, 24), one line labelled with its windows. The band fill sits under the candles at zIndex −1, and SuperTrend alternates between two strands, an uptrend support line and a downtrend resistance line (the opposite stretch is null, so the line breaks).

Source

apps/examples/src/cases/overlays.ts — the real thing, type-checked in CI.

import { PlotBuilder, browserDeps } from "@finchart/dom";
import type { OHLC } from "@finchart/core";
import { candleSeries, priceFormat, timeTicks } from "@finchart/core";
import { legend } from "@finchart/dom";
import {
  attachBbi,
  attachBollingerBands,
  attachMovingAverage,
  attachParabolicSar,
  attachSuperTrend,
  attachVwap,
} from "@finchart/indicators";
import { fixtureCandles } from "./fixture";
import { chartHost } from "./stage";

export const title = "Overlay indicators";
export const description =
  "Indicators that share the price's axis — MA(20) · EMA(50) · BBI · Bollinger · VWAP · SAR · SuperTrend all mount onto mainPane. BBI is the mean of four smas (3, 6, 12, 24), one line labelled with its windows. The band fill sits under the candles at zIndex −1, and SuperTrend alternates between two strands, an uptrend support line and a downtrend resistance line (the opposite stretch is null, so the line breaks).";

export function mount(container: HTMLElement): () => void {
  const host = chartHost(container, 480);
  const plot = PlotBuilder.create<OHLC>(browserDeps({ autoSize: true }))
    .setSize(container.clientWidth || 900, 480)
    .setAxis({
      x: { ticks: timeTicks({ timeZone: "UTC", locale: "en-US" }) },
      y: { position: "right", format: priceFormat({ compact: true, locale: "en-US" }) },
    })
    .build(host);

  const price = plot.mainPane.addSeries({
    series: candleSeries(),
    data: fixtureCandles(),
    name: "Price",
  });

  plot.mainPane.use(attachMovingAverage({ source: price, period: 20, color: "#f59e0b" }));
  plot.mainPane.use(
    attachMovingAverage({ source: price, period: 50, type: "ema", color: "#8b5cf6" }),
  );
  plot.mainPane.use(attachBbi({ source: price, color: "#10b981" }));
  plot.mainPane.use(attachBollingerBands({ source: price, period: 20 }));
  plot.mainPane.use(attachVwap({ source: price, color: "#0ea5e9" }));
  plot.mainPane.use(attachParabolicSar({ source: price, color: "#ef4444" }));
  plot.mainPane.use(attachSuperTrend({ source: price }));

  plot.use(legend({}));

  return Object.assign(
    () => {
      plot.destroy();
      host.remove();
    },
    { requestRender: () => plot.requestRender() },
  );
}