[Chartjs]-Hide empty bars in Grouped Stacked Bar Chart – chart.js

by

3👍

✅

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
}
...

enter image description here

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>

Leave a comment