Charts

recharts 기반의 얇은 래퍼 — 디자인 토큰 기본값과 $토큰 문법을 제공합니다.

개요

@featuring-corp/charts는 recharts v3.8+ 의 1

thin wrapper입니다. 두 가지 핵심 가치를 제공합니다.

$ 토큰 문법 — fill="$primary-50" 으로 디자인 토큰을 직접 참조
합리적 기본값 — 별도 설정 없이 디자인 시스템에 맞는 차트 출력
recharts API 호환 — 래핑되지 않은 props는 recharts와 동일하게 동작
accessibilityLayer 기본 활성 — Cartesian/Polar 컨테이너(Bar/Line/Area/Composed/Scatter/Pie/Radar/RadialBar/Funnel)에서 키보드 탐색 지원. Treemap/Sankey/SunburstChart는 recharts가 해당 prop을 제공하지 않음.

설치

pnpm add @featuring-corp/charts recharts

peer dependency로 recharts ^3.8.0, react ^18 || ^19, react-dom ^18 || ^19을 요구합니다.

빠른 시작

() => {
const data = [
  { month: '1월', revenue: 4200 },
  { month: '2월', revenue: 3800 },
  { month: '3월', revenue: 5200 },
  { month: '4월', revenue: 4780 },
  { month: '5월', revenue: 3890 },
];
return (
  <ResponsiveContainer width="100%" height={260}>
    <BarChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis />
      <Bar dataKey="revenue" fill="$primary-50" />
      <ChartTooltip />
    </BarChart>
  </ResponsiveContainer>
);
}

$ 토큰 시스템

차트 컴포넌트의 fill, stroke, typo 등의 prop에 $ 접두어로 디자인 토큰을 직접 참조할 수 있습니다. 내부적으로 CSS 변수로 해석됩니다.

입력	출력
`$primary-50`	`var(--global-colors-primary-50)`
`$text-1`	`var(--semantic-color-text-1)`
`$support-error-3`	`var(--semantic-color-support-error-3)`
`$caption-1`	`{ fontSize, fontWeight, fontFamily }` SVG 속성
`#ff6b6b`	그대로 passthrough

토큰이 없는 경우 개발 모드에서 console.warn으로 경고하며, 입력 값을 그대로 반환합니다.

ChartColor 타입

type ChartColor = `$${string}` | (string & {});

$ 접두어 토큰과 raw CSS 값(#ff6b6b, rgba(...)) 모두 허용합니다.

ChartTypo 타입

type ChartTypo =
  | '$heading-1' | '$heading-2' | '$heading-3' | '$heading-4'
  | '$heading-5' | '$heading-6' | '$heading-7'
  | '$body-1' | '$body-2' | '$body-3' | '$body-4'
  | '$caption-1' | '$caption-2';

SVG 호환 fontSize, fontWeight, fontFamily 속성으로 해석됩니다. lineHeight는 SVG에서 지원하지 않아 포함되지 않습니다.

컴포넌트 카테고리

카테고리	컴포넌트
Containers	`BarChart`, `LineChart`, `AreaChart`, `PieChart`, `RadialBarChart`, `ComposedChart`, `RadarChart`, `FunnelChart`, `ScatterChart`
Data Series	`Bar`, `Line`, `Area`, `Pie`, `Radar`, `Funnel`, `Scatter`, `RadialBar`
Building Blocks	`XAxis`, `YAxis`, `CartesianGrid`, `ChartTooltip`, `ChartLegend`, `Brush`, `ReferenceLine`, `ReferenceArea`, `ReferenceDot`, `ChartLabel`, `LabelList`, `ErrorBar` (각 컴포넌트별 페이지로 분리)
Polar	`PolarGrid`, `PolarAngleAxis`, `PolarRadiusAxis`
Standalone	`Treemap`, `Sankey`, `SunburstChart`
Shape Primitives	`Sector`, `Rectangle`, `ChartDot`, `Cross`, `Trapezoid`, `Curve`, `Polygon`, `Symbols`, `Text`

기본값 요약

Cartesian/Polar 컨테이너는 accessibilityLayer=true 적용. 모든 컨테이너는 data의 fill/stroke $토큰을 재귀 해석합니다 (resolveDataTokens — Treemap/Sankey 포함, SunburstChart는 단일 루트라 resolveTreeData).

컴포넌트	주요 기본값
`XAxis` / `YAxis`	`axisLine={false}`, `tickLine={false}`, `tick.typo="$caption-1"`, `tick.fill="$text-3"`
`CartesianGrid`	`vertical={false}`, `stroke=border.default`, `strokeDasharray="3 3"`
`PolarAngleAxis` / `PolarRadiusAxis`	`tick.typo="$caption-1"`, `tick.fill="$text-3"`
`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 기본 동작)
`LabelList`	fill `$text-2`, typo `$caption-2`
`XAxis`/`YAxis`/`PolarAngleAxis`/`PolarRadiusAxis` `label`, `ReferenceLine`/`ReferenceArea`/`ReferenceDot` `label`, `Bar`/`Line`/`Area`/`Pie`/`Radar`/`Funnel`/`Scatter`/`RadialBar` `label`	오브젝트 형태일 때 `fontSize-200`/`font.sans`/`$text-2` 자동 병합. 소비자 명시값 우선.

@featuring-corp/charts는 recharts의 Cell, ResponsiveContainer, ZAxis, Customized, Surface, Layer 등의 컴포넌트를 그대로 re-export 합니다. recharts 훅 (useActiveTooltipLabel, useChartHeight, useMargin 등)과 타입 (TooltipContentProps, LegendPayload 등) 도 모두 포함됩니다.

래핑되지 않은 이유: 이들은 토큰/색상과 무관하거나 내부 컨텍스트 훅이므로 래퍼가 불필요합니다.

유틸리티

소비자가 직접 토큰을 해석해야 할 때 사용하는 helper 함수입니다.

Prop

Type

개요

설치