Build a High-Performance Candlestick Chart in React Native

Why a candlestick chart needs a GPU canvas

A candlestick chart is a performance problem disguised as a drawing. A real one shows hundreds or thousands of candles, updates the latest one live, and lets the user pan and pinch-zoom through history, and that combination is exactly what breaks a naive implementation. If each candle is a view or an SVG node, the render tree balloons and the chart drops frames past a few hundred candles, and panning turns to slideshow. The fix is to stop creating one element per candle and draw the whole chart on a GPU canvas, which is what react-native-skia, with more than 1,000,000 weekly downloads, is built for.

Framing it as a canvas problem rather than a component problem changes everything downstream. You are not laying out thousands of little views; you are drawing pixels, and that is why Skia stays smooth where SVG gives up.

How a Skia candlestick chart is built

On a Skia canvas, a candlestick is just shapes: a rectangle for the body between the open and close, and a thin line for the high-low wick, colored by whether the candle closed up or down. You compute the screen position of each candle from the visible time range and price range, then draw only the candles in view, which keeps the work proportional to the screen rather than the dataset. Pan and zoom are gestures that change that visible range, and to stay smooth they run on the UI thread, with react-native-gesture-handler driving the transform so the chart redraws at sixty frames per second while the user drags. The same canvas-drawing skill is behind converting raw SVG to React Native Skia.

The live candle is the last detail. The most recent candle updates as new ticks arrive, so you redraw just that candle in place rather than rebuilding the chart, which keeps a streaming chart cheap.

The rendering approaches compared

There are three realistic ways to render a candlestick chart, and they diverge sharply at scale.

Rendering approach	Performance at scale	Gesture smoothness	Effort
SVG or one view per candle	Drops frames past a few hundred candles	Janky pan and zoom	Low to start, hits a wall fast
Skia GPU canvas	Smooth at thousands of candles	Smooth pan and zoom on the UI thread	Medium, you draw on a canvas
Native chart library	Usually good, but opaque	Good, with less control	Low, but hard to customize

The SVG route is the one that feels fine in a demo and fails on real history, because the render cost grows with the number of candles. A native chart library can perform well but is often a black box that resists the custom crosshair, overlays, and styling a trading UI needs. The Skia canvas is the route that scales and stays yours, which is why serious React Native charts converge on it. A free VP0 Skia candlestick template starts you on that canvas, with the candles, the pan and zoom, the crosshair, and the live-update structure already shaped and exposed through a machine-readable source page, so an agent like Cursor or Claude Code extends a performant chart and you bind your market data rather than fighting the rendering. Related fintech charting appears in a crypto profit and loss chart and a blood-pressure log chart.

The interactions that make a chart usable

A candlestick chart earns its place through interaction, and each piece has a performance cost to respect. Pinch-to-zoom changes the time scale, showing more or fewer candles, and it has to stay smooth as the visible count changes. Panning scrolls through history and should load older candles before the user reaches the edge. A crosshair follows the finger and reads out the price and the candle’s open, high, low, and close at that point, which means hit-testing against the data on every move, kept cheap by working from the visible slice. And overlays like a moving average draw as additional paths on the same canvas rather than as separate views. Done on a canvas, all of this stays fluid; done with per-candle views, each addition makes the jank worse.

This is the difference between a chart people actually use to read a market and one they open once. Smoothness under interaction is the feature, not a finishing touch.

Keeping it honest: a chart is not advice

A candlestick chart presents data, and it should be clear about what it is not. It is a visualization, not financial advice, and the app is not a brokerage unless it is built and licensed as one. So the chart displays market data accurately, labels its source and timeframe, and avoids implying a prediction or a recommendation from the shapes on screen. Live data should be honest about staleness, showing when a feed is delayed rather than presenting old prices as current. The screen is an interface to information, and the responsibility for what a user does with it stays with the user.

Keeping that line clear is part of building a trustworthy fintech surface. A beautiful chart that nudges users toward a trade it implies is a different and riskier product than one that simply shows the market well.

Key takeaways: a high-performance candlestick chart

• It is a canvas problem, not a component one. Draw the chart on a GPU canvas, not one view per candle.
• Skia scales where SVG fails. Thousands of candles and smooth pan-zoom need a GPU canvas.
• Draw only what is visible. Compute candles from the visible range so work tracks the screen, not the dataset.
• Gestures run on the UI thread. Pan and zoom stay at sixty frames per second when the transform is off the JS thread.
• Start from a Skia chart template. A free VP0 candlestick template gives an agent a performant base to bind data to.

What to choose

For a candlestick chart that handles real history and live updates, render it on a Skia canvas rather than with SVG or per-candle views, because only a GPU canvas stays smooth at thousands of candles and under pan and zoom. A free VP0 Skia candlestick template gives you the candles, the gestures, the crosshair, and the live-update structure, so an agent extends a performant chart and you bind your market feed, keeping the chart a clear visualization rather than implying advice. A native chart library is a fair choice if you want minimal effort and can accept less control, but SVG is the one path that looks fine in a demo and fails on a real dataset.

Frequently asked questions

Why use Skia for a candlestick chart in React Native? Because a candlestick chart with real history and live updates is a performance problem, and Skia draws the whole chart on a GPU canvas instead of creating a view or SVG node per candle. That keeps it smooth at thousands of candles and under pinch-to-zoom and panning, where an SVG or per-view chart drops frames past a few hundred candles. You draw the candle bodies and wicks as shapes, render only what is visible, and run the pan and zoom on the UI thread, which is what keeps a streaming chart fluid.

Where can I get a high-performance candlestick chart template? The most reliable option is a Skia-based template rather than an SVG chart that will not scale. A free VP0 Skia candlestick template provides the candles, the pan and zoom, the crosshair, and the live-update structure, with a machine-readable source page, so an agent like Cursor or Claude Code extends a performant chart. You then bind your market data, since the template is the rendering and interaction layer and the data feed is yours. It is built for real history and streaming updates rather than a handful of demo candles.

Why does my React Native candlestick chart lag? Almost always because it creates one element per candle, as SVG nodes or views, so the render tree grows with the dataset and panning rebuilds it. Past a few hundred candles, frames drop and gestures stutter. Drawing the chart on a Skia canvas fixes this by rendering pixels instead of components, drawing only the visible candles, and running the pan and zoom transform on the UI thread. If a chart lags on real history, the rendering approach is the cause, not the data.

Is a candlestick chart app financial advice? No, a candlestick chart is a visualization of market data, not advice, and an app showing one is not a brokerage unless it is built and licensed as one. A trustworthy chart displays data accurately, labels its source and timeframe, is honest about delayed or stale feeds, and avoids implying a prediction or recommendation from the shapes on screen. The responsibility for any decision stays with the user. Keeping that separation clear is part of building a financial interface responsibly.

How do I add pan, zoom, and a crosshair to a Skia chart? Treat them as changes to the visible time and price range, computed cheaply from the data slice on screen. Pinch-to-zoom changes how many candles are visible, panning scrolls through history and prefetches older candles before the edge, and a crosshair hit-tests the visible slice to read out the open, high, low, and close at the finger. Run the gestures on the UI thread with a gesture handler so the canvas redraws smoothly, and draw overlays like a moving average as extra paths on the same canvas rather than separate views.