7onicDESIGN SYSTEM

BarChart

데이터 비교와 추이를 직관적으로 표현하는 바 차트 컴포넌트입니다. 세로/가로 레이아웃 전환, 그룹/누적 표시, 바 레이블 표시 등 다양한 표현 옵션을 제공합니다.

4
Types
5
Colors
3
Indicator
Recharts
Base

Playground

Preview
Multiple
Layout
Series
Style
Radius
Options
<Chart config={chartConfig} className="min-h-[200px]">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <Chart.XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <Chart.Tooltip content={<Chart.TooltipContent />} />
    <Chart.Legend content={<Chart.LegendContent />} />
    <Chart.Bar dataKey="desktop" fill="var(--color-desktop)" radius="base" />
    <Chart.Bar dataKey="mobile" fill="var(--color-mobile)" radius="base" />
  </BarChart>
</Chart>

JSX Composition

Chart.*는 이 라이브러리에서, 그 외는 Recharts에서 import하세요.

Grid<CartesianGrid />
Y-Axis<Chart.YAxis />
Legend<Chart.Legend />
Labels<LabelList />

Patterns

BarChart의 주요 표시 패턴입니다. 용도에 맞게 선택하세요.

Default

단일 시리즈 기본 바 차트

Multiple Bars

여러 시리즈를 나란히 배치해 비교

Stacked

여러 시리즈를 쌓아 합계 시각화

Horizontal

가로 방향 바 차트(layout="vertical")

Tooltip Styles

Chart.TooltipContent의 indicator prop으로 툴팁 인디케이터 모양을 변경할 수 있습니다.

Dot (default)

기본 도트 인디케이터

January
Desktop186
Mobile80
indicator="dot"

Line

수직선 인디케이터

January
Desktop186
Mobile80
indicator="line"

Dashed

점선 인디케이터

January
Desktop186
Mobile80
indicator="dashed"

API

Component Structure

Chart— Recharts
.BarProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

Props

Chart

config—
ChartConfig

차트 설정 객체(레이블 및 컬러 정의)

children—
ReactElement

Recharts 차트 컴포넌트

idundefined
string

차트의 고유 ID(CSS 변수 스코핑용)

hoverFadefalse
boolean

호버한 바 그룹을 풀 컬러로 표시하고 나머지는 페이드 아웃하는 하이라이트 효과를 활성화합니다

Chart.Bar

variant"solid"
"solid" | "outline"

바 스타일. "outline"은 두꺼운 테두리와 반투명 채우기로 표시

radius"none"
"none" | "sm" | "base" | "md" | "lg"

모서리 둥글기 크기. 디자인 토큰(--radius-*)에 대응한 이름 있는 variant

layout"vertical"
"vertical" | "horizontal"

차트 방향. "horizontal"에서는 오른쪽(Y축 반대편)에 둥글기 적용

stackPosition"top"
"top" | "bottom"

누적 바에서의 위치. "bottom"에서는 아래쪽 둥글기 적용

Chart.TooltipContent

indicator"dot"
"dot" | "line" | "dashed"

인디케이터 모양

hideLabelfalse
boolean

레이블 숨김

hideIndicatorfalse
boolean

인디케이터 숨김

colorundefined
string

인디케이터 컬러 직접 지정. 미지정 시 페이로드 컬러 사용

labelClassNameundefined
string

레이블 요소에 추가할 CSS 클래스

nameKeyundefined
string

데이터 키 이름 매핑

labelKeyundefined
string

레이블 키 매핑

labelFormatterundefined
(value, payload) => ReactNode

레이블 커스텀 포매터

formatterundefined
(value, name, item, index, payload) => ReactNode

값 커스텀 포매터

Chart.LegendContent

hideIconfalse
boolean

아이콘 숨김

nameKeyundefined
string

데이터 키 이름 매핑

verticalAlign"bottom"
"top" | "middle" | "bottom"

수직 위치(Recharts Legend에서 자동 주입)

align"center"
"left" | "center" | "right"

수평 위치(Recharts Legend에서 자동 주입)

layout"horizontal"
"horizontal" | "vertical"

레이아웃 방향(Recharts Legend에서 자동 주입)

Chart.XAxis / Chart.YAxis

tick{ style: { fontSize, fill } }
object

축 레이블 스타일. 기본적으로 디자인 토큰(--font-size-2xs, --color-text-subtle) 적용. 커스텀 객체로 덮어쓰기 가능

width (YAxis)"auto"
number | "auto"

Y축 너비. "auto"로 데이터에 맞게 자동 조정. 숫자로 고정 너비 지정 가능

...props—
XAxisProps | YAxisProps

Recharts XAxis / YAxis의 모든 속성을 그대로 사용 가능

Anatomy

1
2
4
3002001000
7
5
3
JanFebMarAprMayJun
6
March
Desktop237
8
Desktop
Mobile
1
Root
Chart 래퍼
2
Chart Area
플롯 영역
3
X-Axis
수평 축
4
Y-Axis
수직 축
5
Bar
데이터 바
6
Tooltip
호버 정보
7
Grid
그리드선
8
Legend
시리즈 범례

Best Practices

✓

권장

  • ✓ChartConfig으로 레이블과 컬러를 일원 관리하세요
  • ✓accessibilityLayer를 반드시 활성화하세요
  • ✓min-h 또는 aspect-video로 컨테이너 크기를 지정하세요
  • ✓디자인 토큰 컬러를 사용하세요
✕

지양

  • ✗하드코딩된 컬러 값을 직접 사용하지 마세요
  • ✗컨테이너 크기 없이 차트를 배치하지 마세요
  • ✗하나의 차트에 시리즈를 5개 이상 넣지 마세요
  • ✗그리드 없이 데이터 비교를 강요하지 마세요

Accessibility

키보드 조작

Tab차트 영역에 포커스
Arrow Keys데이터 포인트 간 이동

ARIA / WCAG

  • accessibilityLayer 키보드 및 스크린 리더 지원
  • Tooltip으로 데이터 값을 텍스트로 제공
  • Legend로 시리즈 식별 가능
  • 컬러 토큰으로 다크 모드 자동 대응