ガントチャートライブラリ比較

3つのライブラリで同じデータを表示し、実装方法とスタイルを比較。

このページでは、Apache ECharts・Plotly.js・ApexChartsを使ったガントチャートの実装パターンをインタラクティブなデモとコードで確認できます。

echartsv6.0.0 echarts-for-reactv3.0.6 plotly.js-dist-minv3.5.0 react-plotly.jsv2.6.0 apexchartsv5.10.6 react-apexchartsv2.1.0

1. Apache ECharts (echarts-for-react)

ネイティブのガントチャート機能はないが、積み上げ横棒グラフで擬似的に実現できる。JSONベースの設定で高いカスタマイズ性を持つ。

✓ 高カスタマイズ性✓ JSONベース設定✓ ダッシュボード向け

チャートを読み込み中...

特徴: 第1シリーズ（開始日オフセット）を透明にし、第2シリーズ（期間）でバーを描く積み上げ横棒アプローチ。xAxis.type: 'time' で日付軸を使用。 SSRには非対応のためdynamic importが必要。

tsx

'use client';
import dynamic from 'next/dynamic';
const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });

const tasks = [
  { task: '要件定義',         start: '2024-01-01', end: '2024-01-10' },
  { task: 'UI設計',           start: '2024-01-08', end: '2024-01-20' },
  { task: 'DB設計',           start: '2024-01-10', end: '2024-01-22' },
  { task: 'フロントエンド実装', start: '2024-01-20', end: '2024-02-10' },
  { task: 'バックエンド実装',   start: '2024-01-22', end: '2024-02-12' },
  { task: 'テスト',           start: '2024-02-10', end: '2024-02-20' },
  { task: 'リリース',         start: '2024-02-20', end: '2024-02-22' },
];

const baseTime = new Date('2024-01-01').getTime();
const maxTime  = new Date('2024-03-01').getTime() - baseTime;

export function EChartsGantt() {
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        if (params.seriesIndex === 0) return '';
        const t = tasks[params.dataIndex];
        return `${t.task}<br/>${t.start} 〜 ${t.end}`;
      },
    },
    grid: { left: '22%', right: '4%' },
    xAxis: {
      type: 'value',
      min: 0,
      max: maxTime,
      axisLabel: {
        formatter: (val: number) => {
          const d = new Date(baseTime + val);
          return `${d.getMonth() + 1}/${String(d.getDate()).padStart(2, '0')}`;
        },
      },
    },
    yAxis: {
      type: 'category',
      data: tasks.map(t => t.task),
    },
    series: [
      {
        type: 'bar',
        stack: 'gantt',
        data: tasks.map(t => new Date(t.start).getTime() - baseTime),
        itemStyle: { color: 'transparent' },
      },
      {
        type: 'bar',
        stack: 'gantt',
        data: tasks.map(t =>
          new Date(t.end).getTime() - new Date(t.start).getTime()
        ),
        itemStyle: { color: '#4f86c6', borderRadius: [0, 4, 4, 0] },
      },
    ],
  };
  return <ReactECharts option={option} style={{ height: 360 }} />;
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Apache EChartsを使ったガントチャートを実装してください。
- 使用ライブラリ: echarts-for-react の ReactECharts（dynamic importでSSR無効化）
- 積み上げ横棒グラフ（type: 'bar', stack: 'gantt'）で実装
- xAxis.type: 'value'、基準日（2024-01-01）からのミリ秒差分で座標を計算する
- 第1シリーズ（開始日オフセットms）は透明、第2シリーズ（期間ms）でバーを表示
- axisLabel.formatter で値をミリ秒から日付文字列（M/DD）に変換して表示
- ホバー時にタスク名・開始日・終了日をツールチップで表示（seriesIndex === 0 は空文字を返す）
- サンプルデータ: プロジェクトの7タスク（要件定義〜リリース）

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

2. Plotly.js (react-plotly.js)

横棒グラフの base プロパティを使ってガントチャートを実現。ズーム・パン・凡例操作などのインタラクションが豊富。

✓ ズーム・パン標準✓ インタラクティブ✓ データ分析向け

チャートを読み込み中...

特徴: base に開始日を設定し、x にミリ秒単位の期間を渡すだけで日付軸のガントチャートを実現。バンドルサイズが大きいため plotly.js-dist-min の使用を推奨。SSRには非対応のためdynamic importが必要。

tsx

'use client';
import dynamic from 'next/dynamic';
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

const tasks = [
  { task: '要件定義',         start: '2024-01-01', end: '2024-01-10' },
  { task: 'UI設計',           start: '2024-01-08', end: '2024-01-20' },
  { task: 'DB設計',           start: '2024-01-10', end: '2024-01-22' },
  { task: 'フロントエンド実装', start: '2024-01-20', end: '2024-02-10' },
  { task: 'バックエンド実装',   start: '2024-01-22', end: '2024-02-12' },
  { task: 'テスト',           start: '2024-02-10', end: '2024-02-20' },
  { task: 'リリース',         start: '2024-02-20', end: '2024-02-22' },
];

