【AI時代の図形】グラフ・チャート4選 — Vega-Lite・Chart.js・Recharts・Observable Plot徹底比較

当サイトを閲覧いただきありがとうございます。本記事はAI時代にコード管理できる図形シリーズの第6回として、グラフ・チャート4種を比較解説します。シリーズ全体の一覧は完全ガイドをご覧ください。

売上推移の折れ線グラフ、ツール比較の棒グラフ、ダッシュボードのレーダーチャート — こうしたグラフもテキスト（コード）で定義してGit管理できます。AIに「このデータをグラフにして」と頼めばコードが出力され、そのまま表示できるものを4つ紹介します。

AI時代にこのアプローチが活躍する場面は広がる一方です。CSVやスプレッドシートのデータをAIに渡して「傾向が分かるグラフを生成して」と依頼するだけで、適切なグラフの種類を選択してコードまで生成してくれます。レポートや提案資料にグラフが必要になるたびにExcelを開いていた作業が、AIへの一言で完了する。しかもコードなので、データが更新されれば同じコードで最新のグラフが出力されます。

4種比較表

Vega-Lite — JSONを書くだけでグラフが出る

Vega-Liteは「データと、それをどう見せるか」をJSONで書くだけでグラフが自動生成されるツールです。プログラムのロジックを書くのではなく、設定ファイルのような感覚でグラフを定義します。ワシントン大学の研究チームが開発しており、学術的な信頼性も高いです。

たとえば「tool列を横軸、score列を縦軸に、色はtool列で分ける」と指定するだけで、適切な棒グラフが出来上がります。

サンプル：棒グラフ

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"tool": "Mermaid", "score": 95},
      {"tool": "D2", "score": 85},
      {"tool": "PlantUML", "score": 75},
      {"tool": "Graphviz", "score": 70}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "tool", "type": "nominal", "sort": "-y"},
    "y": {"field": "score", "type": "quantitative"},
    "color": {"field": "tool", "type": "nominal"}
  }
}

data にデータ、mark にグラフの種類（棒、折れ線など）、encoding に「どの列をどの軸に使うか」を指定するだけです。

サンプル：複合グラフ（レイヤー）

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"month": "Jan", "revenue": 100, "cost": 80},
      {"month": "Feb", "revenue": 120, "cost": 85},
      {"month": "Mar", "revenue": 150, "cost": 90}
    ]
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "month"},
        "y": {"field": "revenue", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "color": "red"},
      "encoding": {
        "x": {"field": "month"},
        "y": {"field": "cost", "type": "quantitative"}
      }
    }
  ]
}

メリット・デメリット

プログラムのロジックを書かずにJSONだけでグラフが完成するのが最大の強みです。データの種類（カテゴリなのか数値なのか等）を指定すれば軸目盛りやスケールを自動設定してくれますし、PythonからはAltairという同じ書き方ができるツールも用意されています。

その分JSONの記述量がそこそこ多いのと、見た目の細かい調整がしにくい点はトレードオフです。「とりあえず手早くグラフを出したい」用途にはやや大げさで、分析レポートやデータの再現性が重要な場面でこそ真価を発揮するツールだと思います。

AIとの相性

JSON形式で構造が明確なので、AIにとっては非常に生成しやすいフォーマットです。「このデータをVega-Liteで棒グラフにして」とデータを渡すだけで、$schema からencoding設定まで一式出力されます。実はClaude Artifactsなど複数のAIツールが内部的にVega-Liteを使っており、AI時代のデータ可視化フォーマットとして存在感を増しています。

Chart.js — 一番メジャーなグラフツール

Chart.jsはWebページにグラフを表示するツールとして最も広く使われている定番です。棒グラフ、折れ線、円グラフ、ドーナツ、レーダーチャートなど8種類の基本グラフを簡単に作れます。管理画面やダッシュボードのグラフで見かけることが多いはずです。

サンプル：棒グラフ

