【Chart.js】積み上げ棒グラフと折れ線グラフを同じ図上に表示する

JavaScript

環境

  • Chart.js 2.9.4

方法

データセット内のyAxisIDを指定し、ChartのoptionsでyAxesを用意することで実現できる。

例

var barChartData = {
    labels: ['January', 'February', 'March'],
    datasets: [
        {
            type: 'line',
            label: 'Dataset line',
            backgroundColor: 'rgb(255, 255, 255)',
            borderColor: 'rgb(255, 255, 255)',
            borderWidth: 2,
            fill: false,
            data: [
                Math.floor(Math.random() * Math.floor(300)),
                Math.floor(Math.random() * Math.floor(300)),
                Math.floor(Math.random() * Math.floor(300)),
            ]
        },
        {
            type: 'bar',
            label: 'Dataset stacked bar 1',
            backgroundColor: 'rgb(255, 99, 132)',
            yAxisID: "bar-stacked",  // HERE!
            data: [
                Math.floor(Math.random() * Math.floor(100)),
                Math.floor(Math.random() * Math.floor(100)),
                Math.floor(Math.random() * Math.floor(100)),
            ],
        },
        {
            type: 'bar',
            label: 'Dataset stacked bar 2',
            backgroundColor: 'rgb(75, 192, 192)',
            yAxisID: "bar-stacked",  // HERE!
            data: [
                Math.floor(Math.random() * Math.floor(100)),
                Math.floor(Math.random() * Math.floor(100)),
                Math.floor(Math.random() * Math.floor(100)),
            ]
        }
    ]
};

window.onload = function() {
    var ctx = document.getElementById('canvas');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            title: {
                display: true,
                text: 'Chart.js Stacked Bar and Line Chart'
            },
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                // 折れ線用と積み上げ棒用のY軸を用意する
                yAxes: [{
                    stacked: false
                }, {
                    id: "bar-stacked",
                    stacked: true,
                    position: 'right',
                }]
            },
        }
    });
}

参考