# C candlestick chart 3

> Moving average — candles with a 7-day average line

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-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/c-candlestick-chart-3
- Screenshot: https://shadcn.exchange/shot/cnippet/c-candlestick-chart-3/light.png
- Registry item: https://ui.cnippet.dev/r/c-candlestick-chart-3.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-3.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-3.tsx`

```tsx
"use client";

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

// 40 trading days of deterministic OHLC data plus a 7-day moving average.
let price = 412;
const candles = Array.from({ length: 40 }, (_, i) => {
  const open = price;
  const close = +(open + Math.sin(i * 0.6) * 6 + Math.cos(i * 1.9) * 3).toFixed(
    2,
  );
  price = close;
  return {
    close,
    date: `Day ${i + 1}`,
    high: +(Math.max(open, close) + 2 + (i % 4)).toFixed(2),
    low: +(Math.min(open, close) - 2 - (i % 3)).toFixed(2),
    open,
  };
});
const data = candles.map((row, i) => {
  const window = candles.slice(Math.max(0, i - 6), i + 1);
  return {
    ...row,
    ma7:
      i < 6
        ? null
        : +(
            window.reduce((sum, c) => sum + c.close, 0) / window.length
          ).toFixed(2),
  };
});

export default function MovingAverage() {
  return (
    <ChartCard
      className="max-w-2xl"
      description="Daily candles with a 7-day moving average"
      footer="The moving average is a plain Recharts <Line> passed as a child."
      title="NVX"
    >
      <CandlestickChart
        className="h-48"
        data={data}
        index="date"
        indexFormatter={(v) => v.replace("Day ", "")}
        valueFormatter={(v) => formatCurrency(v, "USD", { compact: false })}
        yAxisWidth={64}
      >
        <Line
          dataKey="ma7"
          dot={false}
          isAnimationActive={false}
          name="7-day average"
          stroke="var(--chart-1)"
          strokeWidth={2}
          type="monotone"
        />
      </CandlestickChart>
    </ChartCard>
  );
}
```