[Chartjs]-Chartjs default background color to columns

by

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>

Leave a comment