From 876e3c608ca75604ad9ccf990bfd21b646ee2896 Mon Sep 17 00:00:00 2001 From: Hans De Potter Date: Thu, 12 Sep 2024 09:41:08 +0200 Subject: [PATCH] Introduce minBarThickness --- docs/charts/bar.md | 6 ++++++ src/controllers/controller.bar.js | 5 +++-- src/types/index.d.ts | 5 +++++ test/specs/controller.bar.tests.js | 15 +++++++++++++++ 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 36587d4c087..de5e2afe7b8 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -89,6 +89,7 @@ Only the `data` option needs to be specified in the dataset namespace. | [`inflateAmount`](#inflateamount) | `number`\|`'auto'` | Yes | Yes | `'auto'` | [`maxBarThickness`](#maxbarthickness) | `number` | - | - | | | [`minBarLength`](#styling) | `number` | - | - | | +| [`minBarThickness`](#minBarThickness) | `number` | - | - | | | [`label`](#general) | `string` | - | - | `''` | [`order`](#general) | `number` | - | - | `0` | [`pointStyle`](../configuration/elements.md#point-styles) | [`pointStyle`](../configuration/elements.md#types) | Yes | - | `'circle'` @@ -107,6 +108,7 @@ data: { barPercentage: 0.5, barThickness: 6, maxBarThickness: 8, + minBarThickness: 1, minBarLength: 2, data: [10, 20, 30, 40, 50, 60, 70] }] @@ -215,6 +217,10 @@ If not set (default), the base sample widths are calculated using the smallest i Set this to ensure that bars are not sized thicker than this. +### minBarThickness + +Set this to ensure that bars have at least the specified thickness. When `maxBarThickness` and `minBarThickness` have conflicting values, `maxBarThickness` is used. + ## Scale Configuration The bar chart sets unique default values for the following configuration from the associated `scale` options: diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 82138f3fb74..12df6896e90 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -617,6 +617,7 @@ export default class BarController extends DatasetController { const options = this.options; const skipNull = options.skipNull; const maxBarThickness = valueOrDefault(options.maxBarThickness, Infinity); + const minBarThickness = valueOrDefault(options.minBarThickness, -Infinity); let center, size; if (ruler.grouped) { const stackCount = skipNull ? this._getStackCount(index) : ruler.stackCount; @@ -626,11 +627,11 @@ export default class BarController extends DatasetController { const stackIndex = this._getStackIndex(this.index, this._cachedMeta.stack, skipNull ? index : undefined); center = range.start + (range.chunk * stackIndex) + (range.chunk / 2); - size = Math.min(maxBarThickness, range.chunk * range.ratio); + size = Math.min(maxBarThickness, Math.max(minBarThickness, range.chunk * range.ratio)); } else { // For non-grouped bar charts, exact pixel values are used center = scale.getPixelForValue(this.getParsed(index)[scale.axis], index); - size = Math.min(maxBarThickness, ruler.min * ruler.ratio); + size = Math.min(maxBarThickness, Math.max(minBarThickness, ruler.min * ruler.ratio)); } return { diff --git a/src/types/index.d.ts b/src/types/index.d.ts index fcdd44fe06b..e4b9d7b1dea 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -128,6 +128,11 @@ export interface BarControllerDatasetOptions */ maxBarThickness: number; + /** + * Set this to ensure that bars have at least the specified thickness. + */ + minBarThickness: number; + /** * Set this to ensure that bars have a minimum length in pixels. */ diff --git a/test/specs/controller.bar.tests.js b/test/specs/controller.bar.tests.js index a64af1a878b..ac021e3b111 100644 --- a/test/specs/controller.bar.tests.js +++ b/test/specs/controller.bar.tests.js @@ -1531,6 +1531,21 @@ describe('Chart.controllers.bar', function() { expect(meta.data[1].width).toBeCloseToPixel(10); } }); + + it('should correctly set bar width if minBarThickness is specified', function() { + var chart = this.chart; + var i, ilen, meta; + + chart.data.datasets[0].minBarThickness = 1000; + chart.data.datasets[1].minBarThickness = 1000; + chart.update(); + + for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) { + meta = chart.getDatasetMeta(i); + expect(meta.data[0].width).toBeCloseToPixel(1000); + expect(meta.data[1].width).toBeCloseToPixel(1000); + } + }); }); }); });