# chart-03

> chart-03

A shadcn/ui block from the [@intentui](https://intentui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/intentui/chart-03).

- Page, with a live preview: https://shadcn.exchange/r/intentui/chart-03
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/intentui/chart-03-light-42f4a79abe1b2a6b.png
- Registry item: https://intentui.com/r/chart-03
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://intentui.com/r/chart-03
```

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: `https://intentui.com/r/bar-chart`, `https://intentui.com/r/card`, `https://intentui.com/r/use-mobile`

## Files

### `registry/blocks/chart-03/page.tsx`

```tsx
"use client"

import { useMemo } from "react"
import { BarChart } from "@/components/ui/bar-chart"
import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useIsMobile } from "@/hooks/use-mobile"

type EngagementPoint = {
  day: string
  likes: number
  comments: number
  shares: number
}

export default function Page() {
  const isMobile = useIsMobile()
  const engagementData: EngagementPoint[] = useMemo(
    () =>
      Array.from({ length: 7 }, (_, i) => ({
        day: `Day ${i + 1}`,
        likes: Math.floor(100 + Math.random() * 300),
        comments: Math.floor(20 + Math.random() * 80),
        shares: Math.floor(10 + Math.random() * 50),
      })),
    []
  )

  return (
    <div className="p-4 sm:p-16">
      <CardHeader className="mb-6">
        <CardTitle>Engagement last 7d</CardTitle>
        <CardDescription>
          Tracks likes, comments, and shares during the most recent 7-day period.
        </CardDescription>
      </CardHeader>
      <BarChart
        containerHeight={isMobile ? 200 : 500}
        data={engagementData}
        dataKey="day"
        xAxisProps={{ interval: 0 }}
        config={{
          likes: { label: "Likes" },
          comments: { label: "Comments" },
          shares: { label: "Shares" },
        }}
      />
    </div>
  )
}
```