Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kz2021019(Kazz)

【ApexCharts】React で “インタラクティブなダッシュボード感” を出す

Last updated at Posted at 2025-11-20

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

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

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

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

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

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

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

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

📂 GitHub リポジトリ

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

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

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

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

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

スクリーンショット 2025-11-21 6.39.59.png

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?