Bar: fix too thick borders (#9678)

diff --git a/docs/charts/bar.md b/docs/charts/bar.md
index c7ef6670ea24bf317bf5e855532992b5c3dcdacb..325ca9c3678f3d1e42f807fefdd2fa1942283c93 100644 (file)
--- a/docs/charts/bar.md
+++ b/docs/charts/bar.md
@@ -86,6 +86,7 @@ Only the `data` option needs to be specified in the dataset namespace.
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
 | [`hoverBorderRadius`](#interactions) | `number` | Yes | Yes | `0`
 | [`indexAxis`](#general) | `string` | - | - | `'x'`
+| [`inflateAmount`](#inflateamount) | `number`\|`'auto'` | Yes | Yes | `'auto'`
 | [`maxBarThickness`](#maxbarthickness) | `number` | - | - | |
 | [`minBarLength`](#styling) | `number` | - | - | |
 | [`label`](#general) | `string` | - | - | `''`
@@ -176,6 +177,10 @@ If this value is a number, it is applied to all corners of the rectangle (topLef
 When the border radius is supplied as a number and the chart is stacked, the radius will only be applied to the bars that are at the edges of the stack or where the bar is floating. The object syntax can be used to override this behavior.
 :::
 
+#### inflateAmount
+
+This option can be used to inflate the rects that are used to draw the bars. This can be used to hide artifacts between bars when `barPercentage`(#barpercentage) * `categoryPercentage`(#categorypercentage) is 1. The default value `'auto'` should work in most cases.
+
 ### Interactions
 
 The interaction with each bar can be controlled with the following properties:

diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md
index 9623714f26d315c6a349fc72573cb538cbab6474..aff43601185b3a941fc3893d06bdf246b7ea887a 100644 (file)
--- a/docs/configuration/elements.md
+++ b/docs/configuration/elements.md
@@ -84,6 +84,7 @@ Namespace: `options.elements.bar`, global bar options: `Chart.defaults.elements.
 | `borderColor` | [`Color`](/general/colors.md) | `Chart.defaults.borderColor` | Bar stroke color.
 | `borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'`, `'end'`, `'middle'`, `'bottom'`, `'left'`, `'top'`, `'right'` or `false`.
 | `borderRadius` | `number`\|`object` | `0` | The bar border radius (in pixels).
+| `inflateAmount` | `number`\|`'auto'` | `'auto'` | The amount of pixels to inflate the bar rectangle(s) when drawing.
 | [`pointStyle`](#point-styles) | `string`\|`Image`\|`HTMLCanvasElement` | `'circle'` | Style of the point for legend.
 
 ## Arc Configuration

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index c9a8e7ef813b044194f7069583af64f9b2de1086..dd10cf09f8f7d51f274a9f25eaf98efa2a725507 100644 (file)
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -244,6 +244,12 @@ function startEnd(v, start, end) {
   return v === 'start' ? start : v === 'end' ? end : v;
 }
 
+function setInflateAmount(properties, {inflateAmount}, ratio) {
+  properties.inflateAmount = inflateAmount === 'auto'
+    ? ratio === 1 ? 0.33 : 0
+    : inflateAmount;
+}
+
 export default class BarController extends DatasetController {
 
   /**
@@ -369,7 +375,9 @@ export default class BarController extends DatasetController {
       if (includeOptions) {
         properties.options = sharedOptions || this.resolveDataElementOptions(i, bars[i].active ? 'active' : mode);
       }
-      setBorderSkipped(properties, properties.options || bars[i].options, stack, index);
+      const options = properties.options || bars[i].options;
+      setBorderSkipped(properties, options, stack, index);
+      setInflateAmount(properties, options, ruler.ratio);
       this.updateElement(bars[i], i, properties, mode);
     }
   }

diff --git a/src/elements/element.bar.js b/src/elements/element.bar.js
index 049a8984f0f848f652ff70bd1f71b731431f07ae..41a609b75e4dc0f14b7dfb435655e1d360e20982 100644 (file)
--- a/src/elements/element.bar.js
+++ b/src/elements/element.bar.js
@@ -146,6 +146,7 @@ export default class BarElement extends Element {
     this.base = undefined;
     this.width = undefined;
     this.height = undefined;
+    this.inflateAmount = undefined;
 
     if (cfg) {
       Object.assign(this, cfg);
@@ -153,10 +154,9 @@ export default class BarElement extends Element {
   }
 
   draw(ctx) {
-    const options = this.options;
+    const {inflateAmount, options: {borderColor, backgroundColor}} = this;
     const {inner, outer} = boundingRects(this);
     const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath;
-    const inflateAmount = 0.33;
 
     ctx.save();
 
@@ -165,13 +165,13 @@ export default class BarElement extends Element {
       addRectPath(ctx, inflateRect(outer, inflateAmount, inner));
       ctx.clip();
       addRectPath(ctx, inflateRect(inner, -inflateAmount, outer));
-      ctx.fillStyle = options.borderColor;
+      ctx.fillStyle = borderColor;
       ctx.fill('evenodd');
     }
 
     ctx.beginPath();
-    addRectPath(ctx, inflateRect(inner, inflateAmount, outer));
-    ctx.fillStyle = options.backgroundColor;
+    addRectPath(ctx, inflateRect(inner, inflateAmount));
+    ctx.fillStyle = backgroundColor;
     ctx.fill();
 
     ctx.restore();
@@ -211,7 +211,7 @@ BarElement.defaults = {
   borderSkipped: 'start',
   borderWidth: 0,
   borderRadius: 0,
-  enableBorderRadius: true,
+  inflateAmount: 'auto',
   pointStyle: undefined
 };
 

diff --git a/test/fixtures/controller.bar/bar-base-value.png b/test/fixtures/controller.bar/bar-base-value.png
index 87219e676a9389bc3ec2c9fe61d880a13eef0f23..98c6797511e96f3ff02a8acf95e15df9c732c7d0 100644 (file)
Binary files a/test/fixtures/controller.bar/bar-base-value.png and b/test/fixtures/controller.bar/bar-base-value.png differ

diff --git a/test/fixtures/controller.bar/bar-thickness-flex-offset.png b/test/fixtures/controller.bar/bar-thickness-flex-offset.png
index 59171e08cf33886b432f5122c94d9c573d1b697c..14491751df788525f834334fab7afe6cd610f524 100644 (file)
Binary files a/test/fixtures/controller.bar/bar-thickness-flex-offset.png and b/test/fixtures/controller.bar/bar-thickness-flex-offset.png differ

diff --git a/test/fixtures/controller.bar/bar-thickness-flex.png b/test/fixtures/controller.bar/bar-thickness-flex.png
index 791a29d25d380f64f8c33fc3a928cebc531348cb..62fb2307db96b0aa09015c72d8aabfa7d6d57e55 100644 (file)
Binary files a/test/fixtures/controller.bar/bar-thickness-flex.png and b/test/fixtures/controller.bar/bar-thickness-flex.png differ

diff --git a/test/fixtures/controller.bar/bar-thickness-offset.png b/test/fixtures/controller.bar/bar-thickness-offset.png
index 8dcecac88a409dff7867684f0987662f1cc4f46e..6b35e925708e46f423c42c28ebcfc9f1e807f685 100644 (file)
Binary files a/test/fixtures/controller.bar/bar-thickness-offset.png and b/test/fixtures/controller.bar/bar-thickness-offset.png differ

diff --git a/test/fixtures/controller.bar/bar-thickness-reverse.png b/test/fixtures/controller.bar/bar-thickness-reverse.png
index cf6d621cc551dd4d26819a6c673474c1fb00d373..0913be22e00f2112385d96b439b79dad321a59fa 100644 (file)
Binary files a/test/fixtures/controller.bar/bar-thickness-reverse.png and b/test/fixtures/controller.bar/bar-thickness-reverse.png differ

diff --git a/test/fixtures/controller.bar/bar-thickness-stacked.png b/test/fixtures/controller.bar/bar-thickness-stacked.png
index 696829ee39b400f7bd77dbc1b930784d3cf42542..7392dd57c6acd7b1fa02c789d9dde1432c81cef0 100644 (file)
Binary files a/test/fixtures/controller.bar/bar-thickness-stacked.png and b/test/fixtures/controller.bar/bar-thickness-stacked.png differ

diff --git a/test/fixtures/controller.bar/baseLine/bottom.png b/test/fixtures/controller.bar/baseLine/bottom.png
index 87e982e1e2303a122ce9dab5d459ea71dfcfdb5b..c689dd3c689d160fb40fdce29c33b42678d945a2 100644 (file)
Binary files a/test/fixtures/controller.bar/baseLine/bottom.png and b/test/fixtures/controller.bar/baseLine/bottom.png differ

diff --git a/test/fixtures/controller.bar/baseLine/left.png b/test/fixtures/controller.bar/baseLine/left.png
index 19b328c3bee431245521885ea22653c6dc5ecc4c..340f71e7e86a8c31461885454280d8c0d856a48b 100644 (file)
Binary files a/test/fixtures/controller.bar/baseLine/left.png and b/test/fixtures/controller.bar/baseLine/left.png differ

diff --git a/test/fixtures/controller.bar/baseLine/mid-x.png b/test/fixtures/controller.bar/baseLine/mid-x.png
index d6b377677694e5926e2b65768cbb6520bd1f6bef..e12c967d25a92ccbf6e22bc9df8525c1e79cc9f3 100644 (file)
Binary files a/test/fixtures/controller.bar/baseLine/mid-x.png and b/test/fixtures/controller.bar/baseLine/mid-x.png differ

diff --git a/test/fixtures/controller.bar/baseLine/mid-y.png b/test/fixtures/controller.bar/baseLine/mid-y.png
index 646fd80518411b9802764c98b7e343722922eb6f..eca057a63662d841196ea3cd541c5c236966d2af 100644 (file)
Binary files a/test/fixtures/controller.bar/baseLine/mid-y.png and b/test/fixtures/controller.bar/baseLine/mid-y.png differ

diff --git a/test/fixtures/controller.bar/baseLine/right.png b/test/fixtures/controller.bar/baseLine/right.png
index 2f98f893a7229a7222761ce9173da8ea63695cb2..9de9a9e58ba3ee09f7b2a541f51ac15688ea1ef1 100644 (file)
Binary files a/test/fixtures/controller.bar/baseLine/right.png and b/test/fixtures/controller.bar/baseLine/right.png differ

diff --git a/test/fixtures/controller.bar/baseLine/top.png b/test/fixtures/controller.bar/baseLine/top.png
index e04b9b0bd7ec0fd806ceb131ed36a0ed35f98963..efe34e9186f436daa7b64219397d84f2ca515ec0 100644 (file)
Binary files a/test/fixtures/controller.bar/baseLine/top.png and b/test/fixtures/controller.bar/baseLine/top.png differ

diff --git a/test/fixtures/controller.bar/baseLine/value-x.png b/test/fixtures/controller.bar/baseLine/value-x.png
index 23ed06dd6aa3bc81882c22bd2a145b2cab8c90be..bb8407e93962be5773479852b47dfc60d3b4104d 100644 (file)
Binary files a/test/fixtures/controller.bar/baseLine/value-x.png and b/test/fixtures/controller.bar/baseLine/value-x.png differ

diff --git a/test/fixtures/controller.bar/baseLine/value-y.png b/test/fixtures/controller.bar/baseLine/value-y.png
index 7063fd102a1298b2580b63574590128073f4b016..f0de922650f5b24b71fcc94db3f6184f9ad6d04a 100644 (file)
Binary files a/test/fixtures/controller.bar/baseLine/value-y.png and b/test/fixtures/controller.bar/baseLine/value-y.png differ

diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png
index 0c96f07f537bd077f5706629a9a6b69264799a63..7449d7fa4a1dd2550614f86dc70e375c9ff79f78 100644 (file)
Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png differ

diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png
index 2635b2792ab79771cb59eeea1cc0b7b8fd0ba5fe..fa769073c5cacb69446da75b6847f8db03e025fa 100644 (file)
Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png differ

diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png
index 13b82c32a8949092f8aa9126f4277aefac22c919..951b2eb634aa99d10fd80bb82e24ed57be808920 100644 (file)
Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png differ

diff --git a/test/fixtures/controller.bar/borderRadius/border-radius.png b/test/fixtures/controller.bar/borderRadius/border-radius.png
index ec5e8a63d314f70d79e0e5cffbf54bf93d7c1c41..196b00db5f5337148c958995c1d5bc63abd50e48 100644 (file)
Binary files a/test/fixtures/controller.bar/borderRadius/border-radius.png and b/test/fixtures/controller.bar/borderRadius/border-radius.png differ

diff --git a/test/fixtures/controller.bar/borderSkipped/middle.png b/test/fixtures/controller.bar/borderSkipped/middle.png
index 89796e0ca51fcaacbb8a872c1debef2ad1c4505c..41fd2019597cd59631644ad4c4522fa3a8c57c3b 100644 (file)
Binary files a/test/fixtures/controller.bar/borderSkipped/middle.png and b/test/fixtures/controller.bar/borderSkipped/middle.png differ

diff --git a/test/fixtures/controller.bar/borderWidth/indexable.png b/test/fixtures/controller.bar/borderWidth/indexable.png
index 88428927ec183a9ef0ebe522aef87c32b03e4fc4..0929ef0e61f88ebfa1628aa61bfd2c0379a5ccbf 100644 (file)
Binary files a/test/fixtures/controller.bar/borderWidth/indexable.png and b/test/fixtures/controller.bar/borderWidth/indexable.png differ

diff --git a/test/fixtures/controller.bar/borderWidth/object.png b/test/fixtures/controller.bar/borderWidth/object.png
index 3b36d96cb2f25cf49f5f222ed21159975efcb45b..ed251dfa77d9a554d43a7117e759307a03dc5beb 100644 (file)
Binary files a/test/fixtures/controller.bar/borderWidth/object.png and b/test/fixtures/controller.bar/borderWidth/object.png differ

diff --git a/test/fixtures/controller.bar/borderWidth/value.png b/test/fixtures/controller.bar/borderWidth/value.png
index 58fec25d81b2766e027ddeef486016345261e600..4f6aca6142fffe915c63c25dc175a930bf645303 100644 (file)
Binary files a/test/fixtures/controller.bar/borderWidth/value.png and b/test/fixtures/controller.bar/borderWidth/value.png differ

diff --git a/test/fixtures/controller.bar/horizontal-borders.png b/test/fixtures/controller.bar/horizontal-borders.png
index 96f16777ae3ed60a66252294dcb577f594e16a22..8398645351f58977ce80fb75849fe6be93f029af 100644 (file)
Binary files a/test/fixtures/controller.bar/horizontal-borders.png and b/test/fixtures/controller.bar/horizontal-borders.png differ

diff --git a/test/fixtures/controller.bar/minBarLength/vertical.png b/test/fixtures/controller.bar/minBarLength/vertical.png
index 2074397ea0fec427722fcb79502c93b5e61675b6..0595425bcfc85ee232c2d27d50efdd1e7e0df729 100644 (file)
Binary files a/test/fixtures/controller.bar/minBarLength/vertical.png and b/test/fixtures/controller.bar/minBarLength/vertical.png differ

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 548720c57ca9bf78daf0095cd527efcf38bfca28..6d2fe7839eb5d5497afe6d7395c9f822e80e76ad 100644 (file)
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -1915,7 +1915,7 @@ export interface BarOptions extends CommonElementOptions {
   base: number;
 
   /**
-   *   Skipped (excluded) border: 'start', 'end', 'left',  'right', 'bottom', 'top' or false (none).
+   * Skipped (excluded) border: 'start', 'end', 'left',  'right', 'bottom', 'top' or false (none).
    * @default 'start'
    */
   borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top' | false;
@@ -1925,6 +1925,13 @@ export interface BarOptions extends CommonElementOptions {
    * @default 0
    */
   borderRadius: number | BorderRadius;
+
+  /**
+   * Amount to inflate the rectangle(s). This can be used to hide artifacts between bars.
+   * Unit is pixels. 'auto' translates to 0.33 pixels when barPercentage * categoryPercentage is 1, else 0.
+   * @default 'auto'
+   */
+  inflateAmount: number | 'auto';
 }
 
 export interface BorderRadius {