Building Blocks
Brush
차트 하단의 구간 선택/줌 컨트롤.
개요
Brush는 차트 하단에 표시 구간을 드래그로 선택할 수 있는 미니맵을 추가합니다. 기본값은 fill=background[1], stroke=border[4]. 텍스트 색상은 recharts 내부에서 stroke 값을 그대로 사용합니다 (recharts Brush.js 동작). brush.css.ts가 텍스트 fontSize를 caption-1로 지정합니다.
기본
() => { const data = Array.from({ length: 24 }, (_, i) => ({ name: 2024 + Math.floor(i / 12) + '-' + String((i % 12) + 1).padStart(2, '0'), value: 1800 + i * 180 + Math.round(Math.random() * 400), })); return ( <ResponsiveContainer width="100%" height={300}> <LineChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} dot={false} /> <Brush dataKey="name" height={30} /> <ChartTooltip /> </LineChart> </ResponsiveContainer> ); }
alwaysShowText
alwaysShowText면 드래그하지 않아도 시작/끝 라벨이 표시됩니다.
() => { const data = Array.from({ length: 24 }, (_, i) => ({ name: 'W' + (i + 1), value: 1800 + i * 180 + Math.round(Math.random() * 400), })); return ( <ResponsiveContainer width="100%" height={300}> <LineChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} dot={false} /> <Brush dataKey="name" height={30} alwaysShowText /> <ChartTooltip /> </LineChart> </ResponsiveContainer> ); }
fill / stroke 토큰 오버라이드
stroke는 핸들 외곽선과 내부 텍스트 색상에 동시에 적용됩니다.
() => { const data = Array.from({ length: 24 }, (_, i) => ({ name: 'W' + (i + 1), value: 1800 + i * 180 + Math.round(Math.random() * 400), })); return ( <ResponsiveContainer width="100%" height={300}> <LineChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} dot={false} /> <Brush dataKey="name" height={30} alwaysShowText fill="$gray-10" stroke="$primary-50" /> <ChartTooltip /> </LineChart> </ResponsiveContainer> ); }
Props
extends recharts Brush
Prop
Type