diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 82138f3fb74..4bab7cb00ff 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -486,6 +486,25 @@ export default class BarController extends DatasetController { return this._getStacks(undefined, index).length; } + _getAxisCount() { + return this._getAxis().length; + } + + getFirstScaleIdForXAxis() { + const scales = this.chart.scales; + return Object.keys(scales).filter(key => scales[key].axis === 'x').shift(); + } + + _getAxis() { + const axis = {}; + const firstScaleAxisId = this.getFirstScaleIdForXAxis(); + for (const dataset of this.chart.data.datasets) { + axis[valueOrDefault(dataset.xAxisID, firstScaleAxisId)] = true; + } + + return Object.keys(axis); + } + /** * Returns the stack index for the given dataset based on groups and bar visibility. * @param {number} [datasetIndex] - The dataset index @@ -618,13 +637,15 @@ export default class BarController extends DatasetController { const skipNull = options.skipNull; const maxBarThickness = valueOrDefault(options.maxBarThickness, Infinity); let center, size; + const axisCount = this._getAxisCount(); if (ruler.grouped) { const stackCount = skipNull ? this._getStackCount(index) : ruler.stackCount; const range = options.barThickness === 'flex' - ? computeFlexCategoryTraits(index, ruler, options, stackCount) - : computeFitCategoryTraits(index, ruler, options, stackCount); + ? computeFlexCategoryTraits(index, ruler, options, stackCount * axisCount) + : computeFitCategoryTraits(index, ruler, options, stackCount * axisCount); - const stackIndex = this._getStackIndex(this.index, this._cachedMeta.stack, skipNull ? index : undefined); + const axisNumber = this._getAxis().indexOf(valueOrDefault(this.getDataset().xAxisID, this.getFirstScaleIdForXAxis())); + const stackIndex = this._getStackIndex(this.index, this._cachedMeta.stack, skipNull ? index : undefined) + axisNumber; center = range.start + (range.chunk * stackIndex) + (range.chunk / 2); size = Math.min(maxBarThickness, range.chunk * range.ratio); } else { @@ -633,6 +654,7 @@ export default class BarController extends DatasetController { size = Math.min(maxBarThickness, ruler.min * ruler.ratio); } + return { base: center - size / 2, head: center + size / 2, diff --git a/test/fixtures/controller.bar/stacking/stacked-and-multiple-axis.js b/test/fixtures/controller.bar/stacking/stacked-and-multiple-axis.js new file mode 100644 index 00000000000..ca5490a9291 --- /dev/null +++ b/test/fixtures/controller.bar/stacking/stacked-and-multiple-axis.js @@ -0,0 +1,64 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'Dataset 1', + data: [100, 90, 100, 50, 99, 87, 34], + backgroundColor: 'rgba(255,99,132,0.8)', + stack: 'a', + xAxisID: 'x' + }, + { + label: 'Dataset 2', + data: [20, 25, 30, 32, 58, 14, 12], + backgroundColor: 'rgba(54,162,235,0.8)', + stack: 'b', + xAxisID: 'x2' + }, + { + label: 'Dataset 3', + data: [80, 30, 40, 60, 70, 80, 47], + backgroundColor: 'rgba(75,192,192,0.8)', + stack: 'a', + xAxisID: 'x3' + }, + { + label: 'Dataset 4', + data: [80, 30, 40, 60, 70, 80, 47], + backgroundColor: 'rgba(54,162,235,0.8)', + stack: 'a', + xAxisID: 'x3' + }, + ] + }, + options: { + plugins: false, + barThickness: 'flex', + scales: { + x: { + stacked: true, + display: false, + }, + x2: { + labels: ['January 2024', 'February 2024', 'March 2024', 'April 2024', 'May 2024', 'June 2024', 'July 2024'], + stacked: true, + display: false, + }, + x3: { + labels: ['January 2025', 'February 2025', 'March 2025', 'April 2025', 'May 2025', 'June 2025', 'July 2025'], + stacked: true, + display: false, + }, + y: { + stacked: true, + display: false, + } + } + } + }, + options: { + } +}; diff --git a/test/fixtures/controller.bar/stacking/stacked-and-multiple-axis.png b/test/fixtures/controller.bar/stacking/stacked-and-multiple-axis.png new file mode 100644 index 00000000000..ea571109e90 Binary files /dev/null and b/test/fixtures/controller.bar/stacking/stacked-and-multiple-axis.png differ