Building Blocks
ReferenceDot
특정 좌표에 주석 점을 표시하는 어노테이션.
개요
ReferenceDot은 (x, y) 좌표에 단일 점을 그려 데이터의 특정 지점에 주석을 답니다. label 오브젝트는 fontSize-200 / font.sans / $text-2 기본 typography가 자동 병합되며, fill/stroke/label.fill $토큰을 해석합니다.
기본
() => { 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}> <LineChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} /> <ReferenceDot x="4월" y={4100} r={6} fill="$support-error-3" stroke="$background-1" strokeWidth={2} /> <ChartTooltip /> </LineChart> </ResponsiveContainer> ); }
label + 복수 포인트
() => { 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}> <LineChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} /> <ReferenceDot x="6월" y={4800} r={6} fill="$support-error-3" stroke="$background-1" strokeWidth={2} label={{ value: '최고', fill: '$support-error-3', position: 'top' }} /> <ReferenceDot x="1월" y={1200} r={6} fill="$support-info-3" stroke="$background-1" strokeWidth={2} label={{ value: '최저', fill: '$support-info-3', position: 'bottom' }} /> <ChartTooltip /> </LineChart> </ResponsiveContainer> ); }
Props
extends recharts ReferenceDot
Prop
Type