Building Blocks
LabelList
데이터 포인트마다 라벨을 찍는 컴포넌트.
개요
LabelList는 Bar / Line / Pie 등의 자식으로 배치해 각 데이터 포인트마다 라벨을 표시합니다. 기본값 fill="$text-2", typo="$caption-2".
기본
Bar / Line / Pie 안에 배치해 각 데이터 포인트에 라벨을 찍습니다.
() => { 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={280}> <BarChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Bar dataKey="value" fill="$primary-50"> <LabelList dataKey="value" position="top" /> </Bar> <ChartTooltip /> </BarChart> </ResponsiveContainer> ); }
토큰 오버라이드
() => { 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" /> <YAxis /> <Bar dataKey="value" fill="$primary-50"> <LabelList dataKey="value" position="top" fill="$primary-50" typo="$body-3" /> </Bar> <ChartTooltip /> </BarChart> </ResponsiveContainer> ); }
Pie + LabelList
Pie 차트 섹터에 각 항목명을 외곽에 표시합니다.
() => { const data = [ { name: '직접', value: 400, fill: '$primary-50' }, { name: '검색', value: 300, fill: '$teal-50' }, { name: '소셜', value: 200, fill: '$lightBlue-40' }, { name: '기타', value: 100, fill: '$gray-40' }, ]; return ( <ResponsiveContainer width="100%" height={280}> <PieChart> <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100}> <LabelList dataKey="name" position="outside" /> </Pie> <ChartTooltip /> </PieChart> </ResponsiveContainer> ); }
Props
extends recharts LabelList
Prop
Type