Hide empty bars in Grouped Stacked Bar Chart - cha

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.