Building Blocks
ErrorBar
오차 막대 — 데이터 포인트의 오차/불확실성 표현.
개요
ErrorBar는 Bar / Line / Scatter 안에 배치해 각 데이터 포인트의 오차 범위를 표시합니다. stroke에 $토큰을 적용할 수 있습니다.
Bar + ErrorBar
데이터 포인트마다 error 값을 함께 두고 Bar 자식으로 ErrorBar를 배치합니다.
() => { const data = [ { name: '1월', value: 1200, error: 200 }, { name: '2월', value: 3400, error: 380 }, { name: '3월', value: 2800, error: 240 }, { name: '4월', value: 4100, error: 320 }, ]; return ( <ResponsiveContainer width="100%" height={260}> <BarChart data={data}> <CartesianGrid /> <XAxis dataKey="name" /> <YAxis /> <Bar dataKey="value" fill="$primary-50"> <ErrorBar dataKey="error" stroke="$text-2" width={6} /> </Bar> <ChartTooltip /> </BarChart> </ResponsiveContainer> ); }
Line + ErrorBar
Line 자식으로 두면 각 포인트에 수직 오차 막대가 그려집니다.
() => { const data = [ { date: '04/01', views: 4200, error: 220 }, { date: '04/02', views: 5100, error: 280 }, { date: '04/03', views: 4800, error: 200 }, { date: '04/04', views: 6200, error: 360 }, { date: '04/05', views: 5700, error: 240 }, ]; return ( <ResponsiveContainer width="100%" height={260}> <LineChart data={data}> <CartesianGrid /> <XAxis dataKey="date" /> <YAxis /> <Line type="monotone" dataKey="views" stroke="$primary-50" strokeWidth={2}> <ErrorBar dataKey="error" stroke="$primary-30" width={6} /> </Line> <ChartTooltip /> </LineChart> </ResponsiveContainer> ); }
direction — 수평 오차
direction="x"면 수평 오차로 그려집니다. Scatter나 가로 BarChart에서 유용합니다.
() => { const data = [ { x: 12, y: 1, error: 2 }, { x: 25, y: 2, error: 3 }, { x: 18, y: 3, error: 1.5 }, { x: 30, y: 4, error: 4 }, ]; return ( <ResponsiveContainer width="100%" height={240}> <ScatterChart> <CartesianGrid /> <XAxis type="number" dataKey="x" /> <YAxis type="number" dataKey="y" /> <Scatter data={data} fill="$primary-50"> <ErrorBar dataKey="error" stroke="$text-2" direction="x" width={6} /> </Scatter> <ChartTooltip /> </ScatterChart> </ResponsiveContainer> ); }
Props
extends recharts ErrorBar
Prop
Type