Chart

Chart (차트)

Recharts로 만든 아름다운 차트 컴포넌트 모음이에요. 복사해서 붙여넣기만 하면 앱에 바로 차트를 넣을 수 있어요.

출처: 문서

본문

Charts를 소개해요. 앱에 복사해서 붙여넣을 수 있는 차트 컴포넌트 모음이에요.

차트는 기본 상태만으로도 멋지게 보이도록 설계됐어요. 다른 컴포넌트들과 잘 어울리고, 프로젝트에 맞게 완전히 커스터마이즈할 수 있어요.

차트 라이브러리 둘러보기.

컴포넌트 (Component)

내부적으로는 Recharts를 사용해요.

chart 컴포넌트는 조합(composition)을 염두에 두고 설계했어요. 차트는 Recharts 컴포넌트로 만들고, ChartTooltip 같은 커스텀 컴포넌트는 필요할 때만 가져와서 사용해요.

import { Bar, BarChart } from "recharts"

import { ChartContainer, ChartTooltipContent } from "@/components/ui/charts"

export function MyChart() {
  return (
    <ChartContainer>
      <BarChart data={data}>
        <Bar dataKey="value" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  )
}

Recharts를 감싸지 않았어요. 즉, 어떤 추상화에 묶이지 않는다는 뜻이에요. 새 Recharts 버전이 나오면 공식 업그레이드 경로를 따라 차트를 업그레이드하면 돼요.

컴포넌트는 온전히 여러분의 것이에요.

설치 (Installation)

npx shadcn@latest add chart

@layer base {
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

npm install recharts

@layer base {
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

첫 차트 만들기 (Your First Chart)

첫 차트를 만들어 볼게요. 막대 차트를 만들고 그리드, 축, 툴팁, 범례를 추가해요.

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

import { type ChartConfig } from "@/components/ui/chart"

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "#60a5fa",
  },
} satisfies ChartConfig

그리드 추가 (Add a Grid)

차트에 그리드를 추가해 볼게요.

import { Bar, BarChart, CartesianGrid } from "recharts"

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

축 추가 (Add an Axis)

차트에 x축을 추가하려면 XAxis 컴포넌트를 사용해요.

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

<ChartContainer config={chartConfig} className="h-[200px] w-full">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis
      dataKey="month"
      tickLine={false}
      tickMargin={10}
      axisLine={false}
      tickFormatter={(value) => value.slice(0, 3)}
    />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

툴팁 추가 (Add Tooltip)

지금까지는 Recharts 요소만 사용했어요. chart 컴포넌트의 커스터마이즈 덕분에 기본 상태만으로도 멋지게 보여요.

툴팁을 추가하려면 chart의 커스텀 ChartTooltip과 ChartTooltipContent 컴포넌트를 사용해요.

import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

<ChartContainer config={chartConfig} className="h-[200px] w-full">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis
      dataKey="month"
      tickLine={false}
      tickMargin={10}
      axisLine={false}
      tickFormatter={(value) => value.slice(0, 3)}
    />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

범례 추가 (Add Legend)

범례도 같은 방식으로 추가해요. chart의 ChartLegend와 ChartLegendContent 컴포넌트를 사용해요.

import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"

<ChartContainer config={chartConfig} className="h-[200px] w-full">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis
      dataKey="month"
      tickLine={false}
      tickMargin={10}
      axisLine={false}
      tickFormatter={(value) => value.slice(0, 3)}
    />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

완료됐어요. 첫 차트를 만들었네요! 다음은 뭐가 있을까요?

• 테마와 색상
• 툴팁
• 범례

차트 설정 (Chart Config)

차트 설정은 차트의 레이블, 아이콘, 색상을 정의하는 곳이에요.

의도적으로 차트 데이터와 분리되어 있어요.

덕분에 설정과 색상 토큰을 여러 차트에서 공유할 수 있어요. 데이터나 색상 토큰이 원격이거나 다른 형식으로 존재하는 경우에도 독립적으로 동작할 수 있어요.

import { Monitor } from "lucide-react"

