Chart

インポート

import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from '@caroainc/ui-components/client'
import { Bar, BarChart, Line, LineChart, Area, AreaChart, XAxis, YAxis, CartesianGrid } from 'recharts'

recharts のインストールが必要です。

npm install recharts

ChartContainer を使用する場合、親要素に明示的な高さ（例: min-h-[200px]）が必要です。 Flexコンテナの justify-center 内では正しくサイズ計算されない場合があります。

基本的な使い方

ChartConfig

チャートの色やラベルを設定するための設定オブジェクトです。

import type { ChartConfig } from '@caroainc/ui-components/client'
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--caroa-primary)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--caroa-muted)",
  },
} satisfies ChartConfig

棒グラフ

const chartData = [
  { month: "1月", desktop: 186, mobile: 80 },
  { month: "2月", desktop: 305, mobile: 200 },
  { month: "3月", desktop: 237, mobile: 120 },
  { month: "4月", desktop: 73, mobile: 190 },
  { month: "5月", desktop: 209, mobile: 130 },
  { month: "6月", desktop: 214, mobile: 140 },
]
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--caroa-primary)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--caroa-muted)",
  },
} satisfies ChartConfig
 
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <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>

折れ線グラフ

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <LineChart data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Line type="monotone" dataKey="desktop" stroke="var(--color-desktop)" strokeWidth={2} />
    <Line type="monotone" dataKey="mobile" stroke="var(--color-mobile)" strokeWidth={2} />
  </LineChart>
</ChartContainer>

エリアチャート

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <AreaChart data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Area type="monotone" dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.4} stroke="var(--color-desktop)" />
    <Area type="monotone" dataKey="mobile" fill="var(--color-mobile)" fillOpacity={0.4} stroke="var(--color-mobile)" />
  </AreaChart>
</ChartContainer>

ツールチップのカスタマイズ

インジケータースタイル

ChartTooltipContent の indicator プロパティでインジケータースタイルを変更できます。

// ドット（デフォルト）
<ChartTooltipContent indicator="dot" />
 
// ライン
<ChartTooltipContent indicator="line" />
 
// 破線
<ChartTooltipContent indicator="dashed" />

その他のオプション

// ラベルを非表示
<ChartTooltipContent hideLabel />
 
// インジケーターを非表示
<ChartTooltipContent hideIndicator />

Props

ChartContainer

Prop	Type	Default	Description
`config`	`ChartConfig`	`-`	チャートの設定（色、ラベル等）
`children`	`ReactNode`	`-`	Rechartsのチャートコンポーネント
`className`	`string`	`-`	追加のクラス名

ChartConfig

type ChartConfig = {
  [key: string]: {
    label?: ReactNode
    icon?: ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<'light' | 'dark', string> }
  )
}

ChartTooltipContent

Prop	Type	Default	Description
`indicator`	`'dot' \| 'line' \| 'dashed'`	`'dot'`	インジケーターのスタイル
`hideLabel`	`boolean`	`false`	ラベルを非表示にする
`hideIndicator`	`boolean`	`false`	インジケーターを非表示にする
`labelFormatter`	`(value: unknown, payload: ChartPayloadItem[]) => ReactNode`	`-`	ラベルのカスタムフォーマッター
`nameKey`	`string`	`-`	名前を取得するキー
`labelKey`	`string`	`-`	ラベルを取得するキー

ChartLegendContent

Prop	Type	Default	Description
`hideIcon`	`boolean`	`false`	アイコンを非表示にする
`nameKey`	`string`	`-`	名前を取得するキー
`verticalAlign`	`'top' \| 'bottom' \| 'middle'`	`'bottom'`	凡例の垂直位置

テーマ対応

ライトモードとダークモードで異なる色を使用する場合：

const chartConfig = {
  desktop: {
    label: "Desktop",
    theme: {
      light: "hsl(25 95% 53%)",
      dark: "hsl(25 95% 63%)",
    },
  },
} satisfies ChartConfig

Chart

On this page