Documentation Index Fetch the complete documentation index at: https://docs.agg.market/llms.txt
Use this file to discover all available pages before exploring further.
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 , })) } /> ); }
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. 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. 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.
