차트

차트 (Charts)

Chakra UI의 차트는 기본 설정만으로도 멋지게 보이도록 설계되어 있으며, Chakra UI의 다른 테마 시스템과 자연스럽게 통합되어요. 차트는 recharts 위에 구축되어 있어요.

출처: 문서

본문

차트는 Chakra UI의 테마 시스템과 매끄럽게 통합되어 있어서, 별다른 설정 없이도 잘 어울리는 모양을 바로 만들어낼 수 있어요. 차트는 recharts를 기반으로 구축되어 있답니다.

설치 (Installation)

차트와 그 피어 의존성(peer dependencies)을 설치하려면 다음 명령을 실행하세요.

npm i @chakra-ui/charts recharts

사용법 (Usage)

:::steps

차트 컴포넌트 import 하기

대부분의 경우 @chakra-ui/charts 패키지에서 Chart와 useChart 훅을 import 하고, 이를 recharts의 컴포넌트들과 함께 조합해 사용해요.

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, XAxis, YAxis } from "recharts"

차트 데이터 정의하기

useChart 훅에 차트 데이터를 전달해 차트 인스턴스를 만들 수 있어요.

useChart 훅에 대해 더 알아보세요.

const chart = useChart({
  data: [
    { month: "January", value: 100 },
    { month: "February", value: 200 },
  ],
})

차트 렌더링하기

recharts 라이브러리에서 필요한 차트 종류에 따라, 차트 컴포넌트를 Chart.Root 컴포넌트로 감싸주면 돼요.

<Chart.Root chart={chart}>
  <BarChart data={chart.data}>
    {chart.series.map((item) => (
      <Bar
        key={item.name}
        dataKey={chart.key(item.name)}
        fill={chart.color(item.color)}
      />
    ))}
  </BarChart>
</Chart.Root>

:::

커스터마이징 (Customization)

차트 컴포넌트는 Recharts 위에 구축되어 있어서, Recharts가 제공하는 모든 커스터마이징 옵션을 그대로 사용할 수 있어요.

색상 (Colors)

useChart 훅은 color 함수를 제공하는데, 이 함수를 사용해 recharts의 차트 컴포넌트에 쓸 시맨틱 색상을 조회할 수 있어요.

<CartesianGrid stroke={chart.color("border.muted")} />

포맷터 (Formatters)

useChart 훅은 formatDate와 formatNumber 함수를 제공하는데, 각각 날짜와 숫자를 포맷하는 데 사용해요. x, y 축 라벨이나 툴팁을 포맷할 때 유용하답니다.

// x축 라벨 포맷하기
<XAxis tickFormatter={chart.formatDate({ month: "short", day: "2-digit" })} />

// y축 라벨 포맷하기
<YAxis tickFormatter={chart.formatNumber({ maximumFractionDigits: 1 })} />

FAQ

React 19에서 "lanes" is read-only 에러

이 에러는 recharts 3.6+를 React 19와 함께 사용할 때 발생해요. recharts가 Redux를 통해 사용하는 immer 11.0.0의 버그 때문이랍니다. 해결 방법은 immer를 11.0.1 이상 버전으로 해석(resolve)되도록 하는 거예요.

package.json에 override를 추가하세요:

:::code-group

{
  "pnpm": {
    "overrides": {
      "immer": ">=11.0.1"
    }
  }
}

{
  "overrides": {
    "immer": ">=11.0.1"
  }
}

{
  "resolutions": {
    "immer": ">=11.0.1"
  }
}

:::

그런 다음 패키지 매니저의 설치 명령을 실행해 변경 사항을 적용하면 돼요.

ResponsiveContainer vs responsive prop

차트 컴포넌트를 ResponsiveContainer로 감싸는 대신, 차트 컴포넌트의 responsive prop을 사용하세요. responsive prop(recharts 3.3+에서 사용 가능)이 권장되는 방식이며, ResponsiveContainer가 리사이즈 기반의 상태 업데이트로 인해 유발할 수 있는 React 19 호환성 문제를 피할 수 있어요.

<Chart.Root chart={chart}>
  <BarChart data={chart.data} responsive>
    {/* ... */}
  </BarChart>
</Chart.Root>

더 알아보기 (Learn more)