Charts
차트는 데이터의 시각적 흐름을 전달하는 컴포넌트입니다. 디자인 시스템은 라인/바, Activity gauge, Pie, Radar 네 가지 차트 스타일과 공용 마커를 제공합니다.
Figma 컴포넌트: Line and bar chart, Activity gauge, Pie chart, Radar chart, Chart marker
Line chart
선형 차트는 추세를 보여줄 때 사용합니다. 기본 3개 시리즈에 부드러운 곡선과 옅은 면 채움을 제공합니다.
Without axis labels
With axis labels
With legend
Filled area
Bar chart
바 차트는 항목 간 비교에 사용합니다. 기본 3개 시리즈를 누적(stacked) 형태로 보여줍니다.
Without axis labels
With axis labels
With legend
Activity gauge
원형 게이지는 진행률이나 비율을 한눈에 보여줄 때 사용합니다. xs(160px), sm(200px), md(240px), lg(280px) 네 가지 사이즈를 제공합니다.
Sizes
Legend bottom
Legend right
Pie chart
원형 차트는 전체에 대한 비율을 보여줍니다. hole 속성으로 도넛 형태를 만들 수 있고, xxs(120px) ~ lg(280px) 다섯 가지 사이즈를 제공합니다.
Hole variants
Sizes
With legend
Radar chart
레이더 차트는 여러 축을 동시에 비교할 때 사용합니다. 7개 축(요일)과 3개 시리즈(보라/핑크/블루)를 기본으로 제공합니다.
Without legend
Legend right
Legend bottom
Chart marker
특정 시점이나 임계값을 강조할 때 사용하는 세로 마커입니다.
Props
LineChart
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[][] | 3 series sample | 시리즈별 데이터 배열 (3개 권장) |
labels | string[] | Jan ~ Dec | X축 라벨 |
axisLabels | boolean | false | Y축 눈금/라벨, X축 라벨 표시 |
legend | boolean | false | 범례 표시 |
filled | boolean | false | 곡선 아래 영역 옅게 채움 |
yMax | number | 1000 | Y축 최대값 |
yStep | number | 200 | Y축 눈금 간격 |
height | number | 240 | 차트 높이(px) |
BarChart
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[][] | 3 series sample | 시리즈별 데이터 (누적 표시) |
labels | string[] | Jan ~ Dec | X축 라벨 |
axisLabels | boolean | false | 축 라벨 표시 |
legend | boolean | false | 범례 표시 |
yMax | number | 1000 | Y축 최대값 |
yStep | number | 200 | Y축 눈금 간격 |
ActivityGauge
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | 게이지 크기 |
values | number[] | [0.85, 0.66, 0.42] | 링별 진행률 (0~1) |
label | string | 'Active users' | 중앙 라벨 |
value | string | '1,000' | 중앙 값 |
legend | boolean | false | 범례 표시 |
legendPosition | 'bottom' | 'right' | 'bottom' | 범례 위치 |
PieChart
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'md' | 차트 크기 |
hole | '0%' | '25%' | '50%' | '75%' | '50%' | 중앙 구멍 비율 |
data | { name, value }[] | 6 series sample | 세그먼트 데이터 |
legend | boolean | false | 범례 표시 |
RadarChart
| Prop | Type | Default | Description |
|---|---|---|---|
data | { name, color, values }[] | 3 series sample | 시리즈 데이터 (각 시리즈는 축 개수와 동일한 값 배열) |
axes | string[] | ['Mon' ~ 'Sun'] | 축 라벨 |
rings | number[] | [200, 400, 600, 800, 1000] | 동심 그리드 값 |
legend | 'right' | 'bottom' | 'none' | 'right' | 범례 위치 |
ChartMarker
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'line' | 'dash' | 'minimal' | 'line' | 마커 스타일 |
Figma Variants
| Chart | Property | Values |
|---|---|---|
| Line / Bar | Chart style | Line Bar |
| Axis labels | True False | |
| Legend | False Top Right | |
| Breakpoint | Desktop Mobile | |
| Activity gauge | Size | xs sm md lg |
| Legend | False Bottom Right | |
| Pie chart | Size | xxs xs sm md lg |
| Hole | False 25% 50% 75% | |
| Legend | False True | |
| Radar chart | Legend | False Right Bottom |
| Chart marker | Type | Line Dash Minimal |