Chart.jsとは？JavaScriptでグラフを作成する方法と活用ポイントを解説

Webアプリケーションでは、数値データをそのまま表で表示するだけでは、傾向や変化を直感的に把握しにくい場合があります。売上推移、アクセス数、ユーザー属性、広告成果、問い合わせ件数、在庫状況、KPIの達成率などは、グラフとして可視化することで、データの意味を短時間で理解しやすくなります。特に管理画面や分析画面では、データを見やすく整理し、意思決定につなげるための可視化が重要になります。

Chart.jsは、JavaScriptでグラフを簡単に作成できる代表的なグラフライブラリです。HTMLのCanvas要素に対してグラフを描画し、棒グラフ、折れ線グラフ、円グラフ、ドーナツチャート、散布図、レーダーチャートなど、実務でよく使われるグラフタイプを比較的少ないコードで実装できます。デフォルトでも見やすいグラフを作成でき、必要に応じて色、凡例、軸、ツールチップ、レスポンシブ表示などを細かく調整できます。

また、Chart.jsは単体のJavaScriptだけでなく、ReactやTypeScriptとも組み合わせて利用できます。Reactではreact-chartjs-2を使ってコンポーネント化しやすく、TypeScriptではChartDataやChartOptionsの型を活用して、グラフ設定をより安全に管理できます。本記事では、Chart.jsの基本から各グラフタイプの使い方、カスタマイズ、React・TypeScript連携、他ライブラリとの違い、実務でのベストプラクティスまで体系的に解説します。

1. Chart.jsとは

Chart.jsとは、JavaScriptでグラフやチャートを作成するためのオープンソースのグラフライブラリです。HTMLのCanvas要素を使ってグラフを描画し、データセット、ラベル、表示オプションを指定することで、視覚的に分かりやすいデータ可視化を実現できます。棒グラフや折れ線グラフのような基本的なグラフだけでなく、円グラフ、ドーナツチャート、レーダーチャート、散布図、複合グラフなどにも対応しており、管理画面や分析ダッシュボードで幅広く利用できます。

Chart.jsの魅力は、導入のしやすさと柔軟性のバランスにあります。高度なデータ可視化ライブラリの中には、自由度が高い一方で学習コストが高いものもありますが、Chart.jsは比較的シンプルな設定で実用的なグラフを作成できます。そのため、短期間でグラフ表示を実装したいプロジェクトや、標準的なグラフを安定して表示したいWebアプリケーションに向いています。

1.1 Chart.jsが開発された背景

Chart.jsが利用される背景には、Web上でデータを分かりやすく可視化したいというニーズがあります。従来、グラフを作成するには画像を用意したり、サーバー側でグラフを生成したり、複雑な描画処理を自前で実装したりする必要がありました。しかし、Webアプリケーションが高度化し、ブラウザ上で動的にデータを表示する需要が増えるにつれて、JavaScriptだけで柔軟にグラフを描画できるライブラリが求められるようになりました。

Chart.jsは、こうしたニーズに応えるために、HTML5 Canvasを使ってブラウザ上でグラフを描画するライブラリとして普及しました。データをJavaScriptオブジェクトとして渡し、グラフタイプや表示オプションを指定するだけで、比較的簡単にグラフを作成できます。これにより、フロントエンド開発者はサーバー側で画像を生成することなく、画面上でインタラクティブなデータ可視化を実装できるようになりました。

1.2 Chart.jsが人気を集める理由

Chart.jsが人気を集める理由は、シンプルな使い方で見やすいグラフを作成できることです。Canvas要素を用意し、new Chart()でグラフタイプ、ラベル、データセット、オプションを指定するだけで、基本的なグラフを表示できます。設定項目は多いものの、最小構成では非常に短いコードで動作するため、初学者でも導入しやすい点が評価されています。

また、レスポンシブ対応やアニメーション、ツールチップ、凡例など、実務でよく必要になる機能が標準で整っていることも人気の理由です。グラフは単に表示できればよいわけではなく、画面サイズに合わせて崩れずに表示されること、ユーザーがデータの意味を理解しやすいこと、ダッシュボード全体のUIと調和することが重要です。Chart.jsは、こうした実務上の要件に対応しやすいため、多くのWeb開発で利用されています。

2. Chart.jsの主な特徴

Chart.jsの主な特徴は、JavaScriptだけでグラフを作成できること、軽量で導入しやすいこと、レスポンシブ表示に対応していること、複数のグラフタイプを利用できることです。データ可視化の基本機能がまとまっているため、売上レポート、アクセス解析、KPIダッシュボード、ユーザー分析、管理画面など、さまざまな業務アプリケーションで活用できます。

さらに、Chart.jsはカスタマイズ性も備えています。色、線の太さ、凡例、軸、ツールチップ、アニメーション、表示形式などを調整できるため、単純なサンプルグラフだけでなく、実務用の画面デザインに合わせたグラフも作成できます。高度な独自可視化には別のライブラリが向く場合もありますが、標準的なグラフを効率よく作成する用途では非常に扱いやすいライブラリです。

2.1 JavaScriptだけでグラフを作成できる

Chart.jsは、JavaScriptだけでグラフを作成できます。HTMLにCanvas要素を配置し、JavaScript側でグラフ設定を記述することで、ブラウザ上にグラフを描画できます。画像ファイルを用意したり、サーバー側でグラフを生成したりする必要がないため、データに応じて動的に表示内容を変更できます。

たとえば、APIから取得した売上データを棒グラフにしたり、アクセス数の推移を折れ線グラフで表示したり、ユーザー属性の割合を円グラフで表示したりできます。データが変わればグラフも更新できるため、リアルタイム性や更新頻度が求められるダッシュボードにも活用しやすいです。JavaScriptのデータ構造とグラフ表示を直接結び付けられることが、Chart.jsの大きな利点です。

2.2 軽量で導入しやすい

Chart.jsは、比較的導入しやすいグラフライブラリです。npmでインストールしてモジュールとして使うことも、CDNで読み込んでシンプルなHTMLページに追加することもできます。小規模なプロトタイプから本格的なWebアプリケーションまで、プロジェクトの規模に応じて導入方法を選べます。

