charting

グラフ作成とデータ可視化

Recharts（React — 推奨）

import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  BarChart, Bar, PieChart, Pie, Cell,
} from 'recharts';

const data = [
  { month: 'Jan', revenue: 4000, users: 240 },
  { month: 'Feb', revenue: 3000, users: 198 },
  { month: 'Mar', revenue: 5000, users: 300 },
];

function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="revenue" stroke="#8884d8" strokeWidth={2} />
        <Line type="monotone" dataKey="users" stroke="#82ca9d" strokeWidth={2} />
      </LineChart>
    </ResponsiveContainer>
  );
}

// Bar Chart
function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="revenue" fill="#8884d8" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

Chart.js（フレームワーク非依存）

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

// With React wrapper
import { Line, Bar, Doughnut } from 'react-chartjs-2';

function SalesChart() {
  return (
    <Line
      data={{
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{
          label: 'Revenue',
          data: [4000, 3000, 5000],
          borderColor: '#8884d8',
          tension: 0.3,
        }],
      }}
      options={{
        responsive: true,
        plugins: { legend: { position: 'top' } },
        scales: { y: { beginAtZero: true } },
      }}
    />
  );
}

D3.js（低レベル、最大限の制御）

import * as d3 from 'd3';

function createBarChart(container: HTMLElement, data: { label: string; value: number }[]) {
  const margin = { top: 20, right: 20, bottom: 30, left: 40 };
  const width = 600 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;

  const svg = d3.select(container).append('svg')
    .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
    .append('g').attr('transform', `translate(${margin.left},${margin.top})`);

  const x = d3.scaleBand().domain(data.map((d) => d.label)).range([0, width]).padding(0.2);
  const y = d3.scaleLinear().domain([0, d3.max(data, (d) => d.value)!]).range([height, 0]);

  svg.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(x));
  svg.append('g').call(d3.axisLeft(y));

  svg.selectAll('rect').data(data).join('rect')
    .attr('x', (d) => x(d.label)!)
    .attr('y', (d) => y(d.value))
    .attr('width', x.bandwidth())
    .attr('height', (d) => height - y(d.value))
    .attr('fill', '#8884d8')
    .attr('rx', 4);
}

ライブラリの選択

ライブラリ	最適な用途	学習コスト
Recharts	React ダッシュボード	低
Chart.js	シンプルなグラフ、あらゆるフレームワーク	低
D3.js	カスタム／複雑な可視化	高
ECharts	大規模データセット、地図	中
Nivo	React、豊富なグラフ種類	低

アンチパターン

アンチパターン	修正方法
ResponsiveContainer を使用しない	レスポンシブなサイズ調整のため、常にグラフをラップします
データ変更時にグラフ全体を再レンダリングする	再マウントではなく、グラフの更新メソッドを使用します
集計せずにデータポイントを増やしすぎる	グラフ化する前にデータを集計／サンプリングします
非同期データの読み込み状態がない	読み込み中はスケルトン／スピナーを表示します
ピクセル単位でサイズを固定する	相対サイズ（%、viewBox）を使用します

本番環境向けチェックリスト

• すべてのグラフをレスポンシブコンテナでラップする
• 読み込み中と空の状態に対応する
• アクセシビリティに配慮する：色のコントラスト、ARIA ラベル
• 大規模データセット向けにデータを集計する
• グラフ全体で一貫したカラーパレットを使用する
• 読みやすいツールチップの書式を設定する