score:3

Accepted answer

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>


Related Query

More Query from same tag