また、Chart.jsは標準的なグラフを作るための設定が分かりやすく、最初のグラフ表示までのハードルが低い点も特徴です。D3.jsのような自由度の高いライブラリでは、描画処理を細かく組み立てる必要がありますが、Chart.jsではグラフタイプとデータを指定するだけで基本的な表示ができます。そのため、短期間で見やすいグラフを実装したい場合に適しています。

2.3 レスポンシブ対応が標準搭載されている

Chart.jsは、レスポンシブ表示に対応しており、画面サイズやコンテナサイズに応じてグラフを調整できます。Webアプリケーションでは、デスクトップ、タブレット、スマートフォンなど、さまざまな画面幅で表示されることがあります。グラフが固定サイズのままだと、画面からはみ出したり、文字が読みにくくなったりする可能性があります。

Chart.jsでは、グラフ用のコンテナを適切に設計し、レスポンシブ設定を活用することで、画面サイズに合わせた表示がしやすくなります。ただし、レスポンシブ対応があるからといって、すべて自動で最適な表示になるわけではありません。ラベル数が多すぎる場合や、データ量が多い場合は、表示する項目を絞る、スクロール領域を設ける、別のグラフ形式にするなどの設計も必要です。

2.4 豊富なグラフタイプを利用できる

Chart.jsでは、棒グラフ、折れ線グラフ、円グラフ、ドーナツチャート、レーダーチャート、散布図、バブルチャート、極座標グラフなど、複数のグラフタイプを利用できます。用途に応じて適切なグラフを選ぶことで、データの意味をより分かりやすく伝えられます。たとえば、カテゴリ別の比較には棒グラフ、時系列の推移には折れ線グラフ、割合の表示には円グラフやドーナツチャートが向いています。

複数のグラフタイプを組み合わせることもできます。たとえば、売上金額を棒グラフで表示し、成長率を折れ線グラフで重ねることで、BIツール風の分析画面を構築できます。Chart.jsは標準的なグラフタイプを広くカバーしているため、一般的な業務ダッシュボードであれば十分に対応しやすいライブラリです。

3. Chart.jsのインストール方法

Chart.jsは、npmまたはCDNで導入できます。ReactやTypeScriptを使うようなモダンな開発環境ではnpmを使うことが多く、シンプルな静的HTMLページや試作用途ではCDNを使うこともできます。どちらの方法でも、Canvas要素を用意してChartインスタンスを生成するという基本の流れは同じです。

導入方法を選ぶ際は、プロジェクトの構成を考えることが重要です。ビルドツールを使っている場合はnpmで管理した方が依存関係を追いやすく、TypeScriptやReactとの連携もしやすくなります。一方、簡単なサンプルや社内資料用の静的ページであれば、CDNを使って素早く試す方法も有効です。

3.1 npmでChart.jsを導入する方法

npmでChart.jsを導入する場合は、プロジェクトのルートディレクトリでnpm install chart.jsを実行します。これにより、Chart.jsを依存関係として追加でき、JavaScriptやTypeScriptのファイルからインポートして利用できます。Vite、Next.js、Webpackなどのビルド環境を使う場合は、npm導入が一般的です。

npmで導入した場合は、必要なコンポーネントを登録して利用する構成が推奨されることがあります。Chart.jsはバージョンによってインポートや登録の考え方が変わるため、使用するバージョンに合わせて公式ドキュメントを確認することが大切です。ツリーシェイキングを意識する場合は、必要なチャート要素やスケールだけを登録する設計も検討できます。

npm install chart.js

3.2 CDNでChart.jsを利用する方法

CDNでChart.jsを利用する場合は、HTMLファイルにスクリプトタグを追加します。ビルド環境を用意しなくても使えるため、簡単なデモや学習用途では非常に便利です。Canvas要素をHTMLに配置し、CDNでChart.jsを読み込んだ後、JavaScriptでnew Chart()を実行すればグラフを表示できます。

CDNは手軽ですが、本格的なアプリケーションでは依存バージョン管理やビルド最適化の観点で注意が必要です。プロジェクト全体で依存関係を管理したい場合や、ReactやTypeScriptと組み合わせたい場合は、npmで導入した方が扱いやすくなります。CDNは素早く試すための方法、npmは実務プロジェクト向けの方法として使い分けるとよいでしょう。

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

3.3 TypeScriptでChart.jsを利用する方法

TypeScriptでChart.jsを利用する場合は、npmでchart.jsを導入し、必要な型をインポートして利用します。Chart.jsには型定義が用意されているため、ChartDataやChartOptionsなどを使って、グラフデータやオプションを型安全に管理できます。これにより、設定項目の誤りやデータ構造の不一致を開発時に見つけやすくなります。

TypeScriptで利用するメリットは、グラフ設定が複雑になったときに特に大きくなります。たとえば、複合グラフ、複数軸、ツールチップのカスタマイズ、レスポンシブ設定などを扱う場合、設定オブジェクトが大きくなりがちです。型を付けておくことで、どのプロパティが利用できるのかを補完で確認しながら実装でき、保守性も高まります。

import {  Chart,  ChartData,  ChartOptions,  registerables, } from 'chart.js'; Chart.register(...registerables);

4. Chart.jsの基本的な使い方

Chart.jsの基本的な使い方は、Canvas要素を用意し、JavaScriptでChartインスタンスを生成し、グラフタイプ、データ、オプションを指定するという流れです。グラフはCanvas上に描画されるため、HTML側には描画先となるCanvasが必要です。JavaScript側では、そのCanvas要素を取得し、new Chart()に設定を渡します。

最初に理解すべき構成は、type、data、optionsの3つです。typeは棒グラフや折れ線グラフなどの種類を指定し、dataはラベルとデータセットを指定し、optionsは軸、凡例、ツールチップ、レスポンシブ設定などを指定します。この3つを理解すれば、基本的なChart.jsのグラフは作成できます。

4.1 Chart.jsでグラフを作成する流れ

Chart.jsでグラフを作成する流れは、まずCanvas要素を準備し、次に表示したいデータを作成し、最後にChartインスタンスを生成するという順番です。データは、ラベルとデータセットに分けて定義します。ラベルは横軸やカテゴリ名として使われ、データセットは実際に表示する数値や系列情報を持ちます。

実務では、データを固定値として書くのではなく、APIから取得した結果をChart.js用の形式に変換することが多くなります。たとえば、売上APIから取得した月別売上データを、labelsとdatasetsに変換して棒グラフに表示します。この変換処理を共通化しておくと、複数のグラフで再利用しやすくなります。

