ChartLabel

개요

ChartLabel은 단일 텍스트 라벨입니다. 주로 XAxis/YAxis 자식으로 두어 축 제목, ReferenceLine/ReferenceArea/ReferenceDot 자식으로 두어 어노테이션에 사용합니다. Bar/Line/Area/Pie/Funnel/RadialBar의 자식으로 두면 시리즈 단위로 단일 라벨이 그려집니다(데이터 포인트마다 찍으려면 LabelList를 사용하세요). typo 토큰 지원.

축 Label

XAxis / YAxis 자식으로 ChartLabel을 둬 축 제목을 표시합니다. typo 토큰 지원.

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <BarChart data={data} margin={{ bottom: 20, left: 20 }}>
      <CartesianGrid />
      <XAxis dataKey="name">
        <ChartLabel value="월" position="insideBottom" offset={-10} fill="$text-3" typo="$caption-1" />
      </XAxis>
      <YAxis>
        <ChartLabel value="매출" angle={-90} position="insideLeft" fill="$text-3" typo="$caption-1" />
      </YAxis>
      <Bar dataKey="value" fill="$primary-50" />
      <ChartTooltip />
    </BarChart>
  </ResponsiveContainer>
);
}

ReferenceLine Label

ReferenceLine/ReferenceArea/ReferenceDot의 자식으로 두면 어노테이션 라벨이 됩니다.

() => {
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">
        <ChartLabel value="목표" position="insideTopRight" fill="$support-error-3" typo="$caption-1" />
      </ReferenceLine>
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

stroke 토큰

stroke로 라벨 텍스트 외곽선을 추가합니다.

() => {
const data = [
  { name: '1월', value: 1200 },
  { name: '2월', value: 3400 },
  { name: '3월', value: 2800 },
  { name: '4월', value: 4100 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <BarChart data={data} margin={{ bottom: 20, left: 20 }}>
      <CartesianGrid />
      <XAxis dataKey="name">
        <ChartLabel value="월" position="insideBottom" offset={-10} fill="$text-3" stroke="$primary-50" typo="$caption-1" />
      </XAxis>
      <YAxis />
      <Bar dataKey="value" fill="$primary-50" />
      <ChartTooltip />
    </BarChart>
  </ResponsiveContainer>
);
}

Props

extends recharts Label

Prop

Type

개요

축 Label

ReferenceLine Label

stroke 토큰

Props

On this page