const colors = ['#6366f1','#6366f1','#10b981','#10b981','#10b981','#f59e0b','#ef4444'];

export function PlotlyGantt() {
  return (
    <Plot
      data={[{
        type: 'bar',
        orientation: 'h',
        x: tasks.map(t =>
          new Date(t.end).getTime() - new Date(t.start).getTime()
        ),
        y: tasks.map(t => t.task),
        base: tasks.map(t => t.start),
        marker: { color: colors },
        hovertemplate: '%{y}<br>開始: %{base|%Y/%m/%d}<extra></extra>',
      }]}
      layout={{
        xaxis: { type: 'date', tickformat: '%m/%d' },
        yaxis: { autorange: 'reversed' },
        margin: { l: 130, r: 20, t: 20, b: 40 },
        height: 360,
      }}
      config={{ displayModeBar: false }}
      style={{ width: '100%' }}
    />
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Plotly.jsを使ったガントチャートを実装してください。
- 使用ライブラリ: react-plotly.js + plotly.js-dist-min（dynamic importでSSR無効化）
- type: 'bar', orientation: 'h', base に開始日文字列を指定して横棒ガントを実現
- x に期間（ミリ秒）、base に開始日文字列を渡す
- xaxis.type: 'date' で日付フォーマット表示
- yaxis.autorange: 'reversed' でタスクを上から順に表示
- サンプルデータ: プロジェクトの7タスク（要件定義〜リリース）

3. ApexCharts (react-apexcharts)

rangeBar タイプでガントチャートをネイティブサポート。開始・終了タイムスタンプを渡すだけで簡単に実装できる。

✓ ネイティブ対応✓ 簡単実装✓ ダッシュボード向け

チャートを読み込み中...

特徴: type: 'rangeBar' でガントチャートをネイティブサポート。各タスクに y: [開始timestamp, 終了timestamp] を渡すだけで日付範囲バーが描画される。3ライブラリ中最もシンプルに実装できる。SSRには非対応のためdynamic importが必要。

tsx

'use client';
import dynamic from 'next/dynamic';
const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });

const tasks = [
  { task: '要件定義',         start: '2024-01-01', end: '2024-01-10' },
  { task: 'UI設計',           start: '2024-01-08', end: '2024-01-20' },
  { task: 'DB設計',           start: '2024-01-10', end: '2024-01-22' },
  { task: 'フロントエンド実装', start: '2024-01-20', end: '2024-02-10' },
  { task: 'バックエンド実装',   start: '2024-01-22', end: '2024-02-12' },
  { task: 'テスト',           start: '2024-02-10', end: '2024-02-20' },
  { task: 'リリース',         start: '2024-02-20', end: '2024-02-22' },
];

const series = [{
  data: tasks.map(t => ({
    x: t.task,
    y: [new Date(t.start).getTime(), new Date(t.end).getTime()],
  })),
}];

const options = {
  chart: { type: 'rangeBar' as const },
  plotOptions: {
    bar: { horizontal: true, barHeight: '60%', borderRadius: 4 },
  },
  xaxis: { type: 'datetime' as const },
  tooltip: { x: { format: 'yyyy/MM/dd' } },
  colors: ['#4f86c6'],
};

export function ApexGantt() {
  return (
    <ApexChart
      type="rangeBar"
      series={series}
      options={options}
      height={360}
      width="100%"
    />
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、ApexChartsを使ったガントチャートを実装してください。
- 使用ライブラリ: react-apexcharts（dynamic importでSSR無効化）
- type: 'rangeBar', plotOptions.bar.horizontal: true
- series[].data の各項目に { x: タスク名, y: [開始timestamp, 終了timestamp] } を渡す
- xaxis.type: 'datetime' で日付軸を使用
- tooltip.x.format で日付フォーマットを指定
- サンプルデータ: プロジェクトの7タスク（要件定義〜リリース）

ライブラリ比較

ライブラリ	ガント対応	インタラクション	学習コスト	おすすめ用途
Apache ECharts	カスタム実装	高	中	多機能ダッシュボード
Plotly.js	横棒応用	高	低	データ分析・科学系
ApexCharts	rangeBar（ネイティブ）	高	低	ビジネスダッシュボード

選択のポイント

•Apache ECharts: 高いカスタマイズ性が必要な場合。他のEChartsチャートと統一感を出したいダッシュボード向け。積み上げ横棒で擬似実装するため、カスタマイズの余地が大きい。
•Plotly.js: データ分析・科学系のプロジェクトで既にPlotly.jsを使っている場合。ズームや凡例操作などのインタラクションが豊富で、探索的なデータ可視化に向いている。
•ApexCharts: rangeBar でガントチャートをネイティブサポート。最もシンプルに実装できるため、素早くガントチャートを組み込みたいビジネスダッシュボードに最適。

ガントチャートは、プロジェクトのタスクと期間を時系列で表示する水平棒グラフ。タスクの開始・終了日と重なりを一目で把握できる。

プロジェクト管理・スケジュール管理・工程表など、複数タスクの期間と並行実行を可視化したい場面で使われる。

主なバリエーション