4.2 Canvas要素を準備する方法

Chart.jsでは、グラフを描画するためにCanvas要素を使います。HTML内にcanvasタグを配置し、JavaScript側でその要素を取得します。Canvasをそのまま配置するだけでもグラフは描画できますが、レスポンシブ表示を考える場合は、Canvasを囲むコンテナを用意し、そのサイズを調整する設計が重要です。

グラフ表示では、Canvas自体のサイズだけでなく、親要素の幅や高さも考慮する必要があります。特にダッシュボードでは、カード型レイアウトの中に複数のグラフを配置することが多いため、コンテナの高さや余白を統一すると見た目が整いやすくなります。Chart.jsのレスポンシブ機能を活かすには、HTMLとCSS側のレイアウト設計も大切です。

<div class="chart-container">  <canvas id="salesChart"></canvas> </div>

4.3 Chartインスタンスを生成する方法

Canvas要素を取得したら、new Chart()を使ってChartインスタンスを生成します。第1引数にはCanvas要素またはコンテキストを渡し、第2引数にはグラフ設定を渡します。設定には、グラフの種類、データ、オプションを含めます。これにより、Canvas上に指定したグラフが描画されます。

Chartインスタンスは、グラフの更新や破棄にも関わります。Reactなどのフレームワークで直接Chart.jsを扱う場合、コンポーネントの再描画やアンマウント時に古いインスタンスを適切に破棄しないと、描画の重複やメモリリークが発生する可能性があります。そのため、フレームワークと組み合わせる場合は専用ラッパーライブラリを使うか、ライフサイクル管理を意識することが重要です。

const ctx = document.getElementById('salesChart'); new Chart(ctx, {  type: 'bar',  data: {    labels: ['1月', '2月', '3月'],    datasets: [      {        label: '売上',        data: [120, 180, 240],      },    ],  }, });

5. Chart.jsで棒グラフを作成する方法

棒グラフは、カテゴリごとの数値を比較するために使われる代表的なグラフです。売上、件数、人数、在庫数、アンケート結果など、カテゴリ別の差を分かりやすく表現できます。Chart.jsでは、type: 'bar'を指定することで棒グラフを作成できます。

棒グラフは、多くの業務画面で利用しやすいグラフです。たとえば、月別売上、店舗別売上、商品カテゴリ別売上、部署別問い合わせ件数などを比較する場合に適しています。数値の大小を直感的に比較できるため、ダッシュボードやレポート画面の基本グラフとしてよく使われます。

5.1 棒グラフとは

棒グラフとは、カテゴリごとの値を棒の長さで表現するグラフです。横軸にカテゴリ、縦軸に数値を配置する形式が一般的ですが、横向きの棒グラフとして表示することもできます。カテゴリ間の比較に向いており、どの項目が大きいのか、どの項目が少ないのかを一目で把握できます。

棒グラフを使う際は、カテゴリ数が多すぎないように注意する必要があります。カテゴリが多すぎると、ラベルが読みにくくなり、比較もしづらくなります。その場合は、上位項目だけを表示する、横棒グラフにする、フィルターを用意する、ページングするなどの工夫が必要です。グラフは情報を詰め込むものではなく、判断しやすく整理するものとして設計することが重要です。

5.2 棒グラフを表示する方法

Chart.jsで棒グラフを表示するには、typeにbarを指定し、labelsにカテゴリ名、datasetsに数値データを設定します。軸の開始位置を0にしたい場合は、options.scales.y.beginAtZeroを指定します。売上や件数のように0を基準に比較したいデータでは、縦軸を0から始めると誤解の少ない表示になります。

棒グラフでは、データセットごとに色や枠線、棒の太さ、角丸なども調整できます。ブランドカラーに合わせたり、複数系列を色分けしたりすることで、見やすいグラフを作成できます。ただし、色を増やしすぎると視認性が下がるため、意味のある色分けに絞ることが大切です。

new Chart(ctx, {  type: 'bar',  data: {    labels: ['1月', '2月', '3月', '4月'],    datasets: [      {        label: '売上',        data: [120, 180, 150, 220],        borderWidth: 1,      },    ],  },  options: {    scales: {      y: {        beginAtZero: true,      },    },  }, });

5.3 売上データを可視化する方法

売上データを可視化する場合、棒グラフは非常に有効です。月別売上であれば、各月の売上を棒として表示することで、どの月に売上が高かったのか、どの時期に落ち込んだのかを把握できます。店舗別や商品別の売上比較にも向いており、経営判断やマーケティング施策の検討に役立ちます。

売上データをグラフ化する際は、単位や期間を明確にすることが重要です。たとえば、売上が円なのか万円なのか、税込なのか税抜なのか、月次なのか週次なのかを表示しないと、ユーザーが誤解する可能性があります。Chart.jsでは軸ラベルやツールチップをカスタマイズできるため、数値だけでなく意味が伝わる表示にすることが大切です。

6. Chart.jsで折れ線グラフを作成する方法

折れ線グラフは、時間の経過に伴う変化を表現するために使われるグラフです。アクセス数、売上推移、登録者数、CVR、問い合わせ件数、システム負荷など、時系列データを可視化する場合に適しています。Chart.jsでは、type: 'line'を指定することで折れ線グラフを作成できます。

折れ線グラフは、単一の数値だけでなく、複数系列の比較にも向いています。たとえば、今年と前年の売上推移を比較したり、PCとスマートフォンのアクセス数を比較したりできます。時間軸に沿って変化を見ることで、増加傾向、減少傾向、季節性、異常値などを把握しやすくなります。

6.1 折れ線グラフとは

折れ線グラフとは、連続するデータ点を線で結び、変化の流れを表現するグラフです。日別、週別、月別、時間別など、時間軸を持つデータに適しています。棒グラフがカテゴリ比較に向いているのに対し、折れ線グラフは推移や傾向の把握に向いています。

折れ線グラフを使う際は、横軸の粒度を適切に選ぶことが重要です。日別データが多すぎる場合は、週別や月別に集計した方が見やすいことがあります。また、複数の線を表示する場合は、線の色や凡例を分かりやすく設定し、どの線がどの指標を表しているかを明確にする必要があります。

