# V chart 9

> Basic chart

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-chart-9).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-chart-9
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-chart-9-light-032310807acc07b8.png
- Registry item: https://ui.cnippet.dev/r/v-chart-9.json
- Categories: chart
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-chart-9.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/chart`

## Files

### `registry/default/variants/v-chart-9.tsx`

```tsx
"use client";

import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis } from "recharts";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/registry/default/ui/chart";

const chartData = [
  { hours: 8, score: 55 },
  { hours: 10, score: 62 },
  { hours: 12, score: 65 },
  { hours: 15, score: 71 },
  { hours: 16, score: 72 },
  { hours: 18, score: 75 },
  { hours: 20, score: 78 },
  { hours: 22, score: 80 },
  { hours: 25, score: 82 },
  { hours: 28, score: 85 },
  { hours: 30, score: 88 },
  { hours: 35, score: 92 },
];

const chartConfig = {
  score: { color: "var(--chart-1)", label: "Score" },
} satisfies ChartConfig;

export function Pattern() {
  return (
    <ChartContainer className="min-h-52 w-full" config={chartConfig}>
      <ScatterChart
        accessibilityLayer
        margin={{ bottom: 20, left: 8, right: 16, top: 8 }}
      >
        <CartesianGrid />
        <XAxis
          axisLine={false}
          dataKey="hours"
          label={{
            offset: -8,
            position: "insideBottom",
            style: { fontSize: 11 },
            value: "Study hours",
          }}
          tickLine={false}
          tickMargin={8}
          type="number"
        />
        <YAxis
          axisLine={false}
          dataKey="score"
          domain={[40, 100]}
          label={{
            angle: -90,
            offset: 12,
            position: "insideLeft",
            style: { fontSize: 11 },
            value: "Score",
          }}
          tickLine={false}
          type="number"
          width={36}
        />
        <ChartTooltip content={<ChartTooltipContent />} cursor={false} />
        <Scatter data={chartData} fill="var(--color-score)" />
      </ScatterChart>
    </ChartContainer>
  );
}
```