Building Native Trading Charts for Android
Article Summary
The Groww Engineering Team just open-sourced their playbook for building trading charts that render 2,000+ candlesticks at 60fps. No third-party libraries, pure native Android.
Groww's Android team built a custom candlestick charting engine from scratch for their trading app. They treated it like building a mini graphics engine, using a single Canvas with modular renderers for candles, volume bars, and technical indicators like RSI and moving averages.
Key Takeaways
- Single Canvas architecture with pluggable renderers avoids overdraw and sync issues
- Windowing renders only visible regions, Matrix handles zoom transforms without recalculation
- Lazy computation engine with Coroutines parallelizes heavy indicator math like RSI
- Real-time market ticks update only the last candle using StateFlow propagation
- Achieved stable 60fps with thousands of candles plus multiple technical indicators
By building a custom graphics engine with windowed rendering and Matrix-driven transformations, Groww achieved 60fps performance on complex financial charts with real-time data.
About This Article
Groww's charting system had to process thousands of market data ticks arriving every few milliseconds. At the same time, it needed to keep crosshair overlays and tooltips responsive and pixel-accurate without slowing down.
The team built incremental rendering that only updated the latest candle with each tick. They used Android Matrix to map touch coordinates precisely to data indices, and kept overlay rendering separate from candle rendering.
This approach made crosshair and tooltip interactions smooth and responsive, staying in sync with real-time market data. The charting system maintained 60fps performance across the board.