6.2 時系列データを表示する方法

Chart.jsで時系列データを表示する場合、labelsに日付や月名を指定し、datasetsに各時点の数値を設定します。たとえば、月別の売上推移であれば、labelsに1月から12月までを指定し、dataに各月の売上を設定します。これだけで基本的な折れ線グラフを作成できます。

時系列データでは、欠損値や不規則な間隔にも注意が必要です。データが存在しない日を0として扱うのか、欠損として扱うのかによって、グラフの見え方が変わります。また、日付の表示形式が長すぎると横軸が読みにくくなるため、画面幅に応じて表示粒度を調整することも重要です。

new Chart(ctx, {  type: 'line',  data: {    labels: ['1月', '2月', '3月', '4月'],    datasets: [      {        label: 'アクセス数',        data: [1000, 1300, 1200, 1600],        tension: 0.3,      },    ],  }, });

6.3 アクセス解析で活用する方法

アクセス解析では、折れ線グラフを使うことで、ユーザー数やページビュー数の推移を視覚的に把握できます。日別アクセス数を表示すれば、キャンペーン開始後にアクセスが増えたか、特定の日に異常な増減があったかを確認できます。マーケティング施策やコンテンツ改善の効果測定にも役立ちます。

アクセス解析で折れ線グラフを使う場合は、単一指標だけでなく、複数指標を組み合わせるとより深い分析ができます。たとえば、ページビュー数、セッション数、コンバージョン数を同時に表示すれば、アクセス増加が成果につながっているかを判断しやすくなります。ただし、指標の単位が異なる場合は、複数軸や別グラフに分けるなど、誤解を避ける設計が必要です。

7. Chart.jsで円グラフを作成する方法

円グラフは、全体に対する各項目の割合を表示するためのグラフです。ユーザー属性、売上構成、デバイス比率、流入チャネル、アンケート回答割合など、構成比を見せたい場合に利用されます。Chart.jsでは、type: 'pie'を指定することで円グラフを作成できます。

円グラフは直感的に割合を伝えやすい一方で、項目数が多い場合や数値差が小さい場合は読みにくくなることがあります。そのため、円グラフは少数のカテゴリに絞って使うのが基本です。細かい比較が必要な場合は、棒グラフや表と組み合わせた方が分かりやすいこともあります。

7.1 円グラフとは

円グラフとは、全体を円として表し、各カテゴリの割合を扇形で表示するグラフです。全体の中でどの項目がどれくらいを占めているかを視覚的に表現できます。たとえば、ユーザーのデバイス比率として、スマートフォン、PC、タブレットの割合を表示する場合に適しています。

円グラフを使う際は、合計が意味を持つデータであることが前提です。単なるカテゴリ別の数値比較に円グラフを使うと、割合としての意味が曖昧になる場合があります。また、項目が多すぎると細い扇形が増えて読みづらくなるため、主要項目だけを表示し、残りは「その他」にまとめるなどの工夫が必要です。

7.2 割合データを表示する方法

Chart.jsで割合データを表示するには、typeにpieを指定し、labelsにカテゴリ名、datasets.dataに各カテゴリの値を設定します。Chart.jsは値の合計に対する割合として円グラフを描画するため、実際の値をそのまま指定できます。たとえば、ユーザー属性ごとの人数を渡せば、各属性の割合として表示されます。

割合データを表示する場合は、ツールチップで数値や割合を分かりやすく表示することが重要です。円グラフだけでは正確な数値を読み取りにくいため、ツールチップや凡例に補足情報を含めると使いやすくなります。必要に応じて、円グラフの横に表を並べると、視覚的な理解と正確な確認を両立できます。

new Chart(ctx, {  type: 'pie',  data: {    labels: ['PC', 'スマートフォン', 'タブレット'],    datasets: [      {        data: [35, 55, 10],      },    ],  }, });

7.3 ユーザー属性分析で活用する方法

ユーザー属性分析では、円グラフを使って性別、年代、地域、デバイス、会員種別などの構成比を表示できます。たとえば、サービス利用者の年齢層を可視化すれば、どの層にサービスが支持されているかを把握できます。マーケティング施策やコンテンツ改善、広告配信のターゲティングにも活用できます。

ただし、ユーザー属性は複数の切り口で分析することが多いため、円グラフだけで十分とは限りません。年齢層と地域、デバイスとコンバージョン率など、複数軸で比較したい場合は、棒グラフやクロス集計表と組み合わせるとより分析しやすくなります。円グラフは全体構成を直感的に把握するための入口として使うと効果的です。

8. Chart.jsでドーナツチャートを作成する方法

ドーナツチャートは、円グラフの中央に穴が空いた形式のグラフです。Chart.jsでは、type: 'doughnut'を指定することで作成できます。見た目がすっきりしており、中央部分に合計値やKPIを表示するデザインにも使いやすいため、ダッシュボードでよく利用されます。

ドーナツチャートは円グラフと同じく割合データに向いていますが、視覚的にはややモダンで、管理画面やSaaSの分析画面に馴染みやすい表現です。中央の空白を活用することで、単なる割合表示だけでなく、達成率や合計値を強調するUIを作りやすくなります。

8.1 ドーナツチャートとは

ドーナツチャートとは、円グラフの中央をくり抜いた形の割合グラフです。全体に対する各項目の構成比を示す点では円グラフと同じですが、中央にスペースがあるため、合計値や主要KPIを表示しやすい特徴があります。たとえば、売上構成比を表示しながら中央に総売上を表示する、といった使い方ができます。

ドーナツチャートは見た目が洗練されやすい一方で、正確な比較には向いていない場合があります。割合が近い項目同士を比較する場合、扇形の差を視覚的に判断しにくいことがあります。そのため、正確な比較が必要な場合は棒グラフを使い、構成比を大まかに見せたい場合にドーナツチャートを使うとよいでしょう。

8.2 円グラフとの違い

円グラフとドーナツチャートの主な違いは、中央部分の有無です。円グラフは全体を塗りつぶした円として表示しますが、ドーナツチャートは中央が空いています。この違いにより、ドーナツチャートでは中央に補足情報を表示しやすくなり、ダッシュボード向けのデザインに適しています。

