Claude Codeでチャートライブラリを活用する

チャートライブラリをClaude Codeで活用する

ダッシュボードやレポート画面ではグラフ表示が不可欠です。Recharts、Chart.js、D3.jsなど多くのライブラリがありますが、Claude Codeを使えばそれぞれの特性を活かしたチャートコンポーネントを素早く構築できます。

ライブラリの選定

> Reactアプリでチャートを表示したい。
> 折れ線グラフ、棒グラフ、円グラフ、エリアチャートを実装して。
> Rechartsを使って、レスポンシブ対応とダークモード対応で。

• Recharts: Reactネイティブ、宣言的でシンプル
• Chart.js: 軽量で幅広いチャート対応
• D3.js: 最高の柔軟性、学習コスト高

Rechartsによる各種チャート

// src/components/charts/SalesLineChart.tsx
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
  Legend, ResponsiveContainer
} from 'recharts';

interface DataPoint {
  date: string;
  revenue: number;
  orders: number;
}

export function SalesLineChart({ data }: { data: DataPoint[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">売上推移</h3>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
          <XAxis dataKey="date" stroke="#9CA3AF" />
          <YAxis
            yAxisId="revenue"
            stroke="#3B82F6"
            tickFormatter={(v) => `¥${(v / 10000).toFixed(0)}万`}
          />
          <YAxis yAxisId="orders" orientation="right" stroke="#10B981" />
          <Tooltip
            contentStyle={{
              backgroundColor: '#1F2937',
              border: 'none',
              borderRadius: '8px',
              color: '#fff',
            }}
            formatter={(value: number, name: string) =>
              name === 'revenue' ? `¥${value.toLocaleString()}` : `${value}件`
            }
          />
          <Legend />
          <Line yAxisId="revenue" type="monotone" dataKey="revenue" stroke="#3B82F6" name="売上" strokeWidth={2} dot={false} />
          <Line yAxisId="orders" type="monotone" dataKey="orders" stroke="#10B981" name="注文数" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

棒グラフ

// src/components/charts/CategoryBarChart.tsx
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'];

interface CategoryData {
  name: string;
  value: number;
}

export function CategoryBarChart({ data }: { data: CategoryData[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">カテゴリ別売上</h3>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data} layout="vertical">
          <CartesianGrid strokeDasharray="3 3" horizontal={false} />
          <XAxis type="number" tickFormatter={(v) => `¥${(v / 10000).toFixed(0)}万`} />
          <YAxis type="category" dataKey="name" width={100} />
          <Tooltip formatter={(v: number) => `¥${v.toLocaleString()}`} />
          <Bar dataKey="value" radius={[0, 4, 4, 0]}>
            {data.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

円グラフ

// src/components/charts/DistributionPieChart.tsx
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];

interface SegmentData {
  name: string;
  value: number;
}

export function DistributionPieChart({ data, title }: { data: SegmentData[]; title: string }) {
  const total = data.reduce((sum, d) => sum + d.value, 0);

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">{title}</h3>
      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={100}
            dataKey="value"
            label={({ name, value }) => `${name} ${((value / total) * 100).toFixed(0)}%`}
          >
            {data.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip formatter={(v: number) => `${v.toLocaleString()} (${((v / total) * 100).toFixed(1)}%)`} />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}

チャートダッシュボードの組み立て

// src/app/dashboard/analytics/page.tsx
import { SalesLineChart } from '@/components/charts/SalesLineChart';
import { CategoryBarChart } from '@/components/charts/CategoryBarChart';
import { DistributionPieChart } from '@/components/charts/DistributionPieChart';

export default async function AnalyticsPage() {
  const [salesData, categoryData, channelData] = await Promise.all([
    fetchSalesData(),
    fetchCategoryData(),
    fetchChannelData(),
  ]);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold dark:text-white">分析ダッシュボード</h1>
      <SalesLineChart data={salesData} />
      <div className="grid md:grid-cols-2 gap-6">
        <CategoryBarChart data={categoryData} />
        <DistributionPieChart data={channelData} title="チャネル別流入" />
      </div>
    </div>
  );
}

関連記事

データ可視化全般はデータ可視化の実装、ダッシュボードの構築は管理ダッシュボード開発を参照してください。

Rechartsの公式ドキュメント（recharts.org）でAPIリファレンスを確認できます。