Chart.js を使って作る縦と横向きの棒グラフのサンプル

Chart.js で縦向きと横向きの棒グラフを作るサンプルや基本的なプロパティの解説。

縦向きの棒グラフ

まず、Chart.js で簡単な縦向き（垂直）の棒グラフを作る。 コードは以下の通り。

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

<style>
#ex_chart {max-width:640px;max-height:480px;}
</style>

<canvas id="ex_chart"></canvas>

<script>
var ctx = document.getElementById('ex_chart');

var data = {
    labels: ["平成26年", "平成27年", "平成28年", "平成29年", "平成30年"],
    datasets: [{
        label: '得点',
        data: [880, 740, 900, 520, 930],
        backgroundColor: 'rgba(255, 100, 100, 1)'
    }]
};

var options = {
    scales: {
        yAxes: [{
            ticks: {
                min: 300
            }
        }]
    }
};

var ex_chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});
</script>

backgroundColor で棒の中に色を塗れる。 borderColor と borderWidth を使うと棒の周囲に線を描けるが、ここでは書いていない。

options にある min は yAxes（Y軸）の最低値を指定している。

以下、表示例。

横向きの棒グラフ

横向き（水平）の棒グラフは、Chart.js v2.x系では type に horizontalBar を指定することになっていたが、3.x系で変更になった。 2.x系から3.x系にそのまま移行するとエラーになりグラフが表示されない。

3.xでは type は bar のままとし、オプションに indexAxis: 'y' を指定する。

グラフの最低値はX軸に適用したいので xAxes に変更した。 基本的なコードは縦向きと同じなので、変更箇所だけ以下に記す。

var options = {
    indexAxis: 'y',
    scales: {
        xAxes: [{
            ticks: {
                min: 300
            }
        }]
    }
};

var ex_chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

以下、表示例。

ラベルや複数の棒グラフ

様々なプロパティを指定すると、グラフにタイトルやラベルを追加したり、複数の棒を並べることができる。

各種プロパティの詳しい説明は 折れ線グラフ を参照。 コードは上記サンプルと異なる部分だけ記す。

var data = {
    labels: ["1月", "2月", "3月", "4月", "5月"],
    datasets: [{
        label: 'プリンター',
        data: [880, 740, 900, 520, 930],
        backgroundColor: 'rgba(255, 100, 100, 1)'
    },
    {
        label: 'パソコン',
        data: [1200, 1350, 1220, 1220, 1420],
        backgroundColor: 'rgba(100, 100, 255, 1)'
    }]
};

var options = {
    scales: {
        xAxes: [{
            scaleLabel: {
                display: true,
                labelString: '月'
            }
        }],
        yAxes: [{
            ticks: {
                min: 0,
                userCallback: function(tick) {
                    return tick.toString() + '台';
                }
            },
            scaleLabel: {
                display: true,
                labelString: '台数'
            }
        }]
    },
    title: {
        display: true,
        text: '販売台数'
    }
};

var ex_chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

以下、表示例。