Real-Time Charts

AGG chart history is keyed by VenueMarketOutcome.id. GET /charts/bars supplies canonical API history and mutable tails; GET /charts/history/manifest supplies authorized references to immutable finalized objects served directly by CDN. See Market-data API for delivery states, signed-URL handling, read quotas, and native module Worker integration. That endpoint returns one canonical bar series for a single outcome and resolution using TradingView-style [from, to) and countBack semantics. Aggregate charts are not supported.

SDK (vanilla JS/TS)
Hooks (React)
UI Components

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");

See the Setup Guide for the one-time AggProvider and QueryClientProvider setup. This recipe starts at the hook layer.

1. Use `useMarketChart`

import { useMarketChart } from "@agg-build/hooks";

function MarketChart({ venueMarketOutcomeId }: { venueMarketOutcomeId: string }) {
  const { data, isLoading } = useMarketChart({
    marketId: venueMarketOutcomeId,
    interval: "5m",
    startTs: Date.now() - 24 * 60 * 60 * 1000,
    endTs: Date.now(),
  });

  if (isLoading) return <div>Loading...</div>;

  const primaryVenue = data?.primaryVenue;
  const candles = primaryVenue ? data.venues[primaryVenue]?.candles ?? [] : [];

  return (
    <YourChart
      data={candles.map((c) => ({
        time: c.time,
        open: c.open,
        high: c.high,
        low: c.low,
        close: c.close,
      }))}
    />
  );
}

2. Use `countBack` for scrollback

function TrailingChart({ venueMarketOutcomeId }: { venueMarketOutcomeId: string }) {
  const { data } = useMarketChart({
    marketId: venueMarketOutcomeId,
    interval: "5m",
    endTs: Date.now(),
    countBack: 500,
  });

  const primaryVenue = data?.primaryVenue;
  const candles = primaryVenue ? data.venues[primaryVenue]?.candles ?? [] : [];

  return <YourChart data={candles} />;
}

3. Live overlays remain optional

useMarketChart() returns canonical historical bars under the hook’s primaryVenue entry. If you need a forming bar on top of that history, layer on live orderbook/trade updates with the SDK CandleBuilder.

Drop-in React components for charts, orderbooks, and full event/market layouts.

Event Market Page

import { EventMarketPage } from "@agg-build/ui/pages";

function EventPage({ eventId }) {
  return <EventMarketPage eventId={eventId} />;
}

This renders a hero chart plus stacked market detail cards with live charts and orderbooks.

Market Details card

import { MarketDetails } from "@agg-build/ui/events";

function MarketCard({ event, marketId }) {
  return <MarketDetails event={event} marketId={marketId} defaultTab="graph" />;
}

Standalone chart

import { LineChart } from "@agg-build/ui/primitives";

function Chart({ series }) {
  return <LineChart series={series} height={320} chartType="candlestick" live />;
}

Browse the live Event Market Page reference and Market Details reference.

Supported resolutions

GET /charts/bars supports four resolutions. The SDK takes the human-readable form and translates it; if you are calling the REST endpoint directly you must send the wire value, and the parameter is named resolution — there is no interval parameter.

Bar size	SDK (`resolution`)	REST (`?resolution=`)
1 minute	`"1m"`	`1`
5 minutes	`"5m"`	`5`
1 hour	`"1h"`	`60`
1 day	`"1d"`	`1D`

curl -H "x-app-id: $APP_ID" \
  "https://api.agg.market/charts/bars?venueMarketOutcomeId=$ID&resolution=60&from=$FROM_MS&to=$TO_MS"

from and to are epoch milliseconds; to is required. An unrecognised query parameter is ignored rather than rejected, so a request that sends interval=1h silently falls back to the default 5-minute resolution.

Bars are not stored. Every request is served live from the venue’s own historical-price API, so the depth of history available depends on the venue. When a venue returns no bars for the requested window, data is empty and meta.lastBarOpenTime / meta.staleSeconds are null — overlay the live WS midpoint to draw a line for a market that has not traded yet.

How it works

GET /charts/bars            -> Canonical historical bars   -> Initial render
Optional live WS overlay    -> CandleBuilder / hooks       -> Forming bar updates

For wire-level details, resnapshot behavior, and authenticated streaming, see WebSocket Protocol.

WebSocket Protocol

Subscribe, authenticate, handle heartbeats, and reconnect safely.

Real-Time Orderbook

Reuse the same orderbook stream for depth views and chart inputs.

User Notifications

Handle authenticated order and balance events on the same socket.

Getting Started

Components

REST API

WebSocket Protocol

Authentication

Account

Funding & Execution

Webhooks

Discovery

Real-Time Data

Releases

1. Set up the client

2. Fetch historical bars

3. Request bars with `countBack`

4. Render with your chart library

5. Optional live overlay

1. Use `useMarketChart`

2. Use `countBack` for scrollback

3. Live overlays remain optional

Event Market Page

Market Details card

Standalone chart

Supported resolutions

How it works

WebSocket Protocol

Real-Time Orderbook

User Notifications

​1. Set up the client

​2. Fetch historical bars

​3. Request bars with countBack

​4. Render with your chart library

​5. Optional live overlay

​1. Use useMarketChart

​2. Use countBack for scrollback

​3. Live overlays remain optional

​Event Market Page

​Market Details card

​Standalone chart

​Supported resolutions

​How it works

​Related

WebSocket Protocol

Real-Time Orderbook

User Notifications

1. Set up the client

2. Fetch historical bars

3. Request bars with `countBack`

4. Render with your chart library

5. Optional live overlay

1. Use `useMarketChart`

2. Use `countBack` for scrollback

3. Live overlays remain optional

Event Market Page

Market Details card

Standalone chart

Supported resolutions

How it works

Related