# Monthly Visitors Line

> Line chart card plotting unique visitors month by month, with a grid, labeled axes, and a hover tooltip on each point.

A shadcn/ui block from the [@7ovr](https://7ovr.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/7ovr/charts-4).

- Page, with a live preview: https://shadcn.exchange/r/7ovr/charts-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/7ovr/charts-4-light-5338787cbd3f7362.png
- Registry item: https://7ovr.com/r/charts-4.json
- Categories: charts
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://7ovr.com/r/charts-4.json
```

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

## Dependencies

- npm packages: `@base-ui/react`, `recharts`
- Registry items: `card`, `chart`

## Files

### `registry/blocks/charts/4/charts-block.tsx`

```tsx
"use client"

import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "Jan", visitors: 4200 },
  { month: "Feb", visitors: 5100 },
  { month: "Mar", visitors: 4800 },
  { month: "Apr", visitors: 6300 },
  { month: "May", visitors: 7200 },
  { month: "Jun", visitors: 6900 },
  { month: "Jul", visitors: 8400 },
  { month: "Aug", visitors: 9100 },
  { month: "Sep", visitors: 8700 },
  { month: "Oct", visitors: 10200 },
  { month: "Nov", visitors: 11300 },
  { month: "Dec", visitors: 12600 },
]

const chartConfig = {
  visitors: {
    label: "Visitors",
    color: "var(--primary)",
  },
} satisfies ChartConfig

export default function ChartsBlock() {
  return (
    <section className="flex w-full items-center justify-center bg-background px-6 py-12 text-foreground">
      <Card className="w-full max-w-2xl">
        <CardHeader>
          <CardTitle>Monthly Visitors</CardTitle>
          <CardDescription>
            Unique visitors to acme.com over the last year
          </CardDescription>
        </CardHeader>
        <CardContent>
          <ChartContainer
            config={chartConfig}
            className="h-64 w-full [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-ring [&_.recharts-surface:focus-visible]:outline-solid"
          >
            <LineChart
              aria-label="Visitors by month"
              data={chartData}
              margin={{ top: 12, left: 0, right: 12 }}
            >
              <CartesianGrid vertical={false} />
              <XAxis
                dataKey="month"
                tickLine={false}
                axisLine={false}
                tickMargin={8}
              />
              <YAxis
                tickLine={false}
                axisLine={false}
                tickMargin={8}
                width={48}
                tickFormatter={(value) => `${Number(value) / 1000}K`}
              />
              <ChartTooltip
                cursor={false}
                content={
                  <ChartTooltipContent
                    formatter={(value) =>
                      `${Number(value).toLocaleString("en-US")} visitors`
                    }
                  />
                }
              />
              <Line
                dataKey="visitors"
                type="monotone"
                stroke="var(--color-visitors)"
                strokeWidth={2}
                dot={false}
                activeDot={{ r: 4 }}
              />
            </LineChart>
          </ChartContainer>
        </CardContent>
      </Card>
    </section>
  )
}
```