chartjs default background color to columns

Question

Hello how i can set default background color to dataset columns? like on image. The gray part of columns. So every columns will have gray background color from 0 to max value.

Here is the code of my data chart. I look the examples on chart.js site but there i can't find anythin about this situation

var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
        datasets: [{
                label: 'Capacity',
                data: [20.7, 10, 40, 2, 100, 43, 34],
                backgroundColor: '#43d100'
            },
            {
                label: 'Confirmed',
                data: [11.4, 100, 20, 42, 10, 20, 65],
                backgroundColor: '#dc1f1f'
            }
        ]
    },
    options: {
        legend: {
            display: false
        },
        layout: {
            borderWidth: 0
        },
        scales: {
            xAxes: [{
                stacked: true,
                gridLines: {
                    display: false,
                    borderWidth: 0,
                    drawBorder: false
                }
            }],
            yAxes: [{
                stacked: true,
                ticks: {
                    beginAtZero: true,
                    display: false,
                    max: 200,
                    fill: "#07C"
                },
                gridLines: {
                    display: false,
                    borderWidth: 0,
                    drawBorder: false
                }
            }]
        }
    }
});

Answer 1

an option doesn't exist for column background color.
a third series will need to be added to represent the background.
which can easily be done by subtracting the original values from the max value.
the tooltip for the background series can be removed by using the filter option.

see following working snippet...

$(document).ready(function() {
    // original datasets
    var chartData = [{
        label: 'Capacity',
        data: [20.7, 10, 40, 2, 100, 43, 34],
        backgroundColor: '#43d100'
    },
    {
        label: 'Confirmed',
        data: [11.4, 100, 20, 42, 10, 20, 65],
        backgroundColor: '#dc1f1f'
    }];

    // max value - background dataset
    var maxValue = 200;
    var maxData = {
        label: 'Max',
        data: [],
        backgroundColor: '#cccccc'
    };

    // subtract each dataset value from max value
    chartData.forEach(function (dataset) {
        dataset.data.forEach(function (value, index) {
            if (maxData.data.length <= index) {
                maxData.data.push(maxValue);
            }
            maxData.data[index] -= value;
        });
    });

    // add background dataset
    chartData.push(maxData);

    var ctx = document.getElementById("data");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
            datasets: chartData  // <-- modified dataset
        },
        options: {
            legend: {
                display: false
            },
            layout: {
                borderWidth: 0
            },
            scales: {
                xAxes: [{
                    stacked: true,
                    gridLines: {
                        display: false,
                        borderWidth: 0,
                        drawBorder: false
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true,
                        display: false,
                        max: 200,
                        fill: "#07C"
                    },
                    gridLines: {
                        display: false,
                        borderWidth: 0,
                        drawBorder: false
                    }
                }]
            },
            // remove tooltip for background dataset
            tooltips: {
                filter: function (tooltipItem, data) {
                    return (tooltipItem.datasetIndex < (chartData.length - 1));
                },
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="data"></canvas>