Chart

recharts ベースのデータ可視化コンポーネント。shadcn/ui の Chart primitive をデフォルト構造のまま採用し、色だけ Thinca のマルチカラーパレット (--chart-1〜10) を当てています。

プレビュー(動作デモ)

グラフ要素にホバーすると Tooltip が表示されます。色は var(--chart-1) 〜 var(--chart-10) を順に使用。

Bar Chart

"use client";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";

const data = [
  { month: "1月", calls: 186, sms: 80 },
  { month: "2月", calls: 305, sms: 200 },
  { month: "3月", calls: 237, sms: 120 },
  { month: "4月", calls: 173, sms: 190 },
  { month: "5月", calls: 209, sms: 130 },
  { month: "6月", calls: 214, sms: 140 },
];

const config = {
  calls: { label: "通話", color: "var(--chart-1)" },
  sms:   { label: "SMS",  color: "var(--chart-2)" },
} satisfies ChartConfig;

export function Example() {
  return (
    <ChartContainer config={config} className="min-h-[240px] w-full max-w-[600px]">
      <BarChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
        <ChartTooltip content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Bar dataKey="calls" fill="var(--color-calls)" radius={4} />
        <Bar dataKey="sms"   fill="var(--color-sms)"   radius={4} />
      </BarChart>
    </ChartContainer>
  );
}

Line Chart

"use client";
import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";

const data = [
  { day: "月", count: 24 },
  { day: "火", count: 32 },
  { day: "水", count: 41 },
  { day: "木", count: 28 },
  { day: "金", count: 52 },
  { day: "土", count: 12 },
  { day: "日", count: 8 },
];

const config = {
  count: { label: "問い合わせ件数", color: "var(--chart-1)" },
} satisfies ChartConfig;

export function Example() {
  return (
    <ChartContainer config={config} className="min-h-[240px] w-full max-w-[600px]">
      <LineChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="day" tickLine={false} tickMargin={10} axisLine={false} />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Line
          dataKey="count"
          type="monotone"
          stroke="var(--color-count)"
          strokeWidth={2}
          dot={{ fill: "var(--color-count)" }}
        />
      </LineChart>
    </ChartContainer>
  );
}

Pie Chart

"use client";
import { Pie, PieChart } from "recharts";
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";

const data = [
  { name: "通話",  value: 462, fill: "var(--chart-1)" },
  { name: "SMS",   value: 213, fill: "var(--chart-2)" },
  { name: "メール", value: 165, fill: "var(--chart-3)" },
  { name: "LINE",  value: 98,  fill: "var(--chart-4)" },
];

const config = {
  通話:  { label: "通話",  color: "var(--chart-1)" },
  SMS:   { label: "SMS",   color: "var(--chart-2)" },
  メール: { label: "メール", color: "var(--chart-3)" },
  LINE:  { label: "LINE",  color: "var(--chart-4)" },
} satisfies ChartConfig;

export function Example() {
  return (
    <ChartContainer config={config} className="min-h-[240px] w-full max-w-[400px]">
      <PieChart accessibilityLayer>
        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
        <Pie data={data} dataKey="value" nameKey="name" />
        <ChartLegend content={<ChartLegendContent />} />
      </PieChart>
    </ChartContainer>
  );
}

仕様

primitive: src/components/ui/chart.tsx(shadcn 公式そのまま、recharts ベース)
色トークン: --chart-1 〜 --chart-10(Thinca の --chart-chart-color-1 〜 1-10 をエイリアス)
シングルカラー(濃淡): --chart-single-chart-color-1 〜 6 も tokens 側に定義あり
config の color に var(--chart-N) を渡すと、Chart 内部で --color-{key} CSS 変数が生成される

Figma

Figma で Thinca Design System を開く ↗