Home›Dashboard›Financial Candlestick Chart (OHLC)
NEWPOPULARDashboard

Financial Candlestick Chart (OHLC)

Financial candlestick stock chart featuring high/low wicks, bullish/bearish real bodies, moving averages, and custom Recharts SVG shapes.

Loading chart…
#candlestick#ohlc#financial#trading#stock#crypto
Customization Guides & Code Snippets

◆Mapping Price Coordinates to SVG Pixels with yAxis.scale

Inside the custom shape callback, leverage yAxis.scale(price) to calculate accurate pixel coordinates for the high/low wick lines and the open/close rectangular candle bodies.

const yOpen = yAxis.scale(open);
const yClose = yAxis.scale(close);
const yHigh = yAxis.scale(high);
const yLow = yAxis.scale(low);

◆Bullish vs Bearish Candle Coloring

Conditionally color candle fills and wicks: Emerald (#00e5a0) for upward close >= open sessions, and Crimson (#ff6b6b) for downward close < open sessions.

const isUp = close >= open;
const fill = isUp ? '#00e5a0' : '#ff6b6b';
When to use a Financial Candlestick Chart (OHLC)

A Financial Candlestick Chart (OHLC) is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Building analytics overview pages with multiple metrics
  • ✓SaaS product dashboards showing user activity
  • ✓Business intelligence reporting screens
  • ✓Admin panels with KPI summaries
Tips for Recharts Financial Candlestick Chart (OHLC)
TIP 1Use a grid layout with consistent card sizes for visual rhythm
TIP 2Always show a time period selector (Today / 7d / 30d / 90d)
TIP 3Load charts progressively — KPI cards first, then charts
TIP 4Use skeleton loaders while data is fetching to prevent layout shift
TIP 5Keep color usage minimal — pick 2-3 accent colors maximum
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

Can you make a candlestick chart in Recharts (recharts candlestick)?

While Recharts does not provide a native <CandlestickChart> component, you can build a production-grade candlestick chart by combining a <ComposedChart> with a custom <Bar shape={<CandlestickShape />}> that renders SVG high/low wicks and open/close bodies scaled via yAxis.scale().

How do you build a candlestick chart in React (candlestick chart react)?

In React, calculate the pixel coordinates for open, high, low, and close prices inside a custom SVG component. Draw a vertical <line> for the wick and a <rect> for the real body, coloring upward candles green (#00e5a0) and downward candles red (#ff6b6b).

How do you add moving averages (SMA) to a candlestick chart in Recharts?

Render a <Line type='monotone' dataKey='ma' stroke='#ffd166' strokeWidth={2} dot={false} /> directly inside the <ComposedChart>. Recharts will smoothly overlay the trendline on top of your candlesticks.

Related Charts