Building Blocks
Axes
XAxis / YAxis — 축 표시와 tick 타이포그래피를 제어합니다.
개요
XAxis와 YAxis는 recharts의 동일 이름 컴포넌트를 얇게 래핑합니다. 디자인 시스템 기본값으로 axisLine={false}, tickLine={false}, tick={{ typo: '$caption-1', fill: '$text-3' }}이 자동 적용되며, label 오브젝트에는 fontSize-200 / font.sans / $text-2 기본 typography가 병합됩니다.
기본 스타일
() => { const data = [ { name: '1월', value: 1200 }, { name: '2월', value: 3400 }, { name: '3월', value: 2800 }, { name: '4월', value: 4100 }, { name: '5월', value: 3600 }, { name: '6월', value: 4800 }, ]; return ( <ResponsiveContainer width="100%" height={260}> <BarChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Bar dataKey="value" fill="$primary-50" /> <ChartTooltip /> </BarChart> </ResponsiveContainer> ); }
tick 오버라이드
tick 오브젝트에 typo, fill을 지정해 축 레이블 타이포그래피를 바꿉니다.
() => { const data = [ { name: '1월', value: 1200 }, { name: '2월', value: 3400 }, { name: '3월', value: 2800 }, { name: '4월', value: 4100 }, ]; return ( <ResponsiveContainer width="100%" height={260}> <LineChart data={data}> <CartesianGrid /> <XAxis dataKey="name" tick={{ typo: '$body-3', fill: '$primary-50' }} /> <YAxis tick={{ typo: '$caption-2', fill: '$primary-50' }} /> <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} /> <ChartTooltip /> </LineChart> </ResponsiveContainer> ); }
axisLine / tickLine 활성화
기본값을 오버라이드해 축 선과 tick 선을 표시합니다.
() => { const data = [ { name: '1월', value: 1200 }, { name: '2월', value: 3400 }, { name: '3월', value: 2800 }, { name: '4월', value: 4100 }, ]; return ( <ResponsiveContainer width="100%" height={260}> <BarChart data={data}> <CartesianGrid /> <XAxis dataKey="name" axisLine tickLine /> <YAxis axisLine tickLine /> <Bar dataKey="value" fill="$primary-50" /> <ChartTooltip /> </BarChart> </ResponsiveContainer> ); }
축 Label
XAxis / YAxis 자식으로 ChartLabel 컴포넌트를 두거나 label prop에 오브젝트/문자열을 전달합니다. 오브젝트일 때 fontSize-200 / font.sans / $text-2가 자동 병합되고, fill $토큰이 해석됩니다.
() => { const data = [ { name: '1월', value: 1200 }, { name: '2월', value: 3400 }, { name: '3월', value: 2800 }, { name: '4월', value: 4100 }, ]; return ( <ResponsiveContainer width="100%" height={280}> <BarChart data={data} margin={{ bottom: 20, left: 20 }}> <CartesianGrid /> <XAxis dataKey="name" label={{ value: '월', position: 'insideBottom', offset: -10 }} /> <YAxis label={{ value: '매출', angle: -90, position: 'insideLeft' }} /> <Bar dataKey="value" fill="$primary-50" /> <ChartTooltip /> </BarChart> </ResponsiveContainer> ); }
Props
extends recharts XAxis / recharts YAxis
Prop
Type