# Candlestick chart components for React

> 9 Candlestick and price chart components for React and Tailwind: candles with volume, moving averages, volume profile and range selection, all in SVG.

Price charts for trading and research screens, starting with a candlestick chart that shares one time axis with its volume pane and reads the bar under the cursor. Next to it are the charts traders keep open beside the candles. Every one is drawn in plain SVG with no chart library, so the shapes live in the file you install.

## Components

### Candlestick Chart

A candlestick chart with a volume histogram, a magnet crosshair and a live OHLC legend, for stock and crypto trading terminals.

```bash
npx shadcn@latest add @ssych/candlestick
```

Live preview: https://ssych.com/library/candlestick · Plain text: https://ssych.com/library/candlestick.md

### Volume Profile

A volume profile chart of traded volume by price with the point of control and value area, for futures and crypto traders.

```bash
npx shadcn@latest add @ssych/volume-profile
```

Live preview: https://ssych.com/library/volume-profile · Plain text: https://ssych.com/library/volume-profile.md

### SMA Chart

A stock price chart with 20 and 50 day simple moving average overlays and crosshair scrubbing, for trading and technical analysis screens.

```bash
npx shadcn@latest add @ssych/sma-chart
```

Live preview: https://ssych.com/library/sma-chart · Plain text: https://ssych.com/library/sma-chart.md

### Range Navigator

A price history chart with a range selector minimap; drag the window to pan and pull an edge to zoom, for trading and analytics apps.

```bash
npx shadcn@latest add @ssych/range-navigator
```

Live preview: https://ssych.com/library/range-navigator · Plain text: https://ssych.com/library/range-navigator.md

### Price Scrubber

A stock price chart you scrub with a magnet crosshair and price and time badges on the axes, the headline price turning green or red against the open.

```bash
npx shadcn@latest add @ssych/price-scrubber
```

Live preview: https://ssych.com/library/price-scrubber · Plain text: https://ssych.com/library/price-scrubber.md

### Equity & Drawdown

An equity curve with a synced drawdown chart for backtests and trading performance, one crosshair reading return, drawdown and days below peak.

```bash
npx shadcn@latest add @ssych/equity-drawdown
```

Live preview: https://ssych.com/library/equity-drawdown · Plain text: https://ssych.com/library/equity-drawdown.md

### Graph Comparison

A stock comparison chart that indexes up to four tickers to the same start, for relative performance from 1M to 1Y.

```bash
npx shadcn@latest add @ssych/graph-comparison
```

Live preview: https://ssych.com/library/graph-comparison · Plain text: https://ssych.com/library/graph-comparison.md

### Market Snapshot

A stock price card with periods from 1D to All and a line chart you scrub for the price at any moment, for broker and market apps.

```bash
npx shadcn@latest add @ssych/market-snapshot
```

Live preview: https://ssych.com/library/market-snapshot · Plain text: https://ssych.com/library/market-snapshot.md

### Order Flow

An order flow chart of the last 48 trades as bars sized by volume and coloured by side, for crypto and futures trading terminals.

```bash
npx shadcn@latest add @ssych/tape-flow
```

Live preview: https://ssych.com/library/tape-flow · Plain text: https://ssych.com/library/tape-flow.md


## Questions

### Can it draw thousands of candles?

It is built for the bars one screen shows at once, with a crosshair and a volume pane. It has no pan or zoom. For long histories you pan and zoom through, a canvas library such as TradingView Lightweight Charts fits better, and the two can sit on one screen.

### What data does the candlestick take?

An array of bars with open, high, low, close and volume, plus a start time and an interval. Buy and sell markers are optional.

## Links

- This page: https://ssych.com/library/s/candlestick-chart
- All components: https://ssych.com/llms-full.txt