Hide empty bars in Grouped Stacked Bar Chart - chart.js

Question

I am using chart.js version 2.5.0 and need to know if there any way to hide the empty bars from each group in a grouped stacked bar chart? Some data values in chart datasets can be null.

Here is what I want: Combo Chart Type (Grouped and Stacked)

    var options = {
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
        mode: 'label',
        callbacks: {
            label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];

                if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
                    return null;

                return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
            }
        }
    },
    scales: {
        xAxes: [{
            display: true,
            gridLines: {
                display: true
            },
            labels: {
                show: true
            }
        }],
        yAxes: [{
            type: "linear",
            display: true,
            position: "left",
            id: "y-axis-1",
            gridLines: {
                display: false
            },
            labels: {
                show: false
            }
        }, {
            type: "linear",
            display: true,
            gridLines: {
                display: true
            },
            labels: {
                show: true
            },
            ticks: {
                beginAtZero: false,
                userCallback: function(value) {
                    return numeral(value).format('($ 0.0 a)');
                }
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            id: "y-axis-5",
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }]
    },
    legend: {
        labels: {
            fontSize: 11,
            usePointStyle: true,
            padding: 15,
            filter: (legendItem, chartData) => {
                if (legendItem.datasetIndex > 0) return true;
            }
        }
    }
}
var data = {
    labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
    datasets: [{
        type: 'bar',
        label: "Opening Balance",
        data: [1120000],
        fill: true,
        backgroundColor: 'rgba(243, 194, 0, .3)',
        borderWidth: 1,
        borderColor: '#F3C200',
        hoverBackgroundColor: '#F3C200',
        hoverBorderColor: '#7d6505',
        stack: 'OB'
    }, {
        type: 'bar',
        label: "Income",
        data: [, 210000, 258900, 475669, 402569],
        fill: true,
        backgroundColor: 'rgba(42, 180, 192, .3)',
        borderWidth: 1,
        borderColor: '#166269',
        hoverBackgroundColor: '#2ab4c0',
        hoverBorderColor: '#2ab4c0',
        stack: 'Income'
    }, {
        type: 'bar',
        label: "Income Expected",
        data: [, 215000, 320000, 412236, 385569],
        fill: true,
        backgroundColor: 'rgba(76, 135, 185, .4)',
        borderWidth: 1,
        borderColor: '#2a587f',
        hoverBackgroundColor: '#4c87b9',
        hoverBorderColor: '#2a587f',
        stack: 'Income'
    }, {
        type: 'bar',
        label: "Expenditures",
        data: [, 204560, 256987, 236981, 365587],
        fill: true,
        backgroundColor: 'rgba(243, 82, 58, .3)',
        borderWidth: 1,
        borderColor: '#f3523a',
        hoverBackgroundColor: '#f56954',
        hoverBorderColor: '#f3523a',
        stack: 'Expenditures'
    }, {
        type: 'bar',
        label: "Expenditures Expected",
        data: [, 269877, 325698, 435887, 423369],
        fill: true,
        backgroundColor: 'rgba(228, 58, 69, .4)',
        borderWidth: 1,
        borderColor: '#b32a33',
        hoverBackgroundColor: '#e43a45',
        hoverBorderColor: '#b32a33',
        stack: 'Expenditures'
    }, {
        label: "Balance",
        type: 'bar',
        data: [, 54400, 19013, 14569, 24998],
        fill: true,
        borderColor: '#1ebfae',
        backgroundColor: 'rgba(30, 191, 174, .3)',
        borderWidth: 1,
        hoverBackgroundColor: '#1ebfae',
        hoverBorderColor: '#099486',
        stack: 'Balance'
    }]
};

new Chart(document.getElementById("fundStatus").getContext('2d'), {
    type: 'bar',
    data: data,
    options: options
});

The fiddle: https://jsfiddle.net/q_sabawoon/atLxLg7x/

Please help.

Answer 1

This problem can be solved by defining two separate x-axes as follows:

xAxes: [{       
    id: 'opening',    
    display: false
  },
  {
    id: 'quarter',
    offset: true,
    gridLines: {
      offsetGridLines: true
    }
  }]

Then link the datasets with option xAxisID to their corresponding x-axis:

datasets: [{
  label: "Opening Balance",
  ...
  xAxisID: "opening"
}, {
  label: "Income", 
  ...
  xAxisID: "quarter" // the same for all other datasets
}
...

Please take a look at your amended code and see how it works.

 var options = { responsive: true, maintainAspectRatio: false, tooltips: { mode: 'label', callbacks: { label: function(tooltipItem, data) { var dataset = data.datasets[tooltipItem.datasetIndex]; if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0) return null; return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)'); } } }, scales: { xAxes: [{ id: 'opening', display: false }, { id: 'quarter', offset: true, gridLines: { offsetGridLines: true } } ], yAxes: [{ ticks: { beginAtZero: false, userCallback: function(value) { return numeral(value).format('($ 0.0 a)'); } } }] }, legend: { labels: { fontSize: 11, usePointStyle: true, padding: 15, filter: (legendItem, chartData) => { if (legendItem.datasetIndex > 0) return true; } } } } var data = { labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"], datasets: [{ label: "Opening Balance", data: [1120000], backgroundColor: 'rgba(243, 194, 0, .3)', borderWidth: 1, borderColor: '#F3C200', hoverBackgroundColor: '#F3C200', hoverBorderColor: '#7d6505', stack: 'OB', categoryPercentage: 0.6, xAxisID: "opening" }, { label: "Income", data: [,210000, 258900, 475669, 402569], backgroundColor: 'rgba(42, 180, 192, .3)', borderWidth: 1, borderColor: '#166269', hoverBackgroundColor: '#2ab4c0', hoverBorderColor: '#2ab4c0', stack: 'Income', categoryPercentage: 1, xAxisID: "quarter" }, { label: "Income Expected", data: [,215000, 320000, 412236, 385569], backgroundColor: 'rgba(76, 135, 185, .4)', borderWidth: 1, borderColor: '#2a587f', hoverBackgroundColor: '#4c87b9', hoverBorderColor: '#2a587f', stack: 'Income', categoryPercentage: 1, xAxisID: "quarter" }, { label: "Expenditures", data: [,204560, 256987, 236981, 365587], backgroundColor: 'rgba(243, 82, 58, .3)', borderWidth: 1, borderColor: '#f3523a', hoverBackgroundColor: '#f56954', hoverBorderColor: '#f3523a', stack: 'Expenditures', categoryPercentage: 1, xAxisID: "quarter" }, { label: "Expenditures Expected", data: [,269877, 325698, 435887, 423369], backgroundColor: 'rgba(228, 58, 69, .4)', borderWidth: 1, borderColor: '#b32a33', hoverBackgroundColor: '#e43a45', hoverBorderColor: '#b32a33', stack: 'Expenditures', categoryPercentage: 1, xAxisID: "quarter" }, { label: "Balance", data: [,54400, 19013, 14569, 24998], borderColor: '#1ebfae', backgroundColor: 'rgba(30, 191, 174, .3)', borderWidth: 1, hoverBackgroundColor: '#1ebfae', hoverBorderColor: '#099486', stack: 'Balance', categoryPercentage: 1, xAxisID: "quarter" }] }; const chart = new Chart("fundStatus", { type: 'bar', data: data, options: options });

 #fundStatus { min-height: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <canvas id="fundStatus"></canvas>