CandlestickChart

Financial OHLC candlestick chart for visualizing stock prices, crypto markets, and other time-series price data. Supports volume bars, interactive tooltips, zoom and pan, and crosshair cursor.

Playground

Hover over candles to see OHLC values. Green candles indicate price increase (close > open), red candles indicate price decrease. Use mouse wheel to zoom and drag to pan. A crosshair follows your cursor for precise value reading.

<CandlestickChart
  data={data}
  theme="midnight"
  showVolume
  enableZoom
  showZoomControls
/>

Basic Usage

Import the component and provide OHLC data:

import { CandlestickChart } from '@derpdaderp/chartkit';

const data = [
  { time: 'Jan 1', open: 150.00, high: 155.50, low: 148.20, close: 153.80, volume: 2500000 },
  { time: 'Jan 2', open: 153.80, high: 158.00, low: 152.10, close: 149.50, volume: 3100000 },
  { time: 'Jan 3', open: 149.50, high: 152.30, low: 147.80, close: 151.20, volume: 2800000 },
  // ...more data
];

<CandlestickChart
  data={data}
  theme="midnight"
  height={400}
/>

With Volume Bars

Enable volume visualization with the showVolume prop:

<CandlestickChart
  data={data}
  theme="midnight"
  showVolume
  volumeHeight={0.2}  // 20% of chart height for volume
/>

Custom Colors

Override the default bullish/bearish colors:

<CandlestickChart
  data={data}
  theme="midnight"
  upColor="#00d4aa"
  downColor="#ff6b6b"
/>

Price Formatting

Format Y-axis values with a custom formatter:

// Format as currency
<CandlestickChart
  data={data}
  theme="midnight"
  formatY={(value) => `$${value.toFixed(2)}`}
/>

// Format for crypto (more decimals)
<CandlestickChart
  data={cryptoData}
  theme="midnight"
  formatY={(value) => value.toFixed(6)}
/>

Zoom and Pan

CandlestickChart supports interactive zoom and pan out of the box, making it easy to explore large datasets. This is enabled by default.

Interactions

• Mouse wheel - Scroll to zoom in/out (zooms toward cursor position)
• Click and drag - Pan left/right through the data
• Zoom controls - Use the +/- buttons in the top-right corner
• Reset button - Click "Reset" to show all data
• Crosshair - A crosshair follows your cursor for precise value reading

// Zoom and pan enabled by default
<CandlestickChart
  data={data}
  theme="midnight"
  enableZoom        // default: true
  showZoomControls  // default: true
  minVisibleCandles={10}
/>

// Disable zoom for static charts
<CandlestickChart
  data={data}
  theme="midnight"
  enableZoom={false}
/>

// Control visible range programmatically
<CandlestickChart
  data={data}
  theme="midnight"
  initialRange={[0, 30]}  // Show first 30 candles
  onRangeChange={(range) => console.log('Visible:', range)}
/>

Responsive

Use the responsive prop to auto-fill container width:

<CandlestickChart
  data={data}
  theme="midnight"
  responsive
  height={400}
  showVolume
/>

Props

CandlestickDataPoint

Each data point requires OHLC values:

Reading Candlestick Charts

• Green candles - Bullish (close > open), price went up
• Red candles - Bearish (close < open), price went down
• Wick (thin line) - Shows the high and low prices
• Body (thick rectangle) - Shows the open and close prices
• Volume bars - Trading activity, higher = more trades
• Crosshair - Guides your eye to exact values on hover