シンプル版とゴリゴリ版の 2 グラフで徹底解説

最後は ApexCharts + react-apexcharts 編 です。

Recharts / Nivo / Chart.js と比べたときの ApexCharts の特徴は、

ズーム・パン・選択など インタラクティブ操作が強い
ツールバーが標準で付いてくる（zoom in/out、pan、reset など）
複数 Y 軸・シリーズごとのタイプ（column + line など）の表現力

まさに “ダッシュボード操作感” に全振りしたチャートライブラリ という印象です。

この記事では、他ライブラリと同様に

Simple ApexCharts（ミニマル設定）
ApexCharts Advanced（インタラクティブ & ダッシュボード向け）

の 2 パターンでサンプルを用意します。

📂 GitHub リポジトリ

この記事で紹介しているコードは、以下のリポジトリにまとめています。

🔗 GitHub: Kazuya-Sakashita/react-charts-comparison

　構成例（Next.js + TypeScript）の一部：

src/data.ts
src/components/RechartsExample.tsx
src/components/NivoExample.tsx
src/components/ChartJsExample.tsx
src/components/ApexExample.tsx

🖼 グラフのスクリーンショット

記事内でイメージしやすいように、実際に描画したグラフのスクリーンショットも貼っておきます。

ApexCharts とは？

ApexCharts は、JavaScript 用のインタラクティブチャートライブラリです。

ライン、棒、エリア、散布図、ヒートマップなど幅広いチャートタイプ
ズーム・パン・範囲選択が標準装備
複数 Y 軸、シリーズごとのタイプ指定（column + line など）が簡単
React では react-apexcharts を通して利用

「見るだけのグラフ」ではなく「いじって気持ちいいグラフ」 を作りたいときに候補になるライブラリです。

インストール

npm install apexcharts react-apexcharts

共通データ（src/data.ts）

他ライブラリと同じく、実績値と目標値の月次データを使います。

ts// src/data.ts

export type ChartDatum = {
  month: string;
  actual: number; // 実績
  target: number; // 目標
};

export const chartData: ChartDatum[] = [
  { month: "Jan", actual: 120, target: 150 },
  { month: "Feb", actual: 210, target: 200 },
  { month: "Mar", actual: 160, target: 220 },
  { month: "Apr", actual: 280, target: 250 },
  { month: "May", actual: 300, target: 260 },
];

ApexExample コンポーネントの全体像

ApexExample コンポーネントの中で、

上段：Simple ApexCharts（ミニマル設定の折れ線）
下段：ApexCharts Advanced（グラデーション＋複数 Y 軸＋ツールバー）
の 2 グラフを縦に並べて表示します。

実装コード（src/components/ApexExample.tsx）

// src/components/ApexExample.tsx
import dynamic from "next/dynamic";
import type { ApexOptions } from "apexcharts";
import { chartData } from "../data";

// react-apexcharts は SSR 非対応なので dynamic import 推奨（Next.js の場合）
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

const categories = chartData.map((d) => d.month);
const actualValues = chartData.map((d) => d.actual);
const targetValues = chartData.map((d) => d.target);

/** ------- Simple ApexCharts（ミニマル版） ------- */

const simpleOptions: ApexOptions = {
  chart: {
    type: "line",
    toolbar: {
      show: false,
    },
    zoom: {
      enabled: false,
    },
    foreColor: "#6b7280",
  },
  stroke: {
    curve: "smooth",
    width: 3,
  },
  colors: ["#3b82f6", "#9ca3af"],
  dataLabels: {
    enabled: false,
  },
  grid: {
    borderColor: "#e5e7eb",
  },
  xaxis: {
    categories,
    labels: {
      style: {
        colors: "#6b7280",
      },
    },
  },
  yaxis: {
    labels: {
      style: {
        colors: "#6b7280",
      },
    },
  },
  legend: {
    position: "top",
    labels: {
      colors: "#4b5563",
    },
  },
};

const simpleSeries = [
  {
    name: "実績",
    data: actualValues,
  },
  {
    name: "目標",
    data: targetValues,
  },
];

/** ------- ApexCharts Advanced（ダッシュボード版） ------- */

