【個人開発】Spring Boot + Thymeleafで棒グラフを表示するライブラリを比較してみた（Chart.js / ApexCharts / Google Charts）【ポートフォリオ】

Posted at 2026-06-25

はじめに

現在、Spring Boot + Thymeleaf で学習記録管理アプリを開発しています。

このアプリでは、ユーザーが登録した学習時間を以下のカテゴリごとに集計し、棒グラフで表示する予定です。

バックエンド
フロントエンド
インフラ

要件としては、以下のようなものがあります。

登録した項目の学習時間をカテゴリ別に棒グラフで表示する
学習時間は上限なしで、すべて合計して表示する
削除された項目の学習時間は含めない
将来的には、ポモドーロタイマーで計測した学習時間も反映したい

今回は、棒グラフを表示するためのライブラリとして、以下の3つを比較しました。

Chart.js
ApexCharts
Google Charts

他にEChartsやD3.jsも候補に出ましたが、今回の用途には過分な要素が多いため除外しました。

比較観点

棒グラフを作りやすいか
見た目が整っているか
Spring Boot + Thymeleaf と組み合わせやすいか
今後の拡張に対応しやすいか
初学者でも扱いやすいか

比較対象

Chart.js

Chart.js は、JavaScript のグラフライブラリとして非常によく使われているライブラリです。

棒グラフ、折れ線グラフ、円グラフなど、基本的なグラフをシンプルに作成できます。

ApexCharts

ApexCharts は、見た目がきれいで、ツールチップやアニメーションなども扱いやすいグラフライブラリです。

初期状態でもデザインが整っているため、ポートフォリオとして見せる画面との相性が良さそうだと感じました。

Google Charts

Google Charts は、Google が提供しているグラフライブラリです。

導入しやすく、公式ドキュメントもありますが、Google の外部サービスに依存する形になります。

比較表

観点	Chart.js	ApexCharts	Google Charts
導入のしやすさ	◎	◎	○
棒グラフの作りやすさ	◎	◎	○
見た目のきれいさ	○	◎	○
カスタマイズ性	○	◎	○
情報量の多さ	◎	○	○
Thymeleafとの相性	◎	◎	○
初学者向け	◎	○	○
ポートフォリオ向き	○	◎	○

Chart.js の特徴

良い点

情報量が多い
シンプルな棒グラフを作りやすい
CDNで読み込める
利用者が多く、エラー時に調べやすい
基本的なグラフなら十分対応できる

気になった点

初期状態の見た目は比較的シンプル
デザインを整えるには自分で調整が必要
見た目の印象を強めたい場合は少し手を入れる必要がある

実装イメージ

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

<canvas id="learningChart"></canvas>

<script>
const ctx = document.getElementById('learningChart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['バックエンド', 'フロントエンド', 'インフラ'],
    datasets: [{
      label: '学習時間（分）',
      data: [320, 180, 90]
    }]
  }
});
</script>

ApexCharts の特徴

良い点

初期状態でも見た目がきれい
ツールチップやアニメーションが自然
棒グラフの角丸や色の調整がしやすい
レスポンシブ対応しやすい
ポートフォリオとして見せる画面に向いている

気になった点

Chart.js より設定項目が少し多く見える
まずは設定オブジェクトの書き方に慣れる必要がある

実装イメージ

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

<div id="learningChart"></div>

<script>
const options = {
  chart: {
    type: 'bar',
    height: 350
  },
  series: [{
    name: '学習時間',
    data: [320, 180, 90]
  }],
  xaxis: {
    categories: ['バックエンド', 'フロントエンド', 'インフラ']
  },
  yaxis: {
    title: {
      text: '分'
    }
  }
};

const chart = new ApexCharts(document.querySelector('#learningChart'), options);
chart.render();
</script>

Google Charts の特徴

良い点

Google提供で安心感がある
基本的なグラフは簡単に作れる
サンプルが比較的わかりやすい

気になった点

Google の外部スクリプトに依存する
デザインの自由度は ApexCharts ほど高くない印象
今回のようなポートフォリオ用途では、やや無難な見た目になりそう

実装イメージ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="learningChart"></div>

<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  const data = google.visualization.arrayToDataTable([
    ['カテゴリ', '学習時間'],
    ['バックエンド', 320],
    ['フロントエンド', 180],
    ['インフラ', 90]
  ]);

  const options = {
    title: 'カテゴリ別 学習時間'
  };

  const chart = new google.visualization.ColumnChart(
    document.getElementById('learningChart')
  );

  chart.draw(data, options);
}
</script>

今回のアプリで重視したこと

今回作っているアプリは、学習時間を記録して、継続力や学習量を可視化するためのポートフォリオアプリです。

そのため、単にグラフが表示できるだけでなく、以下も重視したいと考えました。

画面を見たときに分かりやすいこと
見た目が整っていること
今後、月別・日別・ポモドーロ回数などに拡張しやすいこと
Spring Boot + Thymeleaf に大きな追加依存を入れずに導入できること

結論：今回は ApexCharts を採用したい

比較した結果、今回は ApexCharts を採用するのがよさそうだと考えました。

理由は以下です。

棒グラフの見た目が初期状態でも整っている
ポートフォリオとして見せたときに印象が良い
ツールチップやアニメーションが自然
CDNで読み込めるため、Spring Boot側の依存を増やさずに導入できる
将来的に月別・日別・ポモドーロ回数などに拡張しやすい

特に今回のように、3カテゴリの学習時間を見やすく表示する用途では、ApexCharts のデザイン性と扱いやすさが合っていると感じました。

今後の実装イメージ

バックエンド側では、DBに保存されている学習記録をカテゴリ別に集計します。

SELECT
  category_id,
  SUM(learning_time_minutes) AS total_minutes
FROM learning_records
WHERE deleted_at IS NULL
GROUP BY category_id;

※ 削除機能の実装に合わせて「削除された項目を集計から除外する」設計を追加する予定です。

画面側では、Thymeleafでカテゴリ名と合計時間をJavaScriptに渡し、ApexChartsで棒グラフを描画します。

const categories = ['バックエンド', 'フロントエンド', 'インフラ'];
const learningTimes = [320, 180, 90];

このように、グラフライブラリはあくまで「集計済みの数値を表示する役割」として扱うことで、将来的にポモドーロタイマーを導入しても、表示部分は大きく変えずに済みそうです。

まとめ

今回、Chart.js / ApexCharts / Google Charts を比較しました。

シンプルさ重視なら Chart.js
見た目とポートフォリオ映え重視なら ApexCharts
Google提供の安心感を重視するなら Google Charts

今回のアプリでは、ポートフォリオとして見せることも重視しているため、ApexCharts を選ぶ方針にしました。

今後は、Spring Boot + Thymeleaf の画面に ApexCharts を組み込み、バックエンドで集計したカテゴリ別学習時間を棒グラフとして表示していきます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up