# Candlestick Chart

> A composable OHLC candlestick chart with gradients, patterns, tooltips, and hover interactions

Source: https://ui.cortexcn.dev/docs/charts/candlestick-chart

## Installation

```bash
npx shadcn@latest add @cortexcn/candlestick-chart
```

## Usage

The Candlestick Chart uses the same composable API as the Line and Area charts. Provide OHLC data and compose Grid, Candlestick, ChartTooltip, and XAxis.

### Basic Example

```tsx
import {
  CandlestickChart,
  Candlestick,
  Grid,
  ChartTooltip,
  XAxis,
} from "@/components/charts";

const ohlcData = [
  { date: new Date("2025-01-01"), open: 100, high: 108, low: 96, close: 104 },
  { date: new Date("2025-01-02"), open: 104, high: 112, low: 101, close: 109 },
  // ... more OHLC points
];

function OHLCChart() {
  return (
    <CandlestickChart
      data={ohlcData}
      margin={{ top: 16, right: 16, bottom: 40, left: 16 }}
      style={{ height: 320 }}
    >
      <Grid horizontal />
      <Candlestick fadedOpacity={0.25} />
      <ChartTooltip content={MyOHLCTooltipContent} />
      <XAxis />
    </CandlestickChart>
  );
}
```

### Data shape

Each point must have `date`, `open`, `high`, `low`, and `close`:

```ts
interface OHLCDataPoint {
  date: Date;
  open: number;
  high: number;
  low: number;
  close: number;
}
```

### Styling candles

The default fill uses the chart palette: `--chart-1` (positive) and `--chart-5` (negative). Override with `positiveFill` and `negativeFill` for gradients or solid colors (e.g. `var(--color-emerald-500)` for up, `var(--color-red-500)` for down). Use `bodyPatternPositive` and `bodyPatternNegative` with `url(#pattern-id)` for pattern fills. Control spacing with `candleGap` (0–1) or fixed `candleWidth` in pixels.

### Tooltip

Pass a custom `content` renderer to `ChartTooltip` that receives `{ point, index }` to show OHLC fields. Use `showCrosshair={false}` and `showDots={false}` for tooltip-only (no crosshair or dot).

### Background

Use [`Background`](https://ui.cortexcn.dev/docs/utility/background) instead of `Grid` for a pattern fill behind candles. See **Pattern Background** examples on the [candlestick chart gallery](https://ui.cortexcn.dev/charts/candlestick-chart).