const advancedOptions: ApexOptions = {
  chart: {
    type: "line",
    foreColor: "#e5e7eb",
    toolbar: {
      show: true,
      tools: {
        download: true,
        selection: true,
        zoom: true,
        zoomin: true,
        zoomout: true,
        pan: true,
        reset: true,
      },
    },
    zoom: {
      enabled: true,
    },
    animations: {
      enabled: true,
      easing: "easeinout",
      speed: 600,
    },
  },
  stroke: {
    curve: "smooth",
    width: [0, 3], // column は 0, line は 3
  },
  dataLabels: {
    enabled: false,
  },
  colors: ["#3b82f6", "#f97316"],
  grid: {
    borderColor: "rgba(148,163,184,0.3)",
    strokeDashArray: 4,
  },
  xaxis: {
    categories,
    axisBorder: {
      color: "rgba(148,163,184,0.6)",
    },
    axisTicks: {
      color: "rgba(148,163,184,0.6)",
    },
    labels: {
      style: {
        colors: Array(categories.length).fill("#cbd5e1"),
      },
    },
  },
  yaxis: [
    {
      title: {
        text: "実績",
        style: {
          color: "#93c5fd",
        },
      },
      labels: {
        style: {
          colors: "#93c5fd",
        },
      },
    },
    {
      opposite: true,
      title: {
        text: "目標",
        style: {
          color: "#fed7aa",
        },
      },
      labels: {
        style: {
          colors: "#fed7aa",
        },
      },
    },
  ],
  fill: {
    type: "gradient",
    gradient: {
      shade: "dark",
      gradientToColors: ["#60a5fa"],
      shadeIntensity: 0.7,
      opacityFrom: 0.85,
      opacityTo: 0.1,
      stops: [0, 40, 100],
    },
  },
  tooltip: {
    theme: "dark",
    x: {
      show: true,
    },
  },
  legend: {
    position: "top",
    labels: {
      colors: "#e5e7eb",
    },
  },
};

const advancedSeries = [
  {
    name: "実績（Column）",
    type: "column" as const,
    data: actualValues,
  },
  {
    name: "目標（Line）",
    type: "line" as const,
    data: targetValues,
  },
];

export function ApexExample() {
  return (
    <div style={{ display: "grid", gap: 24 }}>
      {/* Simple ApexCharts */}
      <section>
        <h2
          style={{
            fontSize: 14,
            fontWeight: 600,
            marginBottom: 8,
            color: "#4b5563",
          }}
        >
          Simple ApexCharts（ミニマル設定）
        </h2>
        <p
          style={{
            fontSize: 12,
            color: "#6b7280",
            marginBottom: 12,
          }}
        >
          最低限の設定だけで、実績と目標の 2
          系列を滑らかな折れ線として表示するシンプルなサンプルです。
          「とりあえず値を見たい」用途向けです。
        </p>

        <div
          style={{
            height: 260,
            padding: 12,
            background: "#ffffff",
            borderRadius: 12,
            boxShadow: "0 8px 24px rgba(15,23,42,0.06)",
          }}
        >
          <Chart
            type="line"
            options={simpleOptions}
            series={simpleSeries}
            height="100%"
            width="100%"
          />
        </div>
      </section>

      {/* ApexCharts Advanced */}
      <section>
        <h2
          style={{
            fontSize: 14,
            fontWeight: 600,
            marginBottom: 8,
            color: "#4b5563",
          }}
        >
          ApexCharts Advanced（インタラクティブ & ダッシュボード向け）
        </h2>
        <p
          style={{
            fontSize: 12,
            color: "#6b7280",
            marginBottom: 12,
          }}
        >
          実績をカラム（棒）、目標をラインで重ね、複数 Y 軸・ツールバー・グラデーション塗り
          など ApexCharts の「インタラクティブなダッシュボード表現」を詰め込んだ例です。
        </p>

        <div
          style={{
            height: 260,
            padding: 14,
            background:
              "linear-gradient(135deg, rgba(17,24,39,1), rgba(2,6,23,1))",
            borderRadius: 18,
            boxShadow: "0 18px 40px rgba(15,23,42,0.55)",
          }}
        >
          <Chart
            type="line"
            options={advancedOptions}
            series={advancedSeries}
            height="100%"
            width="100%"
          />
        </div>
      </section>
    </div>
  );
}

Simple ApexCharts（ミニマル設定）のポイント

chart.toolbar.show: false でツールバーを消し、シンプルな見た目に
stroke.curve: "smooth" でスムーズなライン
colors 配列と series 名で、凡例とスタイルをシンプルに制御
軸・グリッドは xaxis / yaxis / grid で最低限整えるだけ

「ApexCharts を最小限で使うとこうなる」という入門サンプルです。

ApexCharts Advanced（インタラクティブ & ダッシュボード向け）のポイント

このサンプルでは、ApexCharts らしさを出すために次の要素を盛り込んでいます。

1. ツールバー & ズーム・パン

chart: {
  toolbar: {
    show: true,
    tools: {
      zoom: true,
      zoomin: true,
      zoomout: true,
      pan: true,
      reset: true,
    },
  },
  zoom: { enabled: true },
}

これにより、

ドラッグで範囲ズーム
右上ボタンでズームイン／アウト
Pan で横スクロール
Reset で元の表示に戻す

といった “操作できるグラフ” になります。

2. 複数 Y 軸 × 異なるシリーズタイプ