const ctx = document.getElementById('barChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Mermaid', 'D2', 'PlantUML', 'Graphviz', 'SVG'],
    datasets: [{
      label: 'AI相性スコア',
      data: [95, 85, 75, 70, 60],
      backgroundColor: [
        '#4caf50', '#2196f3', '#ff9800', '#9c27b0', '#f44336'
      ]
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: { display: true, text: 'ダイアグラムツールのAI相性比較' }
    }
  }
});

サンプル：レーダーチャート

new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['対応図種', 'AI相性', 'ツール連携', '表現力', 'レイアウト制御'],
    datasets: [
      {
        label: 'Mermaid',
        data: [95, 95, 100, 70, 30],
        borderColor: '#4caf50',
        backgroundColor: 'rgba(76, 175, 80, 0.1)'
      },
      {
        label: 'D2',
        data: [85, 85, 50, 85, 60],
        borderColor: '#2196f3',
        backgroundColor: 'rgba(33, 150, 243, 0.1)'
      }
    ]
  }
});

メリット・デメリット

普及率が高いので、何か困ってもStack Overflowを検索すればまず解決策が見つかります。APIもシンプルで、new Chart(ctx, {...}) に設定オブジェクトを渡すだけ。アニメーションやツールチップが標準で付いてくるので、少ないコードで見栄えの良いグラフを出せます。

画像を拡大すると若干ぼやける（Canvas方式のため）点は好みが分かれるところで、印刷用途やRetina画面での見栄えを重視するなら後述のRechartsやObservable Plotの方が有利です。データポイントが数千を超えると表示が重くなることもあります。

AIとの相性

普及率が高いおかげで、AIの学習データにChart.jsのコードが大量に含まれています。「このデータを折れ線グラフにして」とデータを渡せば、new Chart(ctx, {...}) の初期化コードからオプション設定まで一通り出てきます。私の体感では、グラフ系ツールの中でChart.jsが最も安定してAI生成が動く印象です。

Recharts — Reactアプリ専用のグラフツール

RechartsはReactで作られたWebアプリにグラフを組み込むための専用ツールです。Reactを使っていない人には関係ありませんが、Reactアプリを開発しているなら最も自然にグラフを追加できる選択肢です。拡大しても劣化しないSVG方式で描画されます。

サンプル：棒グラフ

import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';

const data = [
  { name: 'Mermaid', score: 95 },
  { name: 'D2', score: 85 },
  { name: 'PlantUML', score: 75 },
  { name: 'Graphviz', score: 70 },
];

function AIScoreChart() {
  return (
    <BarChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Bar dataKey="score" fill="#4caf50" />
    </BarChart>
  );
}

サンプル：複合チャート

import { ComposedChart, Line, Area, XAxis, YAxis, Tooltip } from 'recharts';

const data = [
  { month: '1月', users: 1200, revenue: 100 },
  { month: '2月', users: 1800, revenue: 120 },
  { month: '3月', users: 2400, revenue: 150 },
];

function Dashboard() {
  return (
    <ComposedChart width={600} height={300} data={data}>
      <XAxis dataKey="month" />
      <YAxis yAxisId="left" />
      <YAxis yAxisId="right" orientation="right" />
      <Tooltip />
      <Area yAxisId="left" dataKey="users" fill="#e3f2fd" stroke="#1976d2" />
      <Line yAxisId="right" dataKey="revenue" stroke="#f44336" />
    </ComposedChart>
  );
}

メリット・デメリット

Reactで開発しているなら、グラフもReactの部品として扱えるのは自然です。データが変わると自動でグラフも更新され、拡大しても劣化しません。Reactアプリのダッシュボードにはぴったりの選択肢です。

裏を返せば、React以外の環境では使えません。Vue.jsやSvelteなど別のフレームワークで開発しているなら候補から外れます。また、データポイントが数千を超えると表示が重くなることもあり、大量データにはChart.jsの方が向いています。

AIとの相性

JSXベースのコンポーネント構造はAIが得意とするパターンで、<BarChart> <XAxis> <Tooltip> を組み合わせる基本形は問題なく生成されます。ただし ComposedChart で複数のY軸を使うような複雑な構成だと、yAxisId の紐付けがずれることがたまにあります。