import { type ChartConfig } from "@/components/ui/chart"

const chartConfig = {
  desktop: {
    label: "Desktop",
    icon: Monitor,
    // 'hsl(220, 98%, 61%)' 또는 'var(--color-name)' 같은 색상
    color: "#2563eb",
    // 또는 'light'와 'dark' 키를 가진 테마 객체
    theme: {
      light: "#2563eb",
      dark: "#dc2626",
    },
  },
} satisfies ChartConfig

테마 (Theming)

차트는 테마를 내장 지원해요. css 변수(권장)나 hex, hsl, oklch 같은 어떤 색상 형식의 색상 값도 사용할 수 있어요.

CSS 변수

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    // ...
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
  }

  .dark: {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 100%;
    // ...
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
  }
}

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "hsl(var(--chart-1))",
  },
  mobile: {
    label: "Mobile",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig

--chart-1: oklch(70% 0.227 154.59);

color: "var(--chart-1)",

hex, hsl 또는 oklch

차트 설정에 색상을 직접 정의할 수도 있어요. 원하는 색상 형식을 사용하면 돼요.

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
} satisfies ChartConfig

색상 사용하기 (Using Colors)

차트에서 테마 색상을 사용하려면 var(--color-KEY) 형식으로 색상을 참조해요.

컴포넌트

<Bar dataKey="desktop" fill="var(--color-desktop)" />

차트 데이터

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

Tailwind

<LabelList className="fill-[--color-desktop]" />

툴팁 (Tooltip)

차트 툴팁은 label, name, indicator, value로 구성돼요. 이것들을 조합해서 툴팁을 커스터마이즈할 수 있어요.

hideLabel, hideIndicator 속성으로 각각을 켜고 끌 수 있고, indicator 속성으로 indicator 스타일을 커스터마이즈할 수 있어요.

labelKey와 nameKey를 사용하면 툴팁 label과 name에 사용할 커스텀 키를 지정할 수 있어요.

Chart에는 <ChartTooltip>과 <ChartTooltipContent> 컴포넌트가 포함되어 있어요. 이 두 컴포넌트로 차트에 커스텀 툴팁을 추가할 수 있어요.

import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

<ChartTooltip content={<ChartTooltipContent />} />

Props

다음 속성으로 툴팁을 커스터마이즈해요.

색상 (Colors)

색상은 차트 설정에서 자동으로 참조해요.

커스터마이즈 (Custom)

툴팁 label과 name에 커스텀 키를 사용하려면 labelKey와 nameKey 속성을 사용해요.

const chartData = [
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

const chartConfig = {
  visitors: {
    label: "Total Visitors",
  },
  chrome: {
    label: "Chrome",
    color: "hsl(var(--chart-1))",
  },
  safari: {
    label: "Safari",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig

<ChartTooltip
  content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
/>

이렇게 하면 label로는 Total Visitors를, 툴팁 name으로는 Chrome과 Safari를 사용해요.

범례 (Legend)

커스텀 <ChartLegend>와 <ChartLegendContent> 컴포넌트로 차트에 범례를 추가할 수 있어요.

import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"

<ChartLegend content={<ChartLegendContent />} />

색상 (Colors)

색상은 차트 설정에서 자동으로 참조해요.

커스터마이즈 (Custom)

범례 이름에 커스텀 키를 사용하려면 nameKey 속성을 사용해요.

const chartData = [
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

const chartConfig = {
  chrome: {
    label: "Chrome",
    color: "hsl(var(--chart-1))",
  },
  safari: {
    label: "Safari",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig

<ChartLegend content={<ChartLegendContent nameKey="browser" />} />

이렇게 하면 범례 이름으로 Chrome과 Safari를 사용해요.

접근성 (Accessibility)

accessibilityLayer 속성을 켜면 차트에 접근성 레이어를 추가할 수 있어요.

이 속성은 차트에 키보드 접근과 스크린 리더 지원을 추가해요.

<LineChart accessibilityLayer />

더 알아보기 (Learn more)

• Chart · shadcn/ui
• Recharts