【コーディング屋のネタ帳】データ可視化はこれで決まり！棒グラフ作成に役立つJavaScriptライブラリ5選

最近、Webサイトでデータをグラフにして見せることが増えてきました。たとえば、会社案内ページで売上や業績の推移をグラフにしてわかりやすくしたり、アンケート結果をビジュアルで示したりする例がよくあります。こうしたグラフは、パッと見ただけで情報が伝わりやすく、見る人にとっても便利ですよね。

そんなグラフの中でも今回は、棒グラフに着目。特徴とともに、棒グラフを簡単に作れるJavaScriptのライブラリを紹介します。

この記事は、次のような人に向けて書いています。

Webサイトにグラフを取り入れたい新人エンジニア
今使っているライブラリを別のものに変えようと考えている中級エンジニア
デザインにこだわったグラフを探しているWebデザイナー

このシリーズでは、グラフライブラリの特徴や使い方をサンプルコード付きでわかりやすく紹介していくので、ぜひ参考にしてください！

棒グラフとは？

棒グラフは、データを棒状の図で表現するグラフの一種。横軸や縦軸にカテゴリや項目を並べ、棒の長さや高さで数値を示します。シンプルで直感的にデータを理解しやすいため、最もよく使われるグラフ形式のひとつです。

棒グラフが向いている活用例

棒グラフは次のようなグラフをで活躍します。

比較を示すとき：カテゴリごとの売上や人口などの数値を比べる場合。
推移や変化を見せるとき：時間や期間ごとのデータの変動を示す場合。
ランキングの表示：数値の大小や順位を一目で伝えたい場合。

たとえば、「月ごとの売上比較」や「製品ごとの売上ランキング」を示すときに棒グラフは非常に便利ですね。

2.3 棒グラフの種類

縦棒グラフ：縦方向に棒を並べてデータを示す一般的な形式。
横棒グラフ：横方向に棒を並べ、項目数が多いときやラベルが長いときに使いやすい形式。

2.4 棒グラフのメリットとデメリット

メリット

視覚的にわかりやすく、情報がすぐに伝わる。
データの比較や順位付けが簡単にできる。

デメリット

データの量が多すぎると、棒の数が増えて見づらくなることがある。
比率や割合の比較には適さず、円グラフや積み上げグラフの方が向いている場合がある。
グラフが単純すぎると、細かな分析や相関関係の表現には不向きなこともある。

JavaScriptライブラリを選ぶ際のチェックポイント

グラフをWebサイトに表示するためのライブラリは数多くありますが、選び方を間違えると使いづらかったり、目的に合わなかったりすることがあります。ライブラリ選定の際には下記6つのポイントをチェックすることをおすすめします。

導入のしやすさ
初心者でもすぐに使えるかどうかは重要です。CDNを使って簡単に読み込めるものや、設定が少なくても動作するライブラリを選ぶとよいでしょう。
カスタマイズ性
デザインや色、アニメーションなどを柔軟に変更できるかを確認しましょう。ブランドやデザインテーマに合わせた調整が必要な場合は、カスタマイズ性の高いものがおすすめです。
レスポンシブ対応
スマホやタブレットなど、画面サイズが異なるデバイスでもきれいに表示されるかをチェックしましょう。特に、ビジネスサイトではモバイル対応が重要です。
パフォーマンス
表現するグラフにもよりますが、大規模データを扱う場合、表示速度やパフォーマンスも気にする必要があります。特にリアルタイムデータを表示する用途では、軽量で高速なライブラリが求められます。
サポートとドキュメント
公式サイトやGitHubでのサポート状況や、ドキュメントの充実度を確認しましょう。使い方がわからないときに参考になる情報があるかどうかは重要です。
ライセンスと利用料
利用規約やライセンス形態も確認しておきましょう。商用利用が可能かどうか、無料で使えるか、有料プランが必要かなどを事前にチェックすることが大切です。

ライブラリ比較表

前述のライブラリ選定ポイントをまとめた表は下記のとおり

名称	導入のしやすさ	カスタマイズ性	レスポンシブ対応	パフォーマンス	サポートとドキュメント	ライセンス
Chart.js	高い	高い	標準対応	軽量で高速	公式とGitHubで充実	MITライセンス
D3.js	中程度	非常に高い	手動対応	大規模データ対応	豊富なサンプルと解説	BSDライセンス
ApexCharts	高い	高い	標準対応	軽量かつ高速	公式ドキュメント充実	MITライセンス
Google Charts	高い	中程度	標準対応	高速	Google公式サポート	無料
Chartist.js	高い	高い	標準対応	軽量	コミュニティベース	MITライセンス

サンプルデータを使った導入例

今回紹介した各ライブラリを使って、同じ条件のサンプルデータから棒グラフを表示する手順を作成してみました。それぞれの特徴を活かしたオプションもつけてみたので参考にしてくださいね。

サンプルデータ：月別売上高

月	売上 (万円)
1月	120
2月	150
3月	180
4月	200
5月	170
6月	210
7月	250
8月	300
9月	280
10月	260
11月	230
12月	190

