Building Blocks
ChartLegend
차트의 시리즈 범례를 표시하는 오버레이.
개요
ChartLegend는 fontSize, fontFamily, color 기본값이 적용되며 iconSize 기본은 12입니다. typo prop으로 타이포그래피 토큰을 지정하면 wrapperStyle에 자동 병합됩니다.
기본
() => { const data = [ { name: '1월', revenue: 1200, cost: 800, profit: 400 }, { name: '2월', revenue: 3400, cost: 1200, profit: 2200 }, { name: '3월', revenue: 2800, cost: 1000, profit: 1800 }, { name: '4월', revenue: 4100, cost: 1500, profit: 2600 }, ]; return ( <ResponsiveContainer width="100%" height={260}> <BarChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Bar dataKey="revenue" fill="$primary-50" name="매출" /> <Bar dataKey="cost" fill="$gray-40" name="비용" /> <Bar dataKey="profit" fill="$teal-50" name="이익" /> <ChartTooltip /> <ChartLegend /> </BarChart> </ResponsiveContainer> ); }
iconType / iconSize
recharts iconType으로 범례 마커 모양을, iconSize로 크기를 지정합니다.
() => { const data = [ { name: '1월', revenue: 1200, cost: 800 }, { name: '2월', revenue: 3400, cost: 1200 }, { name: '3월', revenue: 2800, cost: 1000 }, { name: '4월', revenue: 4100, cost: 1500 }, ]; return ( <VStack $css={{ gap: '$spacing-400' }}> <ResponsiveContainer width="100%" height={100}> <LineChart data={data}> <Line dataKey="revenue" stroke="$primary-50" name="매출" /> <Line dataKey="cost" stroke="$gray-50" name="비용" /> <ChartLegend iconType="diamond" iconSize={14} /> </LineChart> </ResponsiveContainer> <ResponsiveContainer width="100%" height={100}> <LineChart data={data}> <Line dataKey="revenue" stroke="$primary-50" name="매출" /> <Line dataKey="cost" stroke="$gray-50" name="비용" /> <ChartLegend iconType="star" iconSize={20} /> </LineChart> </ResponsiveContainer> </VStack> ); }
layout / align / verticalAlign
layout="vertical"로 세로 배치, align/verticalAlign으로 위치를 지정합니다.
() => { const data = [ { name: '1월', revenue: 1200, cost: 800 }, { name: '2월', revenue: 3400, cost: 1200 }, { name: '3월', revenue: 2800, cost: 1000 }, { name: '4월', revenue: 4100, cost: 1500 }, ]; return ( <ResponsiveContainer width="100%" height={260}> <BarChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Bar dataKey="revenue" fill="$primary-50" name="매출" /> <Bar dataKey="cost" fill="$gray-50" name="비용" /> <ChartTooltip /> <ChartLegend layout="vertical" align="right" verticalAlign="middle" /> </BarChart> </ResponsiveContainer> ); }
typo 오버라이드
typo에 ChartTypo 토큰을 전달하면 fontSize, fontWeight, fontFamily가 자동 병합됩니다.
() => { const data = [ { name: '1월', revenue: 1200, cost: 800 }, { name: '2월', revenue: 3400, cost: 1200 }, { name: '3월', revenue: 2800, cost: 1000 }, { name: '4월', revenue: 4100, cost: 1500 }, ]; return ( <ResponsiveContainer width="100%" height={240}> <BarChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Bar dataKey="revenue" fill="$primary-50" name="매출" /> <Bar dataKey="cost" fill="$gray-40" name="비용" /> <ChartTooltip /> <ChartLegend typo="$body-2" /> </BarChart> </ResponsiveContainer> ); }
formatter
텍스트 렌더를 함수로 커스터마이즈합니다.
() => { const data = [ { name: '1월', revenue: 1200, cost: 800 }, { name: '2월', revenue: 3400, cost: 1200 }, { name: '3월', revenue: 2800, cost: 1000 }, { name: '4월', revenue: 4100, cost: 1500 }, ]; return ( <ResponsiveContainer width="100%" height={240}> <BarChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Bar dataKey="revenue" fill="$primary-50" name="매출" /> <Bar dataKey="cost" fill="$gray-50" name="비용" /> <ChartTooltip /> <ChartLegend iconType="square" formatter={(value, entry) => ( <span style={{ color: entry.color, fontWeight: 600 }}>{value}</span> )} /> </BarChart> </ResponsiveContainer> ); }
Props
extends recharts Legend
Prop
Type