# C candlestick chart 2

> Crypto — hourly candles with volume bars

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/c-candlestick-chart-2).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/c-candlestick-chart-2
- Screenshot: https://shadcn.exchange/shot/cnippet/c-candlestick-chart-2/light.png
- Registry item: https://ui.cnippet.dev/r/c-candlestick-chart-2.json
- Categories: candlestick chart
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet/c-candlestick-chart-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/candlestick-chart`, `@cnippet/chart-card`, `@cnippet/chart-utils`

## Files

### `registry/default/chart-variants/c-candlestick-chart-2.tsx`

```tsx
"use client";

import { CandlestickChart } from "@/registry/default/charts/candlestick-chart";
import { ChartCard } from "@/registry/default/charts/chart-card";
import {
  formatCompact,
  formatCurrency,
} from "@/registry/default/lib/chart-utils";

// 24 hourly candles with volume, deterministic.
let price = 64200;
const data = Array.from({ length: 24 }, (_, i) => {
  const open = price;
  const close = Math.round(
    open + Math.sin(i * 0.9) * 420 + Math.cos(i * 2.3) * 180,
  );
  price = close;
  return {
    close,
    high: Math.max(open, close) + 120 + (i % 5) * 40,
    hour: `${String(i).padStart(2, "0")}:00`,
    low: Math.min(open, close) - 90 - (i % 3) * 60,
    open,
    volume: Math.round(1800 + Math.abs(close - open) * 6 + (i % 7) * 140),
  };
});

export default function CryptoVolume() {
  return (
    <ChartCard
      className="max-w-2xl"
      description="BTC/USD, hourly candles with traded volume, last 24 hours"
      title="BTC/USD"
      value={formatCurrency(data.at(-1)?.close ?? 0, "USD", { compact: false })}
    >
      <CandlestickChart
        className="h-48"
        data={data}
        index="hour"
        valueFormatter={formatCurrency}
        volume="volume"
        volumeFormatter={(v) => `${formatCompact(v)} BTC`}
      />
    </ChartCard>
  );
}
```