一方で、データの意味としては、どちらも割合を表すグラフです。そのため、どちらを選ぶかは、デザインや表示したい情報量によって決めるとよいでしょう。シンプルに割合を示したい場合は円グラフ、中央に合計値や達成率を表示したい場合はドーナツチャートが向いています。

8.3 KPIダッシュボードで活用する方法

KPIダッシュボードでは、ドーナツチャートを使って目標達成率、売上構成比、問い合わせ分類、契約プラン比率などを表示できます。中央に達成率や合計値を配置すれば、ユーザーはグラフ全体の意味をすぐに理解できます。たとえば、目標売上に対する達成率をドーナツチャートで表示し、中央に「75%」と表示するようなUIが考えられます。

ただし、KPIダッシュボードでは、単にグラフを並べるだけではなく、どの指標が重要かを整理することが大切です。ドーナツチャートは視覚的に目立ちやすいため、重要度の低いデータに多用すると画面全体が散らかります。最重要KPIや構成比を直感的に見せたい場所に絞って使うと効果的です。

9. Chart.jsで複合グラフを作成する方法

複合グラフとは、複数のグラフタイプや複数のデータ系列を同じグラフ上に表示する方法です。たとえば、売上金額を棒グラフで表示し、利益率を折れ線グラフで重ねるような構成です。Chart.jsでは、データセットごとにグラフタイプを指定することで、棒グラフと折れ線グラフを組み合わせた表示が可能です。

複合グラフは、複数の指標の関係性を見せたい場合に便利です。ただし、情報量が増えるため、設計を誤ると見づらいグラフになります。指標の単位が異なる場合は、左右の軸を分ける、凡例を明確にする、色や線種を整理するなど、読みやすさへの配慮が必要です。

9.1 複数データを同時表示する方法

Chart.jsでは、datasetsに複数のデータセットを指定することで、複数系列のデータを同時に表示できます。たとえば、今年の売上と前年の売上を同じ棒グラフで比較したり、複数商品の販売数を同じ折れ線グラフで表示したりできます。複数系列を表示することで、単一データだけでは分からない比較や傾向を把握できます。

複数データを同時表示する場合は、凡例と色分けが重要です。どの系列が何を表しているか分からなければ、グラフの価値は下がります。系列数が多すぎる場合は、フィルターや表示切り替え機能を用意するなど、ユーザーが必要な情報に集中できる設計にするとよいでしょう。

9.2 棒グラフと折れ線グラフを組み合わせる方法

棒グラフと折れ線グラフを組み合わせると、数量と推移、金額と割合、実績と目標などを同時に表示できます。たとえば、月別売上を棒グラフで表示し、売上成長率を折れ線グラフで重ねれば、売上規模と変化率を同時に確認できます。このようなグラフは、経営ダッシュボードや営業レポートでよく利用されます。

ただし、棒グラフと折れ線グラフで単位が異なる場合は、軸の設計に注意が必要です。売上金額と成長率を同じ軸で表示すると、片方の変化が見えづらくなることがあります。その場合は、左右に別々の軸を設定する、または別グラフとして表示するなど、誤解のない表現を選ぶことが重要です。

new Chart(ctx, {  data: {    labels: ['1月', '2月', '3月'],    datasets: [      {        type: 'bar',        label: '売上',        data: [120, 180, 240],      },      {        type: 'line',        label: '成長率',        data: [5, 12, 18],      },    ],  }, });

9.3 BIツール風ダッシュボードを構築する方法

Chart.jsを使えば、複数のグラフを組み合わせてBIツール風のダッシュボードを構築できます。たとえば、上部にKPIカード、中央に売上推移の折れ線グラフ、下部にカテゴリ別売上の棒グラフやユーザー属性のドーナツチャートを配置する構成が考えられます。複数の視点からデータを確認できるため、業務判断に役立つ画面を作りやすくなります。

ダッシュボードを設計する際は、グラフを増やしすぎないことが重要です。多くのグラフを詰め込むと、どこを見ればよいのか分かりにくくなります。重要なKPIを明確にし、グラフごとに目的を持たせることで、ユーザーが素早く状況を把握できる画面になります。Chart.jsはグラフ描画の道具であり、分かりやすいダッシュボードにするには情報設計も欠かせません。

10. Chart.jsのカスタマイズ方法

Chart.jsでは、色、凡例、ツールチップ、軸ラベル、アニメーション、余白、フォントなど、さまざまな表示設定をカスタマイズできます。デフォルト設定でもグラフは表示できますが、実務ではブランドカラーやUIデザイン、業務要件に合わせて調整することが多くなります。

カスタマイズでは、見た目の美しさだけでなく、読みやすさを重視することが重要です。色が派手でも意味が分かりにくければ、データ可視化としては不十分です。ユーザーが何を比較し、どの数値を読み取り、どの判断につなげるのかを意識して設定を調整する必要があります。

10.1 カラーを変更する方法

Chart.jsでは、データセットごとに背景色や線の色を設定できます。棒グラフではbackgroundColorやborderColor、折れ線グラフでは線の色や点の色を調整できます。色を使い分けることで、複数の系列を区別しやすくなります。

ただし、色は意味を持たせて使うことが重要です。たとえば、売上は青、エラーは赤、成功は緑のように、画面全体で色の意味を統一するとユーザーが理解しやすくなります。また、色覚多様性にも配慮し、色だけで判断させるのではなく、凡例やラベル、線種なども併用するとより親切です。

10.2 凡例を設定する方法

凡例は、グラフ内の各データ系列が何を表しているかを示す要素です。複数のデータセットを表示する場合、凡例がなければユーザーはどの色や線が何を意味するのか分かりません。Chart.jsでは、options.plugins.legendで凡例の表示位置や表示有無を設定できます。

凡例は便利ですが、常に表示すればよいわけではありません。単一系列のグラフで、タイトルや軸ラベルから意味が明確な場合は、凡例を非表示にした方が画面がすっきりすることもあります。逆に複数系列や複合グラフでは、凡例が重要になります。グラフの複雑さに応じて凡例の表示を調整することが大切です。

10.3 ツールチップをカスタマイズする方法

ツールチップは、グラフ上にマウスを置いたときなどに詳細情報を表示する機能です。Chart.jsでは、ツールチップの表示内容をカスタマイズできます。たとえば、売上金額に通貨単位を付けたり、割合を追加表示したり、日付形式を整えたりできます。

