Chart
recharts 기반 데이터 시각화를 위한 차트 래퍼 컴포넌트
개요
Chart 컴포넌트는 recharts 위에 디자인 시스템의 테마, 툴팁, 범례 스타일을 결합한 래퍼입니다. ChartContainer에 ChartConfig를 전달하면 라벨/아이콘/색상이 --color-{key} CSS 변수로 주입되어, 툴팁과 범례가 자동으로 디자인 토큰과 연동됩니다.
주요 특징
- ✅ 테마 연동: ChartConfig의 color/theme 값이 CSS 변수로 자동 주입
- ✅ 커스텀 툴팁: ChartTooltipContent로 디자인 시스템 스타일 툴팁 제공
- ✅ 커스텀 범례: ChartLegendContent로 config 기반 범례 렌더링
- ✅ 다크 모드: theme 옵션으로 라이트/다크 색상 분기
- ✅ 반응형: ResponsiveContainer 기반 크기 자동 조정
- ✅ 프리셋 제공: ChartBarActive, ChartLineDots, ChartPieSimple 등 예시 차트 포함
ChartConfig
ChartConfig는 각 데이터 키의 라벨, 아이콘, 색상을 정의하는 객체입니다. color를 직접 지정하거나 theme으로 라이트/다크 색상을 분기할 수 있습니다.
const chartConfig = {
visitors: { label: "Visitors" },
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: {
label: "Mobile",
theme: { light: "var(--chart-2)", dark: "var(--chart-4)" },
},
} satisfies ChartConfig| 필드 | Type | Description |
|---|---|---|
label | ReactNode | 툴팁/범례에 표시할 라벨 |
icon | ComponentType | 툴팁/범례에 표시할 아이콘 컴포넌트 |
color | string | 단일 색상 (theme과 배타적 사용) |
theme | Record<"light" | "dark", string> | 테마별 색상 (color와 배타적 사용) |
사용 예시
Bar Chart
막대 차트입니다. 호버 시 활성 막대가 강조됩니다.
Preview
Line Chart
점(dot)이 표시되는 라인 차트입니다.
Preview
Pie Chart
파이 차트입니다. 각 조각의 색상은 config의 CSS 변수와 연동됩니다.
Preview
Area Chart
영역 차트입니다. 그라디언트 fill과 범례를 함께 사용할 수 있습니다.
Preview
Area Chart
Showing total visitors for the last 6 months
API Reference
ChartContainer Props
recharts의 ResponsiveContainer를 감싸며 ChartConfig를 Context로 제공합니다.
| Prop | Type | Default | Description |
|---|---|---|---|
config | ChartConfig | - | (필수) 데이터 키별 설정 객체 |
id | string | 자동 생성 | 차트 식별자 (CSS 변수 스코프) |
initialDimension | { width: number; height: number } | { width: 320, height: 200 } | 초기 렌더링 크기 |
className | string | - | 추가 CSS 클래스 |
children | ReactNode | - | recharts 차트 컴포넌트 |
ChartTooltipContent Props
recharts Tooltip의 content로 전달하는 커스텀 툴팁입니다.
| Prop | Type | Default | Description |
|---|---|---|---|
indicator | "dot" | "line" | "dashed" | "dot" | 색상 인디케이터 스타일 |
hideLabel | boolean | false | 툴팁 라벨 숨김 |
hideIndicator | boolean | false | 색상 인디케이터 숨김 |
nameKey | string | - | 이름을 읽을 데이터 키 |
labelKey | string | - | 라벨을 읽을 데이터 키 |
labelFormatter | function | - | 라벨 포맷 함수 |
formatter | function | - | 값 포맷 함수 |
ChartLegendContent Props
recharts Legend의 content로 전달하는 커스텀 범례입니다.
| Prop | Type | Default | Description |
|---|---|---|---|
hideIcon | boolean | false | 아이콘/색상 표시 숨김 |
nameKey | string | - | 이름을 읽을 데이터 키 |
verticalAlign | string | "bottom" | 범례 세로 정렬 |
기본 사용법
import {
type ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
ChartLegend,
ChartLegendContent,
} from "@vortex/ui-foundation"
import { Bar, BarChart, XAxis } from "recharts"
const chartConfig = {
sales: { label: "Sales", color: "var(--chart-1)" },
} satisfies ChartConfig
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
<BarChart data={data}>
<XAxis dataKey="month" tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Bar dataKey="sales" fill="var(--color-sales)" radius={4} />
</BarChart>
</ChartContainer>접근성
- recharts의
accessibilityLayer를 활성화하면 키보드로 데이터 포인트를 탐색할 수 있습니다 - 툴팁 값은
tabular-nums폰트로 렌더링되어 숫자 판독성을 높입니다 - 색상 외에 라벨/아이콘을 병행하여 색각 이상 사용자도 구분 가능하도록 구성하는 것을 권장합니다
관련 컴포넌트
- TimelineChart: 시간 축 기반 일정/이력 시각화
- Card: 차트를 감싸는 컨테이너 레이아웃
- Table: 동일 데이터의 표 형태 표현
Last updated on