Building Blocks
Building Blocks
Axis, Grid, ChartTooltip, ChartLegend, Brush, Reference*, ChartLabel* — 차트를 구성하는 재사용 블록.
개요
차트 컨테이너(BarChart, LineChart 등) 안에서 재사용되는 구성 요소들입니다. 모든 블록은 $토큰 해석과 디자인 시스템에 맞는 기본값을 제공합니다.
| 카테고리 | 컴포넌트 | 페이지 |
|---|---|---|
| Axes & Grid | XAxis, YAxis | Axes |
| Axes & Grid | CartesianGrid | CartesianGrid |
| Polar | PolarGrid, PolarAngleAxis, PolarRadiusAxis | Polar |
| Overlays | ChartTooltip | ChartTooltip |
| Overlays | ChartLegend | ChartLegend |
| Interaction | Brush | Brush |
| Annotations | ReferenceLine, ReferenceArea | ReferenceLine |
| Annotations | ReferenceDot | ReferenceDot |
| Labels | ChartLabel | ChartLabel |
| Labels | LabelList | LabelList |
| Labels | ErrorBar | ErrorBar |
공통 기본값
| 컴포넌트 | 기본값 |
|---|---|
XAxis / YAxis | axisLine={false}, tickLine={false}, tick={{ typo: '$caption-1', fill: '$text-3' }}, label 오브젝트는 fontSize-200/font.sans/$text-2 자동 병합 |
CartesianGrid | vertical={false}, stroke=border.default, strokeDasharray="3 3" |
PolarAngleAxis / PolarRadiusAxis | tick={{ typo: '$caption-1', fill: '$text-3' }}, label 오브젝트 default 동일 |
ChartTooltip | 배경 background-1, border border.default, radius radius-100, padding spacing-300, elevation 16, cursor background-2 |
ChartLegend | fontSize fontSize-200, color text-2, iconSize 12 |
Brush | fill background-1, stroke border.4, 텍스트 색상 = stroke (recharts 기본 동작) |
ReferenceLine / ReferenceArea / ReferenceDot | label 오브젝트는 fontSize-200/font.sans/$text-2 자동 병합 |
LabelList | fill 기본 $text-2, typo 기본 $caption-2 |
ErrorBar | direction 기본 y, width 기본 5, stroke $토큰 해석 |
label 토큰 기본값 — 일괄 적용
XAxis/YAxis/PolarAngleAxis/PolarRadiusAxis/ReferenceLine/ReferenceArea/ReferenceDot 그리고 Bar/Line/Area/Pie/Radar/Funnel/Scatter/RadialBar의 label slot은 모두 동일한 기본값(fontSize: fontSize-200, fontFamily: font.sans, fill: $text-2)을 자동 병합합니다.
소비자가 명시한 값(fontSize, fill 등)은 항상 우선합니다. fill: '$text-1'처럼 $토큰을 전달하면 CSS 변수로 해석됩니다.