ツールチップをカスタマイズすると、グラフ上では省略している情報を補足できます。たとえば、棒グラフ上には数値を直接表示せず、ホバー時に詳細な金額や前年比を表示する設計が考えられます。これにより、グラフの見た目をシンプルに保ちながら、必要な情報を確認できるようになります。

10.4 軸ラベルを設定する方法

軸ラベルは、グラフの横軸や縦軸が何を表しているかを示す重要な要素です。売上グラフであれば、縦軸が金額、横軸が月を表すように、ラベルを明確にすることでユーザーがデータを理解しやすくなります。Chart.jsでは、スケール設定の中で軸タイトルや目盛りの表示を調整できます。

軸ラベルでは、単位を明確にすることが特に重要です。たとえば、売上が「円」なのか「万円」なのか、アクセス数が「件」なのか「人」なのかを示さないと、数値の意味が曖昧になります。グラフのタイトル、軸ラベル、ツールチップを組み合わせて、ユーザーが誤解しない表示を設計することが大切です。

11. Chart.jsとReactを組み合わせる方法

ReactでChart.jsを使う場合、直接Chart.jsを操作する方法もありますが、実務ではreact-chartjs-2のようなラッパーライブラリを使うことが多くあります。Reactはコンポーネント単位でUIを構築するため、グラフもコンポーネントとして扱えると再利用しやすくなります。

Reactでグラフを扱う際は、データの更新と再描画の管理が重要です。APIから取得したデータを状態として保持し、その状態をChart.js用のデータ形式に変換してグラフへ渡します。データ取得中のローディング表示、エラー表示、空データ時の表示も合わせて設計すると、実務に耐えやすいグラフコンポーネントになります。

11.1 ReactでChart.jsを利用する方法

ReactでChart.jsを利用する基本的な考え方は、グラフのデータとオプションをコンポーネントのpropsやstateとして管理し、それをグラフ描画に渡すことです。直接Canvasを参照してChartインスタンスを作成することもできますが、ライフサイクル管理が必要になるため、実装が複雑になりやすいです。

Reactでは、コンポーネントが再レンダリングされるたびにDOMの扱いが変わる可能性があります。そのため、Chart.jsを直接使う場合は、古いインスタンスの破棄や再生成を適切に管理する必要があります。こうした手間を減らすために、React向けのラッパーを使うと、より自然にグラフをコンポーネント化できます。

11.2 react-chartjs-2を活用する方法

react-chartjs-2は、Chart.jsをReactコンポーネントとして扱いやすくするためのライブラリです。棒グラフならBar、折れ線グラフならLine、円グラフならPieのようなコンポーネントを使って表示できます。Chart.jsの設定をReactのpropsとして渡せるため、コンポーネント設計と相性が良いです。

この方法を使うと、グラフの表示ロジックをReactらしく整理できます。たとえば、売上グラフコンポーネントを作成し、外部から売上データをpropsで受け取り、内部でChart.js用のdataに変換する設計ができます。複数画面で同じグラフを使う場合にも再利用しやすくなります。

import { Bar } from 'react-chartjs-2'; export function SalesChart({ data }) {  return <Bar data={data} />; }

11.3 コンポーネント化する方法

Chart.jsのグラフをReactでコンポーネント化する場合は、表示専用のグラフコンポーネントと、データ取得を担当するコンテナ側の処理を分けると管理しやすくなります。たとえば、SalesChartは受け取ったデータを表示するだけにし、API取得や期間選択は親コンポーネントで行う設計です。この分離により、グラフ表示部分を再利用しやすくなります。

また、コンポーネント化する際は、データが空の場合や読み込み中の場合の表示も考慮する必要があります。グラフだけを作るのではなく、「データがありません」「読み込み中です」「取得に失敗しました」といった状態もUIとして設計すると、実務で使いやすいコンポーネントになります。Chart.jsは描画部分を担当し、React側では状態管理と画面設計を担当するという役割分担が重要です。

12. Chart.jsとTypeScriptを組み合わせる方法

TypeScriptでChart.jsを使うと、グラフデータやオプション設定を型安全に扱いやすくなります。グラフ設定はオブジェクトが大きくなりやすく、プロパティ名の間違いやデータ形式の不一致が起こりやすい領域です。TypeScriptの型を活用することで、こうしたミスを開発時に検出しやすくなります。

Chart.jsでは、ChartDataやChartOptionsなどの型を利用できます。これらを使うことで、棒グラフ用のデータ、折れ線グラフ用のオプションなどを明確に定義できます。特に複数人で開発する場合や、再利用可能なグラフコンポーネントを作る場合は、型定義が保守性を高めます。

12.1 型安全にグラフを実装する方法

型安全にグラフを実装するには、グラフタイプごとにデータとオプションの型を定義します。たとえば、棒グラフであればChartData<'bar'>、折れ線グラフであればChartData<'line'>のように指定できます。これにより、そのグラフタイプに合ったデータ構造やオプションを扱いやすくなります。

型を付けておくと、誤った設定をした場合にTypeScriptが警告してくれます。たとえば、存在しないオプション名を指定したり、想定外のデータ形式を渡したりした場合に気づきやすくなります。グラフ設定は表示確認だけではミスに気づきにくいこともあるため、型チェックを活用することは品質向上につながります。

12.2 ChartData型を活用する方法

ChartData型は、Chart.jsのデータ構造を型として表現するために利用できます。ラベル、データセット、各データ値などを型付きで管理できるため、APIから取得したデータをグラフ用に変換する処理でも役立ちます。たとえば、売上データをChartData<'bar'>として整形すれば、棒グラフ用のデータであることが明確になります。

実務では、APIレスポンスの型とChart.js用データの型を分けることが重要です。APIから返ってくるデータは業務データであり、そのままグラフに渡せるとは限りません。変換関数を用意し、APIレスポンスをChartData形式へ変換することで、データ取得と表示ロジックを整理しやすくなります。

import type { ChartData } from 'chart.js'; const data: ChartData<'bar'> = {  labels: ['1月', '2月', '3月'],  datasets: [    {      label: '売上',      data: [120, 180, 240],    },  ], };

12.3 ChartOptions型を活用する方法

