robinhood/docs/LIVE_CHART_IMPLEMENTATION.md

Live Chart Implementation Summary

Overview

The gold trading chart has been upgraded to display live price updates without requiring manual page refreshes. The chart now automatically updates every 10 seconds with the latest gold prices.

What Was Implemented

1. Backend Live Price Endpoint

File: backend/app/api/market.py

Added a new /api/market/gold/live endpoint that:

• Fetches the current gold price in real-time
• Returns OHLC (Open, High, Low, Close) data with simulated micro-movements
• Timestamps data to the current minute

2. Frontend API Integration

File: frontend/src/services/api.ts

Added getLivePrice() method to the marketDataApi service to fetch live price data from the backend.

3. Custom React Hook for Live Updates

File: frontend/src/hooks/useLivePrice.ts

Created a reusable useLivePrice hook that:

• Polls the backend every 10 seconds (configurable)
• Maintains connection state
• Handles errors gracefully
• Provides callbacks for updates and errors
• Can be enabled/disabled dynamically

4. Chart Component Updates

File: frontend/src/components/GoldChart.tsx

Modified the GoldChart component to:

• Accept a liveUpdate prop for new price data
• Use the update() method instead of setData() to append new candles
• Update the current price display in real-time
• Maintain smooth chart animations without full reloads

5. App Integration

File: frontend/src/App.tsx

Integrated live updates into the main app:

• Added the useLivePrice hook with 10-second polling
• Connected live updates to the chart component
• Added a visual "Live" indicator in the header with a pulsing green dot
• Live price updates also sync with the current price state for trading controls

Key Features

✅ Real-Time Updates

• Chart updates automatically every 10 seconds
• No manual refresh required
• Smooth animations as new data arrives

✅ Visual Feedback

• "Live" badge with animated pulse indicator in the header
• Shows connection status
• Current price updates in sync with chart

✅ Efficient Data Handling

• Polling-based approach (more reliable than WebSockets for this use case)
• Only fetches the latest candle, not the entire history
• Uses lightweight-charts' update() method for optimal performance

✅ Error Handling

• Graceful degradation if backend is unavailable
• Connection status tracking
• Automatic retry on errors

How It Works

1. Initial Load: When the app starts, it loads historical price data as before
2. Live Polling: Every 10 seconds, the hook fetches the latest price tick
3. Chart Update: The new candle is appended to the chart using update()
4. Price Sync: Current price state is updated for trading controls
5. Visual Feedback: "Live" indicator shows active connection

Configuration

The polling interval can be adjusted in App.tsx:

const { latestPrice, isConnected } = useLivePrice({
  enabled: true,
  interval: 10000, // 10 seconds (adjustable)
  onUpdate: (priceData) => {
    setCurrentPrice(priceData.close);
  },
});

Testing

The implementation is now running at:

• Frontend: http://localhost:3000/
• Backend: http://localhost:8000/
• Live Endpoint: http://localhost:8000/api/market/gold/live

You should see:

1. The chart loads with historical data
2. A green "Live" badge appears in the header
3. Every 10 seconds, a new candle appears on the chart
4. The current price updates automatically

Future Enhancements

Potential improvements:

• Add WebSocket support for even faster updates
• Make polling interval user-configurable
• Add tick-by-tick updates for intraday timeframes
• Display last update timestamp
• Add reconnection logic with exponential backoff