yaxis: [
  { ... 実績用 ... },
  { opposite: true, ... 目標用 ... },
];

const advancedSeries = [
  { name: "実績（Column）", type: "column", data: actualValues },
  { name: "目標（Line）", type: "line", data: targetValues },
];

左軸：実績（カラム）
右軸：目標（ライン）

と分けることで、実績の量と目標ラインを同時に見やすくしています。

3. グラデーション塗り & ダークテーマ

fill: {
  type: "gradient",
  gradient: {
    shade: "dark",
    gradientToColors: ["#60a5fa"],
    opacityFrom: 0.85,
    opacityTo: 0.1,
  },
},
tooltip: { theme: "dark" },

実績カラムにグラデーション塗り
背景もダーク寄りにし、Tooltip を dark テーマに揃える

ことで、ダッシュボードっぽい世界観を作っています。

🧩 ApexCharts のメリット・デメリット

ApexCharts は “触れるチャート” を作るのが得意なライブラリです。
ここでは、その強みと弱みをわかりやすく整理します。

✅ メリット（強み）

1. インタラクティブ機能が標準で強い

ApexCharts 最大の特徴は ユーザー操作性 の高さです。

ズーム（範囲選択）
パン（左右移動）
ズームイン／ズームアウト
リセット
PNG でダウンロード

これらが 標準ツールバーとして自動で付く ため、ダッシュボードで強みを発揮します。

2. 複数 Y 軸 & ミックスチャートが簡単

ApexCharts は、複雑な構成の表現がかなり得意です。

左 Y 軸：棒グラフ（実績）
右 Y 軸：折れ線（目標）
シリーズごとに type: "column" | "line" を自由に設定

といった “複数チャートを重ねる構成” がとても簡単に実現できます。

3. ダッシュボードとの相性が抜群

ツールバー、ズーム挙動、複数軸、アニメーションの自然さなど、
管理画面／BIツール風 UI に最も向いたライブラリ です。

売上ダッシュボード
時系列モニタリング
KPI ウォッチ

など、プロダクトの “操作性のあるグラフ” に強くフィットします。

⚠️ デメリット（弱み）

1. React-first ではない

ApexCharts 本体は React 向けのライブラリではありません。

react-apexcharts というラッパーが必要
Next.js では SSR 非対応 → dynamic import が必須
React の再レンダリングと相性が悪い場面もある

といった点は事前に理解が必要です。

2. オプションの構造がやや複雑

chart, plotOptions, xaxis, yaxis, stroke, fill, legend …
というように設定ツリーが非常に多機能なため、

どの option がどの見た目に対応しているか
自分が探している設定がどこにあるか

を把握するには 慣れが必要 です。

3. テーマ統一には調整が必要

見た目はデフォルトでも十分ですが、
アプリ全体のブランドカラーに寄せようとすると、

軸ラベル
グリッド
塗り（fill）
ツールチップ
フォント

など、複数箇所を調整する必要があります。

🎯 ApexCharts を選ぶべきケース

ApexCharts が特に輝く用途をまとめると、次の通りです。

📌 インタラクティブ操作を重視したい

ズーム・パンが必要
範囲選択で細かく値を見たい
グラフを“触って分析する” UI を作りたい

こういう要件のとき、ApexCharts は圧倒的に有利です。

📌 複数 Y 軸やミックスチャートを多用する

“棒 + 折れ線” の組み合わせ
“Y軸が左右に2つある” ダッシュボード
実績と目標を視覚的に分けたい

という場合、ApexCharts は最小のコードで実現できます。

📌 ダッシュボードや BI ツール向け UI を作りたい

ApexCharts の UX は明らかに “ダッシュボード寄り” です。

SaaS の管理画面
企業向け KPI モニター
時系列ログの可視化ツール

こうした領域では、4 ライブラリ中 最も扱いやすい 部類です。

📝 まとめ

ApexCharts は、

インタラクション（操作性）に圧倒的に強い
複数軸・複合チャートが簡単
ダッシュボード向け UI と相性抜群

という “実務的な強さ” を持つライブラリです。

一方で React-first ではないので、

SSR（Next.js）
再レンダリング
デザインのテーマ統一

などでは多少気を使います。

最後に、4 ライブラリの総合比較は次のようになります：

ライブラリ	得意分野
Recharts	React 的なコンポーネント構成
Nivo	デザイン・世界観表現
Chart.js	定番グラフ・情報量・プラグイン
ApexCharts	インタラクティブな操作性が最強

次は 4 ライブラリ総まとめ編 で、
「結局どれを選べばいいの？」に答える記事を書くとシリーズとして美しく締まります。

👉 次回「ライブラリ総まとめ編」です。
https://qiita.com/kz2021019/items/1b41f5e805920f37e0d4