lab-charts

描き比べ: Chart.js vs ECharts

同一の実データ・同一の系列色で、左にChart.js、右にEChartsを並べています。ツールチップやレジェンドの挙動、アニメーション、記述スタイルの違いを実際に操作して確かめてください。

題材1: 折れ線（東京の平均気温）

「データ点数を増やす」トグルで月次から日次へ切り替えると、点数増加時の描画とツールチップの体感差を確認できます。出典: 気象庁データを加工して作成

import { Line } from "react-chartjs-2";

<Line
  data={{
    labels,
    datasets: [
      {
        label: "平均気温",
        data: values,
        borderColor: "#2a78d6",
        borderWidth: 2,
        pointRadius: dense ? 0 : 3,
        tension: 0.2,
      },
    ],
  }}
  options={{
    responsive: true,
    maintainAspectRatio: false,
    interaction: { mode: "index", intersect: false },
    plugins: {
      legend: { display: false },
      tooltip: {
        callbacks: {
          label: (ctx) => `平均気温: ${ctx.parsed.y}度`,
        },
      },
    },
    scales: {
      y: { title: { display: true, text: "気温（度）" } },
    },
  }}
/>
比較項目Chart.js v4.5.1Apache ECharts v6.1.0
抜粋コードの行数33行17行
デフォルトのツールチップポイント単位。軸単位表示はinteraction.modeをindexに変更trigger: axisで軸ガイド付きの複数系列表示が1行
単位の付与callbacks.labelで文字列を組み立てるvalueFormatterを渡すだけ
React統合react-chartjs-2の<Line>にpropsで渡す宣言的スタイルinit/setOption/disposeを自前管理（命令的）

題材2: 横棒（都道府県人口トップ10、2024年（人口推計））

初回描画のアニメーションと、棒の末尾への値ラベル表示の書き方を比較します。出典: e-Stat（国勢調査・人口推計）を加工して作成

import { Bar } from "react-chartjs-2";

<Bar
  data={{
    labels: prefNames,
    datasets: [
      {
        label: "人口（万人）",
        data: values,
        backgroundColor: "#1baf7a",
        borderRadius: 2,
      },
    ],
  }}
  options={{
    indexAxis: "y", // 横棒はここで切り替える
    plugins: {
      legend: { display: false },
      tooltip: {
        callbacks: {
          label: (ctx) =>
            `人口: ${ctx.parsed.x.toLocaleString("ja-JP")}万人`,
        },
      },
      // 棒の末尾に値を出すには外部プラグイン
      // (chartjs-plugin-datalabels)が必要
    },
  }}
/>
比較項目Chart.js v4.5.1Apache ECharts v6.1.0
抜粋コードの行数29行24行
横棒への切り替えindexAxis: 'y' の1行xAxis/yAxisのtype定義を入れ替える
値ラベル（データラベル）標準機能になく、chartjs-plugin-datalabels等の外部プラグインが必要series.labelで標準サポート
アニメーション全体が同時に伸びる（easeOutQuart）既定でカスケード（棒ごとに時間差）

題材3: ドーナツ（年齢3区分人口、2024年10月1日現在）

レジェンドをクリックして区分を除外したときの、割合表示の再計算挙動を比較してください。出典: e-Stat（国勢調査・人口推計）を加工して作成

import { Doughnut } from "react-chartjs-2";

<Doughnut
  data={{
    labels: ["0〜14歳", "15〜64歳", "65歳以上"],
    datasets: [
      {
        data: values,
        backgroundColor: ["#1baf7a", "#2a78d6", "#4a3aa7"],
        borderColor: "#fcfcfb",
        borderWidth: 2,
      },
    ],
  }}
  options={{
    cutout: "55%", // ドーナツの内径
    plugins: {
      legend: { position: "bottom" },
      // レジェンドクリックで区分を除外すると
      // ツールチップの割合は残り区分で再計算されない点に注意
    },
  }}
/>
比較項目Chart.js v4.5.1Apache ECharts v6.1.0
抜粋コードの行数23行18行
レジェンド連動クリックで除外。割合は自前計算のため再計算されない{d}%が除外後の合計で自動再計算される
ラベル表示標準では扇形上のラベルなし（外部プラグイン）label.formatterで名前と割合を標準表示
ドーナツ化cutoutで内径指定radiusを[内径, 外径]の配列で指定