Chart

설치 확인

선·막대·영역 차트, 범례·툴팁, 빈 데이터

1. 목적과 출처

선·막대·영역 차트, 범례·툴팁, 빈 데이터

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/chart.tsx
Registry: @adcapsule/chart

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Chart 색과 종류
구성	모양
계열 색 chart.1~5	chart-1chart-2chart-3chart-4chart-5
막대 bar
선 line
영역 area

3. 속성 바꿔 보기

종류

범례눈금선

const config = {
  created: { label: "만든 이슈", color: "var(--chart-1)" },
  done: { label: "끝낸 이슈", color: "var(--chart-3)" },
} satisfies ChartConfig

<ChartContainer config={config} className="h-56 w-full">
  <BarChart data={data} accessibilityLayer>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="week" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="created" … />
  </BarChart>
</ChartContainer>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/chart

npm 패키지: recharts
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"
import { Bar, BarChart, XAxis } from "recharts"

const config = { created: { label: "만든 이슈", color: "var(--chart-1)" } } satisfies ChartConfig
<ChartContainer config={config} className="h-56 w-full">
  <BarChart data={data}><XAxis dataKey="week" /><Bar dataKey="created" fill="var(--color-created)" /></BarChart>
</ChartContainer>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

config의 color에 var(--chart-n)
recharts의 Bar·Line·Area 등
ChartTooltip·ChartLegend
ChartContainer에 높이(className) 필수
aria-label로 차트 설명

공통으로 유지할 토큰

chart.1~5 (계열 색, 대비 3:1 검사)
border.default (눈금선)
text.secondary (축 글자)

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Chart 색과 종류
구성	모양
계열 색 chart.1~5	chart-1chart-2chart-3chart-4chart-5
막대 bar
선 line
영역 area

3. 속성 바꿔 보기

종류

범례눈금선

const config = {
  created: { label: "만든 이슈", color: "var(--chart-1)" },
  done: { label: "끝낸 이슈", color: "var(--chart-3)" },
} satisfies ChartConfig

<ChartContainer config={config} className="h-56 w-full">
  <BarChart data={data} accessibilityLayer>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="week" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="created" … />
  </BarChart>
</ChartContainer>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/chart

npm 패키지: recharts
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"
import { Bar, BarChart, XAxis } from "recharts"

const config = { created: { label: "만든 이슈", color: "var(--chart-1)" } } satisfies ChartConfig
<ChartContainer config={config} className="h-56 w-full">
  <BarChart data={data}><XAxis dataKey="week" /><Bar dataKey="created" fill="var(--color-created)" /></BarChart>
</ChartContainer>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

config의 color에 var(--chart-n)
recharts의 Bar·Line·Area 등
ChartTooltip·ChartLegend
ChartContainer에 높이(className) 필수
aria-label로 차트 설명

공통으로 유지할 토큰

chart.1~5 (계열 색, 대비 3:1 검사)
border.default (눈금선)
text.secondary (축 글자)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