Candlestick Chart

OHLC candles with optional volume and hollow-up bodies — for stocks, SOL, and any market pair.

SOL / USD

@spectrumui/candlestick-chart

AAPL

showVolume

hollowUp

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

  • chart-kit.tsxcomponents/spectrumui/charts/chart-kit.tsx
  • candlestick-chart.tsxcomponents/spectrumui/charts/candlestick-chart.tsx

Then install its dependencies: npm i recharts framer-motion

Usage

import { CandlestickChart } from '@/components/spectrumui/charts/candlestick-chart';

<CandlestickChart data={candles} showVolume />
  • Built on Recharts. For a full trading surface use the Market Chart instead.
Work with me