Real-Time Charts

Works in browsers, Node.js, and React Native. Bring your own chart library.

1. Set up the client

import { createAggClient } from "@agg-build/sdk";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market/ws",
});

2. Fetch historical bars

const history = await client.getChartBars({
  venueMarketOutcomeId: "your-outcome-id",
  resolution: "5m",
  from: Date.now() - 24 * 60 * 60 * 1000,
  to: Date.now(),
});

const historicalBars = history.data;

3. Request bars with countBack

const trailingBars = await client.getChartBars({
  venueMarketOutcomeId: "your-outcome-id",
  resolution: "5m",
  to: Date.now(),
  countBack: 300,
});

4. Render with your chart library

const chartData = historicalBars.map((c) => ({
  time: c.t / 1000,
  open: c.o,
  high: c.h,
  low: c.l,
  close: c.c,
  volume: c.v ?? undefined,
}));

yourChart.setData(chartData);

5. Optional live overlay

import { CandleBuilder } from "@agg-build/sdk";

const builder = new CandleBuilder();
const ws = client.createWebSocket({
  onSnapshot: (_outcomeId, book) => {
    if (book.midpoint != null) builder.addMidpoint(book.midpoint, book.timestamp);
  },
  onDelta: (_outcomeId, book) => {
    if (book.midpoint != null) builder.addMidpoint(book.midpoint, book.timestamp);
  },
  onTrade: (trade) => {
    builder.addTrade(trade.price, trade.size, trade.timestamp);
  },
});

// Both live subscriptions and historical bars are keyed by outcome ID.
ws.subscribe("your-outcome-id", "orderbook");
ws.subscribe("your-outcome-id", "trades");