Candlestick Chart Implementation in a Mobile Exchange App
We often encounter situations where a client needs an exchange chart with 60fps performance and smooth zooming over 10,000+ candles. Off-the-shelf libraries either lack candlestick support or require expensive licenses. Our team developed a native solution on Flutter using CustomPainter that bypasses these limitations and saves on licenses. With over 7 years of experience in mobile development and 50+ implemented projects involving custom charts, we guarantee high quality.
Candlestick chart is technically the most complex chart type for a mobile app. Not because of OHLC math, but due to the set of requirements mandatory for exchange UX: smooth zoom/pan over 10,000+ candles, crosshair with coordinates on touch, real-time updates without full redraw, timeframe switching without flickering, correct orientation handling. All these requirements together cause most ready-made libraries to break. A native Canvas implementation delivers 3x smoother scrolling compared to WebView on older devices.
Why Standard Libraries Don't Fit for Candlestick
fl_chart — no candlestick out of the box. You can hack it with custom BarChartRod, but that's a hack without zoom and acceptable performance.
syncfusion_flutter_charts — has SfCartesianChart with CandleSeries, supports zoom/pan, data updates. It's a workable option for most tasks. But the commercial license ($995/year per developer) makes it impractical for startups. For a team of two developers, the license would cost $1,990 per year.
TradingView Lightweight Charts in WebView — the most common approach in production apps of major exchanges. The library is built for production trading UI, optimized for large data volumes, supports all needed features. Overhead from WebView exists but is negligible on modern devices. More: TradingView Lightweight Charts.
| Approach | Timeline | Performance | License | Suitable For |
|---|---|---|---|---|
| WebView + TradingView | 1-2 weeks | 30fps on old devices | Free | Quick launch |
| Native CustomPainter | 3-5 weeks | 60fps on all devices | No license | Core feature |
| Syncfusion Flutter Charts | 1-2 weeks | 45fps | $995/year | Prototypes |
Which Approach to Choose: WebView or Native?
If the chart is a secondary element and time to launch is critical, choose WebView with TradingView. If the chart is the central screen of the app, native implementation delivers 3x smoother scrolling on older devices. We help you choose during consultation — we'll analyze your requirements and propose the optimal solution.
| Criteria | WebView + TradingView | Native CustomPainter |
|---|---|---|
| Time to MVP | 1-2 weeks | 3-5 weeks |
| Performance | 30fps (old devices) | 60fps (all) |
| Customization flexibility | Limited | Full |
| Network dependency | None | None |
How to Implement Real-Time Updates Without Lag?
WebSocket connection to the exchange provides tick data. On receiving a new tick, we update only the last candle without rebuilding the entire list:
void onTickReceived(Tick tick) {
if (_candles.isEmpty) return;
final last = _candles.last;
_candles[_candles.length - 1] = last.copyWith(
high: max(last.high, tick.price),
low: min(last.low, tick.price),
close: tick.price,
volume: last.volume + tick.volume,
);
if (tick.timestamp >= last.timestamp + timeframe.milliseconds) {
_candles.add(Candle.fromTick(tick));
if (_candles.length > maxCandlesInMemory) _candles.removeAt(0);
}
_chartController.notifyListeners();
}
ValueNotifier + ValueListenableBuilder only around CustomPaint — only the canvas repaints, not the AppBar or side panels.
How to Ensure Smooth Zoom on 10,000 Candles?
The main challenge is not redrawing the entire chart on every zoom. We use virtualization: only visible candles are rendered, and on zoom we recalculate the visible range. Additionally, we cache prices and adjust candles per pixel based on scale.
getVisibleRange(int totalCandles, double canvasWidth) {
final visibleCandlesCount = (canvasWidth / (candleWidth * scale)).floor();
final start = ((totalCandles - visibleCandlesCount) * offset / maxOffset).clamp(0, totalCandles - visibleCandlesCount);
return Range(start, start + visibleCandlesCount);
}
This approach guarantees 60fps even on devices with Android 10 and iOS 12.
Native Implementation on Flutter via CustomPainter
For apps where the chart is the main screen, native implementation delivers 60fps on any device. Key components:
Data Structure
class Candle {
final int timestamp;
final double open;
final double high;
final double low;
final double close;
final double volume;
bool get isBullish => close >= open;
}
Render Pipeline
CustomPainter with shouldRepaint — called on every data change. To avoid repainting the entire chart on a new candle:
class CandlestickPainter extends CustomPainter {
final List<Candle> candles;
final CandleChartController controller;
@override
void paint(Canvas canvas, Size size) {
final visibleRange = controller.getVisibleRange(candles.length, size.width);
final visibleCandles = candles.sublist(visibleRange.start, visibleRange.end);
final priceRange = _calculatePriceRange(visibleCandles);
final candleWidth = size.width / visibleCandles.length * controller.scale;
for (var i = 0; i < visibleCandles.length; i++) {
_drawCandle(canvas, visibleCandles[i], i, candleWidth, size.height, priceRange);
}
if (controller.crosshairVisible) {
_drawCrosshair(canvas, controller.crosshairPosition, size);
}
}
// ... _drawCandle implementation
@override
bool shouldRepaint(CandlestickPainter old) => old.candles != candles || old.controller != controller;
}
Gesture Handling: Pan and Pinch-Zoom
GestureDetector with onScaleStart/Update for pinch-zoom, onPanUpdate for scrolling along the time axis. Clamp scale — important: without it, users could zoom to a single candle filling the entire screen.
GestureDetector(
onScaleUpdate: (details) {
setState(() {
controller.scale = (controller.scale * details.scale).clamp(0.5, 10.0);
controller.offset += details.focalPointDelta.dx;
});
},
child: CustomPaint(painter: CandlestickPainter(candles, controller)),
)
Crosshair on Long Press
GestureDetector(
onLongPressStart: (details) {
controller.crosshairVisible = true;
controller.crosshairPosition = details.localPosition;
final candleIndex = controller.positionToIndex(details.localPosition.dx, candles.length);
if (candleIndex < candles.length) _showCandleInfo(candles[candleIndex]);
},
onLongPressMoveUpdate: (details) {
controller.crosshairPosition = details.localPosition;
},
onLongPressEnd: (_) => controller.crosshairVisible = false,
)
Timeframe Switching
Buttons 1m / 5m / 15m / 1h / 4h / 1D / 1W. On switch, we request a new set of candles and apply a crossfade animation to eliminate flickering. Use AnimatedSwitcher with timeframe as key.
Technical Indicators (Optional)
MA, EMA, Bollinger Bands, RSI — each drawn as an additional layer in CustomPainter. RSI and MACD are placed on a separate lower CustomPaint with fixed height and shared time axis with the main chart.
Work Process for Candlestick Chart
- Analysis — define performance requirements, list of indicators, timeframes.
- Design — choose approach (WebView or native), design render architecture.
- Implementation — write code, connect WebSocket, implement gestures.
- Testing — test on 10+ real devices, including older models.
- Deployment — publish to App Store / Google Play, provide source code.
What's Included
- Implementation of candlestick CustomPainter or TradingView WebView integration
- Pan/zoom gestures with proper limits
- Crosshair with info panel
- Real-time updates via WebSocket
- Timeframe switching
- Technical indicators (MA, EMA, Bollinger Bands — upon agreement)
- Volume bars on lower panel
Timeline
WebView + TradingView Lightweight Charts: 1–2 weeks (including WebSocket integration). Native CustomPainter with full exchange chart functionality: 3–5 weeks. Cost is calculated individually. Get a consultation — contact us to evaluate your project.