Candlestick chart

ChartCandlestick draws one candle per period from its open, high, low and close: each point is { x, y: [open, high, low, close] }. Use it for prices, or any value whose range within a period matters.

Preview Code

Connecting to the DMS preview…

static chartCandlestick = ChartCandlestick({
  title: "Token price",
  height: "260px",
  xaxisType: "category",
  staticDataset: [
    {
      name: "Price",
      data: [
        { x: "Mon", y: [51, 58, 49, 56] },
        { x: "Tue", y: [56, 60, 53, 54] },
        { x: "Wed", y: [54, 55, 47, 49] },
        { x: "Thu", y: [49, 57, 48, 56] },
        { x: "Fri", y: [56, 63, 55, 61] },
      ],
    },
  ],
  type: "candlestick",
});

Usage

import { ChartCandlestick } from "@antelopejs/interface-dms/base/chart";

static price = ChartCandlestick({
  title: "$billing.credits.price",
  fetchUrl: "/api/billing/credits/ohlc",
  xaxisType: "datetime",
});

The route answers { series } in the shape listed under Data shapes. Wrap the chart in a ChartCard to add a headline value and a comparison.

Options

Recipes

Click a candle

POINT_CLICK carries the candle's tuple in values (value is null), so a watched action can open the period it stands for.

Next steps