diff --git a/docs/charts/bar.md b/docs/charts/bar.md index c7ef6670ea2..325ca9c3678 100644 --- 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 9623714f26d..aff43601185 100644 --- 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 c9a8e7ef813..dd10cf09f8f 100644 --- 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 049a8984f0f..41a609b75e4 100644 --- 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 87219e676a9..98c6797511e 100644 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 59171e08cf3..14491751df7 100644 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 791a29d25d3..62fb2307db9 100644 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 8dcecac88a4..6b35e925708 100644 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 cf6d621cc55..0913be22e00 100644 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 696829ee39b..7392dd57c6a 100644 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 87e982e1e23..c689dd3c689 100644 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 19b328c3bee..340f71e7e86 100644 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 d6b37767769..e12c967d25a 100644 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 646fd805184..eca057a6366 100644 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 2f98f893a72..9de9a9e58ba 100644 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 e04b9b0bd7e..efe34e9186f 100644 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 23ed06dd6aa..bb8407e9396 100644 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 7063fd102a1..f0de922650f 100644 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 0c96f07f537..7449d7fa4a1 100644 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 2635b2792ab..fa769073c5c 100644 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 13b82c32a89..951b2eb634a 100644 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 ec5e8a63d31..196b00db5f5 100644 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 89796e0ca51..41fd2019597 100644 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 88428927ec1..0929ef0e61f 100644 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 3b36d96cb2f..ed251dfa77d 100644 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 58fec25d81b..4f6aca6142f 100644 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 96f16777ae3..8398645351f 100644 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 2074397ea0f..0595425bcfc 100644 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 548720c57ca..6d2fe7839eb 100644 --- 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 {