Chart.js

今回は、オプションとしてアニメーションの設定も使用してみました

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)


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

2.HTMLとJavaScriptコード


<canvas id="salesChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        datasets: [{
            label: '月別売上高 (万円)',
            data: [120, 150, 180, 200, 170, 210, 250, 300, 280, 260, 230, 190],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: { beginAtZero: true }
        },
        animation: {
        duration: 2000,
        easing: 'easeInOutBounce',
        },
        
    }});
</script>

D3.js

D3.jsでは、クリックした棒を強調表示する例を作成してみました。

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)


<script src="https://d3js.org/d3.v7.min.js"></script>

2.CSSを追加


   <style>
    .tooltip {
      position: absolute;
      background-color: lightgray;
      padding: 5px;
      border-radius: 5px;
      font-size: 12px;
      pointer-events: none; /* ホバー時にカーソルが反応しない */
    }
  </style>

3.HTMLとJavaScriptコード


 <h3>月別売上高 (クリックで強調表示)</h3>
  <div id="chart"></div>
  <script>
    // データセット
    const data = [120, 150, 180, 200, 170, 210, 250, 300, 280, 260, 230, 190];
    const labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

    // グラフ設定
    const margin = { top: 30, right: 30, bottom: 50, left: 60 };
    const width = 800 - margin.left - margin.right;
    const height = 400 - margin.top - margin.bottom;

    // SVGの作成
    const svg = d3.select('#chart')
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    // 軸スケール設定
    const x = d3.scaleBand()
      .domain(labels)
      .range([0, width])
      .padding(0.1);

    const y = d3.scaleLinear()
      .domain([0, d3.max(data) + 50])
      .range([height, 0]);

    // 軸の描画
    svg.append('g')
      .attr('transform', `translate(0,${height})`)
      .call(d3.axisBottom(x));

    svg.append('g')
      .call(d3.axisLeft(y).ticks(10));

    // ツールチップの追加
    const tooltip = d3.select('body').append('div')
      .attr('class', 'tooltip')
      .style('opacity', 0);

    // 強調状態を保持する変数
    let selectedBar = null;

    // 棒グラフの描画
    svg.selectAll('.bar')
      .data(data)
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .attr('x', (d, i) => x(labels[i]))
      .attr('y', d => y(d))
      .attr('width', x.bandwidth())
      .attr('height', d => height - y(d))
      .attr('fill', 'steelblue')

      // マウスオーバーでツールチップ表示
      .on('mouseover', (event, d) => {
        if (event.target !== selectedBar) {
          d3.select(event.target).attr('fill', 'orange'); // ホバー時に色変更
        }
        tooltip.transition().duration(200).style('opacity', 0.9);
        tooltip.html(`売上: ${d}万円`)
          .style('left', `${event.pageX + 10}px`)
          .style('top', `${event.pageY - 20}px`);
      })
      .on('mousemove', (event) => {
        tooltip.style('left', `${event.pageX + 10}px`)
          .style('top', `${event.pageY - 20}px`);
      })
      .on('mouseout', (event) => {
        if (event.target !== selectedBar) {
          d3.select(event.target).attr('fill', 'steelblue'); // 元の色に戻す
        }
        tooltip.transition().duration(500).style('opacity', 0);
      })

      // クリックで強調表示
      .on('click', (event, d) => {
        // 以前選択されたバーを元の色に戻す
        if (selectedBar) {
          d3.select(selectedBar).attr('fill', 'steelblue');
        }

        // 現在選択されたバーを強調表示
        selectedBar = event.target;
        d3.select(selectedBar).attr('fill', 'red'); // クリック時に色を赤に
      });
  </script>

ApexCharts

導入手順

1.CDNリンクの追加


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

2.HTMLとJavaScriptコード


 <div id="apexChart"></div>
<script>
var options = {
    chart: { type: 'bar' },
    series: [{
        name: '売上 (万円)',
        data: [120, 150, 180, 200, 170, 210, 250, 300, 280, 260, 230, 190]
    }],
    xaxis: { categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }
};

var chart = new ApexCharts(document.querySelector("#apexChart"), options);
chart.render();
</script>

Google Charts

Google Chartsでは、データをCSVダウンロード可能なグラフを作成してみました

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)


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

2.JavaScriptを追加


