Chart

Betav1.0.0

recharts 위의 얇은 wrapper — 일관된 색·툴팁·반응형 컨테이너. ChartConfig 로 데이터 키 → 라벨·색 매핑. theme 토큰 (--chart-1~5) 자동 적용.

Loading…

import {
  ChartContainer,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";

const config: ChartConfig = {
  desktop: { label: "Desktop", theme: "--chart-1" },
  mobile: { label: "Mobile", theme: "--chart-2" },
};

<ChartContainer config={config} height={260}>
  <LineChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip content={<ChartTooltipContent />} />
    <Line dataKey="desktop" stroke="var(--color-desktop)" />
    <Line dataKey="mobile" stroke="var(--color-mobile)" />
  </LineChart>
</ChartContainer>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/chart.json

Variants

Bar

Grouped bar — 카테고리별 비교.

Loading…

<ChartContainer config={config}>
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={[6,6,0,0]} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={[6,6,0,0]} />
  </BarChart>
</ChartContainer>

Area (stacked)

시계열 누적 비율. linearGradient 로 부드러운 fill.

Loading…

<ChartContainer config={config}>
  <AreaChart data={data}>
    <defs>
      <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={0.6} />
        <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.05} />
      </linearGradient>
    </defs>
    ...
    <Area dataKey="desktop" type="monotone"
      stroke="var(--color-desktop)" fill="url(#fillDesktop)" stackId="a" />
  </AreaChart>
</ChartContainer>

Pie / Donut

innerRadius 로 도넛. 4가지 chart 색 변수 자동 분배.

Loading…

<ChartContainer config={pieConfig}>
  <PieChart>
    <Tooltip content={<ChartTooltipContent />} />
    <Pie data={data} dataKey="value" nameKey="name"
      innerRadius={56} outerRadius={96}>
      {data.map((_, i) => (
        <Cell key={i} fill={`var(--chart-${i+1})`} />
      ))}
    </Pie>
  </PieChart>
</ChartContainer>

Composition

ChartContainer (config)
├── recharts Chart (Line/Bar/Area/Pie)
├── ChartTooltipContent
└── ChartLegendContent

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
recharts	`3.8.1`
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils

Accessibility

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.1.1 1.4.1

Notes

•차트 데이터를 표(Table) 로도 제공하면 스크린리더 사용자에게 도움.
•색상만으로 데이터 구분하지 말고 라벨/패턴 병행 (WCAG 1.4.1).