ChartOptions型は、グラフの表示オプションを型安全に定義するために利用できます。レスポンシブ設定、凡例、ツールチップ、軸設定、アニメーションなどを指定する際に、型補完を使いながら実装できます。設定項目が多いChart.jsでは、型補完があることで実装効率が大きく向上します。

オプションはグラフごとに異なる場合もありますが、共通化できる部分も多くあります。たとえば、すべてのグラフでレスポンシブを有効にする、凡例の位置を統一する、フォントやツールチップの表示形式をそろえる、といった共通オプションを作成できます。ChartOptions型を使って共通設定を管理すれば、グラフ全体の一貫性を保ちやすくなります。

13. Chart.jsが活用される開発シーン

Chart.jsは、データを視覚的に表示する必要があるさまざまな開発シーンで活用されます。特に、管理画面ダッシュボード、SaaS分析画面、売上レポートシステム、マーケティング分析ツールなどでは、数値をグラフ化することでユーザーが状況を把握しやすくなります。表だけでは見えにくい傾向や比較を、グラフによって直感的に伝えられます。

ただし、グラフを入れれば自動的に分かりやすくなるわけではありません。どのデータをどのグラフで表示するか、どの粒度で集計するか、どの指標を強調するかを設計する必要があります。Chart.jsは可視化のための道具であり、実務で成果につなげるにはデータ設計と画面設計が重要です。

13.1 管理画面ダッシュボード

管理画面ダッシュボードでは、売上、ユーザー数、注文数、問い合わせ数、エラー件数、稼働状況などをまとめて表示することがあります。Chart.jsを使えば、棒グラフや折れ線グラフ、ドーナツチャートを組み合わせて、重要な指標を分かりやすく可視化できます。管理者は画面を開くだけで、サービスの状態や業務状況を把握しやすくなります。

ダッシュボードでは、グラフの数よりも情報の優先順位が重要です。最も重要なKPIを上部に配置し、詳細分析用のグラフを下に配置するなど、画面全体の構成を考える必要があります。Chart.jsは複数グラフを表示しやすいですが、見やすいダッシュボードにするには、ユーザーが何を判断したいのかを明確にすることが大切です。

13.2 SaaS分析画面

SaaSの分析画面では、利用者数、継続率、解約率、機能利用率、プラン別契約数、月次売上などを可視化することが多くあります。Chart.jsを使えば、これらの指標を折れ線グラフや棒グラフ、ドーナツチャートで表示できます。プロダクトの成長状況や利用傾向を把握するために、グラフは重要な役割を持ちます。

SaaS分析では、時系列データとセグメント別データを組み合わせることがよくあります。たとえば、全体の利用者数推移を折れ線グラフで表示し、プラン別構成比をドーナツチャートで表示するような構成です。Chart.jsをコンポーネント化しておけば、複数の分析画面で同じグラフ部品を再利用しやすくなります。

13.3 売上レポートシステム

売上レポートシステムでは、月別売上、商品別売上、店舗別売上、担当者別売上、前年同月比などを可視化します。Chart.jsの棒グラフや折れ線グラフを使えば、売上の増減や比較を分かりやすく表示できます。経営層や営業担当者がデータを見て判断するためには、数値の一覧だけでなく、視覚的な傾向把握が重要です。

売上レポートでは、数値の単位や集計条件を明確にすることが特に重要です。税込か税抜か、返品を含むか、期間はいつからいつまでか、集計対象は全店舗か一部店舗かなど、前提条件を明示しないと誤った判断につながる可能性があります。Chart.jsではタイトル、軸ラベル、ツールチップを活用して、データの意味を補足する設計が求められます。

13.4 マーケティング分析ツール

マーケティング分析ツールでは、広告クリック数、コンバージョン率、流入チャネル、キャンペーン成果、メール開封率、SNS反応などを可視化します。Chart.jsを使えば、時系列推移やチャネル別構成比を簡単に表示できます。施策の効果を確認し、次の改善につなげるために、グラフによる可視化は非常に有効です。

マーケティング分析では、単一の数値だけでなく、複数指標の関係を見ることが重要です。たとえば、広告費、クリック数、コンバージョン数、獲得単価を組み合わせて見ることで、施策の効率を判断できます。複合グラフや複数グラフを組み合わせることで、分析しやすい画面を作ることができます。

14. Chart.jsと他のグラフライブラリの違い

Chart.js以外にも、D3.js、ECharts、Rechartsなど、さまざまなグラフライブラリがあります。それぞれ得意分野が異なるため、プロジェクトの目的に応じて選ぶことが重要です。Chart.jsは、標準的なグラフを簡潔に作成したい場合に向いています。一方で、非常に独自性の高い可視化や、大規模データ処理が必要な場合は、別ライブラリの方が適していることもあります。

ライブラリ選定では、グラフの種類、カスタマイズ性、学習コスト、Reactとの相性、パフォーマンス、チームの習熟度を比較するとよいでしょう。単純に機能が多いライブラリを選べばよいわけではありません。実装したいグラフに対して、必要十分な機能を持ち、保守しやすいライブラリを選ぶことが大切です。

14.1 Chart.jsとD3.jsの違い

D3.jsは、非常に自由度の高いデータ可視化ライブラリです。SVGやDOMを細かく制御し、独自の可視化表現を作り込むことができます。一方で、自由度が高い分、学習コストも高く、標準的なグラフを素早く作りたい場合には実装量が多くなることがあります。

Chart.jsは、D3.jsほど自由に描画を制御するためのライブラリではありませんが、棒グラフや折れ線グラフなどの一般的なグラフを簡単に作成できます。独自の可視化表現を作り込むならD3.js、標準的なダッシュボードグラフを効率よく作るならChart.jsという使い分けが分かりやすいです。

14.2 Chart.jsとEChartsの違い

EChartsは、多機能で大規模なデータ可視化にも対応しやすいグラフライブラリです。豊富なグラフタイプやインタラクション、地図表現、大量データ対応などを備えており、複雑な分析画面や高度なダッシュボードに向いています。一方で、機能が多い分、設定項目や学習範囲も広くなります。

Chart.jsは、EChartsと比べるとシンプルで導入しやすい傾向があります。標準的な棒グラフ、折れ線グラフ、円グラフ、ドーナツチャートを作成する目的であれば、Chart.jsの方が軽く扱える場合があります。高度なインタラクションや複雑な可視化が必要な場合はECharts、シンプルで分かりやすいグラフが中心ならChart.jsが選択肢になります。

