Real-Time Charts

AGG chart history is keyed by VenueMarketOutcome.id and comes from GET /charts/bars. 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 stored resolutions:

Interval	Code
1 minute	`"1m"`
5 minutes	`"5m"`
1 hour	`"1h"`
1 day	`"1d"`

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