125k

Chart

PreviousNext

Recharts で構築された美しいチャート。アプリにコピーして貼り付けて使用できます。

BaseRadixReact Aria
棒グラフ - インタラクティブ
過去3か月の総訪問者数を表示
"use client"

import * as React from "react"

チャートを紹介します。コピーしてアプリに貼り付けることができるグラフ コンポーネントのコレクション。

チャートは、箱から出してすぐに見栄えがするように設計されています。これらは他のコンポーネントとうまく連携し、プロジェクトに合わせて完全にカスタマイズできます。

チャート ライブラリを参照。

コンポーネント

内部では Recharts を使用しています。

chart コンポーネントは、構成を念頭に置いて設計されました。 Recharts コンポーネントを使用してグラフを作成し、ChartTooltip などのカスタム コンポーネントを必要なときに必要な場所にのみ取り込みます。

import { Bar, BarChart } from "recharts"
 
import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
 
export function MyChart() {
  return (
    <ChartContainer>
      <BarChart data={data}>
        <Bar dataKey="value" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  )
}

Recharts はラップしません。これは、抽象概念に囚われないことを意味します。 Recharts の新しいバージョンがリリースされたら、公式アップグレード パスに従ってチャートをアップグレードできます。

コンポーネントはあなたのものです。

インストール

pnpm dlx shadcn@latest add chart

初めてのチャート

最初のチャートを作成しましょう。バーチャートを作成し、グリッド、軸、ツールチップ、凡例を追加します。

データを定義することから始めます

次のデータは、各月のデスクトップ ユーザーとモバイル ユーザーの数を表します。

components/example-chart.tsx
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 },
]

チャート構成を定義します

チャート設定はチャートの設定を保持します。ここに、ラベル、アイコン、テーマ用のカラートークンなど、人間が判読できる文字列を配置します。

components/example-chart.tsx
import { type ChartConfig } from "@/components/ui/chart"
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "#60a5fa",
  },
} satisfies ChartConfig

チャートを作成します

これで、Recharts コンポーネントを使用してチャートを作成できるようになりました。

"use client"

import { Bar, BarChart } from "recharts"

グリッドの追加

Let's add a grid to the chart.

CartesianGrid コンポーネントをインポートします。

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

CartesianGrid コンポーネントをチャートに追加します。

<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>
"use client"

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

軸の追加

グラフに X 軸を追加するには、XAxis コンポーネントを使用します。

XAxis コンポーネントをインポートします。

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

XAxis コンポーネントをチャートに追加します。

<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>
"use client"

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

ツールチップの追加

これまで、Recharts のコンポーネントのみを使用してきました。 chart コンポーネントのカスタマイズのおかげで、箱から出してすぐに見栄えがよくなります。

ツールチップを追加するには、chart のカスタム ChartTooltip コンポーネントと ChartTooltipContent コンポーネントを使用します。

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>
"use client"

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

カーソルを合わせるとツールチップが表示されます。簡単ですよね？ 2 つのコンポーネントで、美しいツールチップが表示されます。

凡例の追加

凡例に対しても同じことを行います。 chart の ChartLegend コンポーネントと ChartLegendContent コンポーネントを使用します。

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>
"use client"

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

完了しました。最初のチャートが作成されました。次は何でしょうか？

チャート設定

チャート設定では、チャートのラベル、アイコン、色を定義します。

チャート データから意図的に切り離されています。

これにより、チャート間で構成トークンとカラートークンを共有できるようになります。データまたはカラー トークンがリモートに存在する場合や、異なる形式で存在する場合でも、独立して機能することもできます。

import { Monitor } from "lucide-react"
 
import { type ChartConfig } from "@/components/ui/chart"
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    icon: Monitor,
    // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
    color: "#2563eb",
    // OR a theme object with 'light' and 'dark' keys
    theme: {
      light: "#2563eb",
      dark: "#dc2626",
    },
  },
} satisfies ChartConfig

テーマ

チャートにはテーマのサポートが組み込まれています。 CSS 変数 (推奨) または任意のカラー形式 (hex、hsl、oklch など) のカラー値を使用できます。

CSS 変数

CSS ファイルで色を定義します

app/globals.css
@layer base {
  :root {
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
  }
 
  .dark: {
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
  }
}

chartConfig に色を追加します

components/example-chart.tsx
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

hex、hsl、または oklch

チャート設定で直接色を定義することもできます。好みのカラー形式を使用してください。

components/example-chart.tsx
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "hsl(220, 98%, 61%)",
  },
  tablet: {
    label: "Tablet",
    color: "oklch(0.5 0.2 240)",
  },
  laptop: {
    label: "Laptop",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

色の使用

チャートでテーマの色を使用するには、var(--color-KEY) の形式を使用して色を参照します。

コンポーネント

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

チャート データ

components/example-chart.tsx
const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

Tailwind

components/example-chart.tsx
<LabelList className="fill-[--color-desktop]" />

ツールチップ

チャート ツールチップには、ラベル、名前、インジケーター、および値が含まれます。これらを組み合わせて使用して、ツールチップをカスタマイズできます。

ラベル
ページビュー
デスクトップ
186
モバイル
80
名前
Chrome
1,286
Firefox
1,000
ページビュー
デスクトップ
12,486
インジケーター
Chrome
1,286

hideLabel、hideIndicator プロパティを使用してこれらのオン/オフを切り替え、indicator プロパティを使用してインジケーターのスタイルをカスタマイズできます。

ツールチップのラベルと名前にカスタム キーを使用するには、labelKey および nameKey を使用します。

チャートには、<ChartTooltip> コンポーネントと <ChartTooltipContent> コンポーネントが付属しています。これら 2 つのコンポーネントを使用して、グラフにカスタム ツールチップを追加できます。

components/example-chart.tsx
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
components/example-chart.tsx
<ChartTooltip content={<ChartTooltipContent />} />

プロパティ

ツールチップをカスタマイズするには、次のプロパティを使用します。

プロパティタイプ説明
labelKey文字列ラベルに使用する構成キーまたはデータキー。
nameKey文字列名前に使用する構成キーまたはデータキー。
indicatordot、line、または dashedツールチップのインジケーターのスタイル。
hideLabelブール値ラベルを非表示にするかどうか。
hideIndicatorブール値インジケーターを非表示にするかどうか。

カラー

色はチャート設定から自動的に参照されます。

カスタム

ツールチップのラベルと名前にカスタム キーを使用するには、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: "var(--chart-1)",
  },
  safari: {
    label: "Safari",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig
components/example-chart.tsx
<ChartTooltip
  content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
/>

これにより、ラベルに Total Visitors が使用され、ツールチップ名に Chrome と Safari が使用されます。

凡例

カスタム <ChartLegend> および <ChartLegendContent> コンポーネントを使用して、グラフに凡例を追加できます。

components/example-chart.tsx
import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
components/example-chart.tsx
<ChartLegend content={<ChartLegendContent />} />

カラー

色はチャート設定から自動的に参照されます。

カスタム

凡例名にカスタム キーを使用するには、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: "var(--chart-1)",
  },
  safari: {
    label: "Safari",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig
components/example-chart.tsx
<ChartLegend content={<ChartLegendContent nameKey="browser" />} />

これにより、凡例名に Chrome と Safari が使用されます。

アクセシビリティ

accessibilityLayer プロパティをオンにして、アクセス可能なレイヤーをチャートに追加できます。

このプロパティは、チャートにキーボード アクセスとスクリーン リーダーのサポートを追加します。

components/example-chart.tsx
<LineChart accessibilityLayer />

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

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