14.3 Chart.jsとRechartsの違い

Rechartsは、React向けに設計されたグラフライブラリです。Reactコンポーネントとしてグラフを記述できるため、Reactプロジェクトとの親和性が高い点が特徴です。一方、Chart.jsはReact専用ではありませんが、react-chartjs-2を使うことでReactコンポーネントとして扱えます。

React中心のプロジェクトで、JSXとしてグラフを柔軟に組みたい場合はRechartsが向いていることがあります。一方、Chart.jsはReact以外の環境でも使いやすく、Canvas描画による標準的なグラフ表示に強みがあります。既存プロジェクトの技術構成や、チームがどちらに慣れているかも選定基準になります。

14.4 Chart.jsを選ぶべきケース

Chart.jsを選ぶべきケースは、標準的なグラフを短期間で実装したい場合です。管理画面、売上レポート、アクセス解析、KPIダッシュボードなどで、棒グラフ、折れ線グラフ、円グラフ、ドーナツチャートを中心に使うのであれば、Chart.jsは十分に有力な選択肢になります。導入しやすく、ドキュメントやサンプルも豊富なため、チーム開発でも扱いやすいです。

一方で、特殊なデータ可視化、複雑なインタラクション、大量データの高度な描画、独自の図表表現が必要な場合は、D3.jsやEChartsなども比較検討した方がよいでしょう。Chart.jsは万能ではありませんが、一般的なWebアプリケーションのグラフ表示には非常に使いやすいライブラリです。

15. Chart.js活用のベストプラクティス

Chart.jsを効果的に活用するには、データ量に応じて適切なグラフを選び、再利用可能なグラフコンポーネントを作成し、レスポンシブデザインを考慮し、パフォーマンスを意識して描画することが重要です。グラフは見た目の装飾ではなく、データを理解しやすくするためのUIです。そのため、何を伝えたいのかを明確にしたうえで設計する必要があります。

また、Chart.jsの設定を画面ごとにばらばらに書くと、デザインや挙動が統一されず、保守も難しくなります。共通オプション、共通カラー、共通コンポーネント、データ変換関数を整理しておくことで、アプリケーション全体で一貫したグラフ表示を実現しやすくなります。

15.1 データ量に応じてグラフを選択する

グラフを選ぶ際は、データ量と目的を考慮する必要があります。カテゴリ比較には棒グラフ、時系列推移には折れ線グラフ、構成比には円グラフやドーナツチャートが向いています。一方で、カテゴリが多すぎる円グラフや、データ点が多すぎる折れ線グラフは読みにくくなります。表示したいデータに合ったグラフを選ぶことが重要です。

データ量が多い場合は、すべてのデータを一度に表示するのではなく、集計粒度を変更したり、フィルターを用意したり、表示範囲を制限したりする必要があります。グラフは詳細データをすべて詰め込む場所ではなく、傾向や比較を把握するためのものです。必要に応じて、詳細は表やドリルダウン画面で確認できるようにするとよいでしょう。

15.2 再利用可能なグラフコンポーネントを作成する

ReactやVueなどのフレームワークでChart.jsを使う場合は、再利用可能なグラフコンポーネントを作成すると保守しやすくなります。たとえば、棒グラフ用の共通コンポーネント、折れ線グラフ用の共通コンポーネント、KPI用のドーナツチャートコンポーネントを作り、データやタイトルをpropsとして受け取る設計が考えられます。

再利用可能なコンポーネントを作ることで、画面ごとに同じ設定を繰り返し書く必要がなくなります。また、凡例の位置や色、ツールチップの形式を共通化できるため、アプリケーション全体の見た目も統一されます。グラフが増えるプロジェクトほど、早い段階でコンポーネント化する価値が大きくなります。

15.3 レスポンシブデザインを考慮する

Chart.jsはレスポンシブ対応を備えていますが、実務ではコンテナ設計も含めて考える必要があります。グラフを配置するカードの幅や高さ、モバイル表示時のラベル数、凡例の位置、余白などを調整しないと、画面サイズによっては読みにくくなる可能性があります。特にスマートフォンでは、横軸ラベルが重なりやすいため注意が必要です。

レスポンシブデザインでは、単にグラフを縮小するだけでは不十分です。小さい画面では表示するデータ数を減らす、凡例を下に移動する、表形式に切り替える、横スクロールを許可するなど、状況に応じた設計が求められます。グラフは視認性が重要なため、デバイスごとに読みやすさを確認することが大切です。

15.4 パフォーマンスを意識して描画する

グラフのデータ量が多い場合、描画パフォーマンスに注意が必要です。大量のデータ点を折れ線グラフで表示したり、複数のグラフを同時に描画したりすると、ブラウザの負荷が高くなる可能性があります。特にダッシュボードでは複数のグラフを一画面に配置することが多いため、描画タイミングやデータ量を意識する必要があります。

パフォーマンスを改善するには、データを事前に集計する、表示範囲を絞る、不要なアニメーションを減らす、グラフコンポーネントの再レンダリングを抑えるなどの方法があります。Reactで利用する場合は、useMemoなどを使ってデータやオプションの再生成を抑えることも有効です。グラフは見た目だけでなく、快適に操作できることも重要です。

おわりに

Chart.jsは、JavaScriptでグラフを簡単に作成できる便利なグラフライブラリです。棒グラフ、折れ線グラフ、円グラフ、ドーナツチャート、複合グラフなど、実務でよく使われるグラフタイプに対応しており、管理画面や分析ダッシュボード、売上レポート、マーケティング分析ツールなどで活用できます。

また、Chart.jsはReactやTypeScriptとも組み合わせやすく、react-chartjs-2を使ったコンポーネント化や、ChartData、ChartOptionsを使った型安全な設定管理も可能です。単純なグラフ表示から、複数指標を組み合わせたダッシュボードまで、幅広い用途に対応できます。

一方で、見やすいグラフを作るには、ライブラリの使い方だけでなく、データ設計や情報設計も重要です。どのデータをどのグラフで表示するのか、どの指標を強調するのか、画面サイズに応じてどう見せるのかを考えることで、Chart.jsの価値をより高められます。標準的なデータ可視化を効率よく実装したい場合、Chart.jsは非常に有力な選択肢となるでしょう。