Charting Components
Relevant source files
The following files were used as context for generating this wiki page:
The Charting Components in the Rabid Raccoon project provide high-performance, real-time visualisations of Micro E-mini S&P 500 (MES) futures and other market assets. These components range from lightweight SVG sparklines used in dashboard tiles to complex, interactive financial charts powered by industry-standard libraries like lightweight-charts.
These components serve three primary purposes: real-time monitoring of live price action via Server-Sent Events (SSE), technical analysis involving pattern detection (Fibonacci, Measured Moves, Swing Points), and AI-driven chart interpretation using computer vision.
Sources: src/components/LiveMesChart.tsx, src/components/TechChart.tsx, src/components/Sparkline.tsx
Core Component Architecture
The charting system is modularized into three distinct tiers based on the complexity of the data representation required.
1. Live Interactive Charts (LiveMesChart)
The LiveMesChart component is the primary interface for real-time MES price action. It uses lightweight-charts to render candlesticks and integrates custom primitives for advanced trading setups like "Break-Hook-Go" (BHG).
- Real-time Data Flow: The component establishes an
EventSourceconnection to/api/live/mes15m. It handles two types of SSE messages:snapshot(for initial data backfill) andupdate(for incremental price movements). - Custom Primitives: It attaches
ForecastTargetsPrimitiveandBhgMarkersPrimitiveto the chart series to render non-standard financial overlays such as take-profit (TP) zones and entry/stop lines.
Sources: src/components/LiveMesChart.tsx:181-224, src/components/LiveMesChart.tsx:234-314
2. Static Technical Charts (TechChart)
TechChart is a specialized SVG-based component designed for high-density technical analysis display. Unlike the live chart, it focuses on rendering specific geometric patterns derived from historical data.
- Visual Elements: It renders candlesticks, Fibonacci retracement levels (subtle dashed lines), Swing Highs/Lows (dots), and Measured Move paths (A→B→C→D polylines).
- Coordinate Mapping: It uses a linear scaling function
y(price)to map financial data to SVG coordinate space based on a calculated price range that includes entry, stop, and target levels.
Sources: src/components/TechChart.tsx:42-132
3. Dashboard Sparklines (Sparkline)
A lightweight SVG component used within MarketTile to show price trends over time without the overhead of a full charting library. It uses a gradient fill and a polyline to represent price movement.
Sources: src/components/Sparkline.tsx:16-56, src/components/MarketTile.tsx:84-86
Data Flow and Visual Representation
The following diagram illustrates how market data flows from the backend into the various charting components and how the user interacts with the analysis system.
The flow shows the integration of real-time streaming for visualization and the feedback loop where the chart state is captured for AI analysis.
Sources: src/components/LiveMesChart.tsx:234-314, src/app/api/analyse/chart/route.ts:89-130, src/components/AnalysePanel.tsx:68-80
AI Chart Analysis Integration
The system includes a bridge between visual charting and AI interpretation. Users can trigger an "Analyze Chart" action which captures the current state of the chart and sends it to a vision-capable AI model (Claude Opus 4.6).
| Step | Component | Action |
|---|---|---|
| Capture | LiveMesChart | useImperativeHandle exposes captureScreenshot using chart.takeScreenshot(). |
| Transmission | AnalysePanel | Converts the canvas to a base64 PNG and POSTs to /api/analyse/chart. |
| Enrichment | route.ts | Fetches 15m, 1h, and 4h OHLCV data from Prisma to provide structured context alongside the image. |
| Detection | AI Model | Identifies reversals, continuations, triangles, and channels. |
Sources: src/components/LiveMesChart.tsx:169-180, src/app/api/analyse/chart/route.ts:98-124, src/components/AnalysePanel.tsx:68-86
AI Pattern Detection Schema
The analysis returns a structured JSON object containing timeframe-specific pattern results:
{
"name": "pattern name",
"type": "reversal|continuation|triangle|line_break|channel|other",
"bias": "bullish|bearish|neutral",
"confidence": 75,
"keyLevels": [5980.50, 6010.25],
"description": "brief description"
}
Sources: src/app/api/analyse/chart/route.ts:133-146
Component Specifications
Live Chart Interaction Flow
The following sequence diagram describes the initialization and update cycle of the live chart.
Chart Visual Properties
The project uses a standard set of technical colors defined in TV (TradingView-style colors) for consistency across components.
| Property | Value / Source | Component |
|---|---|---|
| Bull Color | #26a69a | All |
| Bear Color | #ef5350 | All |
| Background | #0d1117 | TechChart, LiveMesChart |
| Plot Width | W - PAD_LEFT - PRICE_COL | TechChart |
| Bar Interval | 900 (15m) | LiveMesChart |
Sources: src/components/TechChart.tsx:19-24, src/components/LiveMesChart.tsx:32, src/components/Sparkline.tsx:10-11
Summary
The Charting Components provide a multi-layered view of market data, from high-level sparklines to detailed technical analysis. By combining real-time streaming via SSE, custom SVG rendering for complex patterns, and an AI-vision bridge, the system offers a comprehensive diagnostic toolset for futures trading. Components like LiveMesChart utilize lightweight-charts for performance, while TechChart ensures precise geometric rendering of Fibonacci and Measured Move structures.