Observable Plot — 少ないコードで高品質グラフ

Observable Plotは、データ可視化の世界で有名なD3.jsの開発者が作ったより簡潔にグラフを書けるツールです。D3.jsは高機能すぎて100行以上のコードが必要になることも多いのですが、Observable Plotなら10行程度で同等の品質のグラフが出せます。

React・Vue・素のHTMLなど、どの環境でも使えます。

サンプル：棒グラフ

import * as Plot from "@observablehq/plot";

const data = [
  { tool: "Mermaid", score: 95 },
  { tool: "D2", score: 85 },
  { tool: "PlantUML", score: 75 },
  { tool: "Graphviz", score: 70 },
];

const chart = Plot.plot({
  marks: [
    Plot.barY(data, { x: "tool", y: "score", fill: "tool" }),
    Plot.ruleY([0])
  ],
  x: { label: "ツール" },
  y: { label: "AI相性スコア" }
});

document.body.appendChild(chart);

Plot.barY() の1行でデータと軸のマッピングが完了します。

サンプル：散布図

Plot.plot({
  marks: [
    Plot.dot(data, {
      x: "complexity",
      y: "ai_score",
      fill: "category",
      r: "popularity",
      tip: true
    })
  ],
  color: { legend: true }
});

tip: true でホバー時のツールチップが自動追加されます。

メリット・デメリット

少ないコードで高品質なグラフが出るのが魅力で、拡大しても劣化しないSVG出力です。React・Vue・素のHTMLどこでも動くので環境を選びません。

まだ新しいツールなので、Chart.jsほど情報が豊富ではありません。凝ったカスタマイズをしたくなったときにサンプルが見つからず苦労する場面はあり得ます。

AIとの相性

書き方がシンプルなのでAIにとっても生成しやすい設計です。ただしChart.jsやVega-Liteに比べるとまだ新しく学習データが少ないため、プロンプトで「Observable Plotで」と明示指定しないと他のツールのコードが返ってくることがあります。指定さえすれば、Plot.barY() や Plot.dot() を使った基本的なグラフは問題なく生成されます。

実践Tips：AIチャットでグラフを即プレビュー

Claude（Artifacts機能）やChatGPT（Canvas機能）を使うと、AIが生成したグラフコードをその場でプレビューできます。たとえばClaudeに「このCSVデータを折れ線グラフにして」と依頼すると、Vega-LiteやChart.jsのコードが生成され、同じ画面でグラフの見た目を確認しながら「色を変えて」「凡例を下に移動して」と対話的に調整できます。

この方法なら自分のローカル環境に何もインストールしなくてもグラフを試作でき、完成したコードだけをプロジェクトにコピーすれば済みます。特にVega-LiteのJSON形式はコピー&ペーストとの相性が良く、AIチャットで完成させたJSON定義をそのままアプリに組み込むワークフローが効率的です。

選定ガイド

導入方法

Vega-Lite

npm install vega-lite vega vega-embed
# Python: pip install altair

Chart.js

npm install chart.js
# CDN: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Recharts

npm install recharts

Observable Plot

npm install @observablehq/plot

この記事に関連する記事

まとめ

本記事ではAI時代のコード管理図形として、グラフ・チャート4種を比較解説しました。如何だったでしょうか。

Webアプリにグラフを入れるなら、まずChart.jsを試してみるのが良いと思います。普及率が高い分だけ情報も多く、困ったときに解決策が見つかりやすいです。

AIにグラフを生成させたいならVega-Liteが向いていますし、ReactアプリならRechartsが自然に馴染みます。少ないコードで高品質なグラフを出したいならObservable Plotも検討してみてください。

次回はマインドマップ・ホワイトボード系（Markmap、Excalidraw）について解説します。

シリーズ目次 → 『AI時代の図形』完全ガイド

各ツールの詳細は公式サイトも参考にしてください：Vega-Lite / Chart.js / Recharts / Observable Plot

それでは次の記事も閲覧いただけると幸いです。