ReferenceLine / ReferenceArea

개요

ReferenceLine은 x/y 값으로 수직/수평 기준선을, ReferenceArea는 x1/x2/y1/y2 좌표로 사각 영역을 강조합니다. 두 컴포넌트 모두 label 오브젝트에 fontSize-200 / font.sans / $text-2 기본 typography가 자동 병합되며, fill/stroke 및 label.fill $토큰을 해석합니다.

ReferenceLine — 수평 기준선

y 값으로 수평선을 긋습니다.

() => {
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} />
      <ReferenceLine y={3000} stroke="$support-error-3" label={{ value: '목표', position: 'insideTopRight' }} />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

ReferenceLine — 수직 기준선

x 값으로 수직선을 긋습니다.

() => {
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} />
      <ReferenceLine x="3월" stroke="$support-warning-3" label={{ value: '출시일', position: 'insideTopLeft' }} />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

복수 기준선 + ReferenceArea

ReferenceArea로 정상 범위를 강조하고 ReferenceLine 두 개로 최소/목표를 표시합니다.

() => {
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} />
      <ReferenceLine y={2000} stroke="$support-warning-3" label={{ value: '최소', position: 'insideRight' }} />
      <ReferenceLine y={4000} stroke="$support-error-3" label={{ value: '목표', position: 'insideRight' }} />
      <ReferenceArea y1={2000} y2={4000} fill="$gray-20" fillOpacity={0.3} label={{ value: '정상 범위', fill: '$text-3', position: 'insideTopLeft' }} />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

ReferenceLine fill 토큰

선 주변 영역을 fill로 강조할 수 있습니다.

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
  { name: '5월', value: 3600 },
];
return (
  <ResponsiveContainer width="100%" height={260}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} />
      <ReferenceLine y={3000} stroke="$support-error-3" fill="$support-error-1" />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

label $토큰

label 오브젝트에 fill을 지정하면 $토큰이 해석되어 텍스트 색상에 적용됩니다. 기본 typography(fontSize-200, font.sans)는 자동.

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
  { name: '5월', value: 3600 },
];
return (
  <ResponsiveContainer width="100%" height={260}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="$primary-50" strokeWidth={2} />
      <ReferenceLine
        y={3000}
        stroke="$support-error-3"
        label={{ value: '목표', fill: '$support-error-3', position: 'insideTopRight' }}
      />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

Props

ReferenceLine

extends recharts ReferenceLine

Prop

Type

ReferenceArea

extends recharts ReferenceArea

Prop

Type

On this page