<script type="text/javascript">
    // Google Chartsのロード
    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    let chartData; // データを保持する変数

    function drawChart() {
      // データの定義
      chartData = google.visualization.arrayToDataTable([
        ['月', '売上 (万円)'],
        ['1月', 120], ['2月', 150], ['3月', 180], ['4月', 200],
        ['5月', 170], ['6月', 210], ['7月', 250], ['8月', 300],
        ['9月', 280], ['10月', 260], ['11月', 230], ['12月', 190]
      ]);

      // オプション設定
      var options = {
        title: '月別売上高',
        hAxis: { title: '月' },
        vAxis: { title: '売上 (万円)', minValue: 0 },
        legend: { position: 'top' },
        colors: ['#76A7FA'],
        animation: {
          startup: true,
          duration: 1000,
          easing: 'out'
        }
      };

      // グラフの描画
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(chartData, options);
    }

    // CSVエクスポート機能
    function exportToCSV() {
      // データをCSV形式に変換
      let csvContent = 'data:text/csv;charset=utf-8,';
      for (let i = 0; i < chartData.getNumberOfRows() + 1; i++) {
        let row = [];
        for (let j = 0; j < chartData.getNumberOfColumns(); j++) {
          row.push(i === 0 ? chartData.getColumnLabel(j) : chartData.getValue(i - 1, j));
        }
        csvContent += row.join(',') + '\n';
      }

      // ダウンロードリンクを作成
      const encodedUri = encodeURI(csvContent);
      const link = document.createElement('a');
      link.setAttribute('href', encodedUri);
      link.setAttribute('download', 'sales_data.csv');
      document.body.appendChild(link);

      // ダウンロード実行
      link.click();
    }
  </script>

3.HTML


   <h3>月別売上高 (CSVエクスポート機能付き)</h3>
  <div id="chart_div" style="width: 800px; height: 400px;"></div>
  <button onclick="exportToCSV()">CSVエクスポート</button>

Chartist.js

Chartist.jsでは、アニメーション付きのグラフを作成してみました

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)


  <!-- ChartistのCSSとJavaScriptの読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.css">
  <script src="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.js"></script>

2.HTMLとJavaScriptを追加


<h3>アニメーション付き棒グラフ</h3>
  <div class="ct-chart ct-golden-section" style="height: 400px;"></div>
  <script>
    // データの定義
    const data = {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      series: [[120, 150, 180, 200, 170, 210, 250, 300, 280, 260, 230, 190]]
    };

    // オプション設定
    const options = {
      axisY: {
        onlyInteger: true, // 整数のみ表示
        offset: 50, // 軸のオフセット
        labelInterpolationFnc: value => `${value}万円` // ラベルに単位追加
      },
      chartPadding: {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
      }
    };

    // グラフ描画
    const chart = new Chartist.Bar('.ct-chart', data, options);

    // アニメーション設定
    chart.on('draw', function(data) {
      if (data.type === 'bar') {
        data.element.animate({
          y2: {
            begin: 0, // アニメーション開始位置
            dur: 1000, // アニメーションの持続時間 (ms)
            from: data.y1, // 開始値
            to: data.y2,   // 終了値
            easing: Chartist.Svg.Easing.easeOutBounce // アニメーションのイージング
          }
        });
      }
    });
  </script>

まとめ

この記事では、棒グラフの基本から利用シーン、ライブラリの選び方、そしておすすめライブラリの特徴と比較表までを紹介しました。

棒グラフはデータの比較や推移を視覚的にわかりやすく示すための便利なツールです。用途に応じて最適なライブラリを選び、効果的なデータ可視化を実現しましょう。

次回は折れ線グラフや円グラフなど、別のグラフ形式について詳しく解説していきますので、ぜひお楽しみに！

【コーディング屋のネタ帳】データ可視化はこれで決まり！棒グラフ作成に役立つJavaScriptライブラリ5選

棒グラフとは？

棒グラフが向いている活用例

2.3 棒グラフの種類

2.4 棒グラフのメリットとデメリット

JavaScriptライブラリを選ぶ際のチェックポイント

おすすめライブラリ紹介

1 Chart.js

2 D3.js

3 ApexCharts

4 Google Charts

5 Chartist.js

ライブラリ比較表

サンプルデータを使った導入例

サンプルデータ：月別売上高

Chart.js

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

2.HTMLとJavaScriptコード

D3.js

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

2.CSSを追加

3.HTMLとJavaScriptコード

ApexCharts

導入手順

1.CDNリンクの追加

2.HTMLとJavaScriptコード

Google Charts

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

2.JavaScriptを追加

3.HTML

Chartist.js

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

2.HTMLとJavaScriptを追加

まとめ

【コーディング屋のネタ帳】データ可視化はこれで決まり！棒グラフ作成に役立つJavaScriptライブラリ5選

棒グラフとは？

棒グラフが向いている活用例

2.3 棒グラフの種類

2.4 棒グラフのメリットとデメリット

JavaScriptライブラリを選ぶ際のチェックポイント

おすすめライブラリ紹介

1 Chart.js

2 D3.js

3 ApexCharts

4 Google Charts

5 Chartist.js

ライブラリ比較表

サンプルデータを使った導入例

サンプルデータ：月別売上高

Chart.js

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

2.HTMLとJavaScriptコード

D3.js

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

2.CSSを追加

3.HTMLとJavaScriptコード

ApexCharts

導入手順

1.CDNリンクの追加

2.HTMLとJavaScriptコード

Google Charts

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

2.JavaScriptを追加

3.HTML

Chartist.js

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

2.HTMLとJavaScriptを追加

まとめ

この記事を見た人がよく見ている記事

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

1.CDNリンクの追加 (HTMLの`<head>`内に記述)