Fix skipNull for subsequent datasets (#8972)

src/controllers/controller.bar.js

@@ -354,11 +354,12 @@ export default class BarController extends DatasetController {
 	 * Returns the stack index for the given dataset based on groups and bar visibility.
 	 * @param {number} [datasetIndex] - The dataset index
 	 * @param {string} [name] - The stack name to find
+   * @param {number} [dataIndex]
 	 * @returns {number} The stack index
 	 * @private
 	 */
-  _getStackIndex(datasetIndex, name) {
-    const stacks = this._getStacks(datasetIndex);
+  _getStackIndex(datasetIndex, name, dataIndex) {
+    const stacks = this._getStacks(datasetIndex, dataIndex);
     const index = (name !== undefined)
       ? stacks.indexOf(name)
       : -1; // indexOf returns -1 if element is not present
@@ -477,15 +478,16 @@ export default class BarController extends DatasetController {
     const me = this;
     const scale = ruler.scale;
     const options = me.options;
+    const skipNull = options.skipNull;
     const maxBarThickness = valueOrDefault(options.maxBarThickness, Infinity);
     let center, size;
     if (ruler.grouped) {
-      const stackCount = options.skipNull ? me._getStackCount(index) : ruler.stackCount;
+      const stackCount = skipNull ? me._getStackCount(index) : ruler.stackCount;
       const range = options.barThickness === 'flex'
         ? computeFlexCategoryTraits(index, ruler, options, stackCount)
         : computeFitCategoryTraits(index, ruler, options, stackCount);
 
-      const stackIndex = me._getStackIndex(me.index, me._cachedMeta.stack);
+      const stackIndex = me._getStackIndex(me.index, me._cachedMeta.stack, skipNull ? index : undefined);
       center = range.start + (range.chunk * stackIndex) + (range.chunk / 2);
       size = Math.min(maxBarThickness, range.chunk * range.ratio);
     } else {

test/fixtures/controller.bar/skipNull/combinations.js

@@ -0,0 +1,38 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['0', '1', '2', '3', '4', '5', '6', '7'],
+      datasets: [
+        {
+          data: [null, 1000, null, 1000, null, 1000, null, 1000],
+          backgroundColor: '#00ff00',
+          borderColor: '#ff0000'
+        },
+        {
+          data: [null, null, 1000, 1000, null, null, 1000, 1000],
+          backgroundColor: '#ff0000',
+          borderColor: '#ff0000'
+        },
+        {
+          data: [null, null, null, null, 1000, 1000, 1000, 1000],
+          backgroundColor: '#0000ff',
+          borderColor: '#0000ff'
+        }
+      ]
+    },
+    options: {
+      skipNull: true,
+      scales: {
+        x: {display: false},
+        y: {display: false}
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};