From 1fef75d990ccdb557f19d9be5e67f217d8b5c90d Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Sat, 30 Jul 2022 14:12:53 +0200 Subject: [PATCH] Skip all borders if borderSkipped === true (#10530) * Skip all borders if borderSkipped === true This will allow you to skip all borders (not just one side) if you set borderSkipped to boolean true and so allow you to have a consistent legend marker even for bars without borders. Reason is that even if same colored borders are set there are artifacts that make the bar look bad and also even with inflateAmount the bars do look good when big but when only a few pixel in size they start to look bad too so this was the only way for me to make it work so legends are looking good and bars too. * fix failing test, update docs and typings * update typing comment Co-authored-by: Istvan Petres --- docs/charts/bar.md | 5 +++-- src/controllers/controller.bar.js | 5 +++++ types/index.esm.d.ts | 4 ++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 853130f966e..b5a24fc48fb 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -74,7 +74,7 @@ Only the `data` option needs to be specified in the dataset namespace. | [`barPercentage`](#barpercentage) | `number` | - | - | `0.9` | | [`barThickness`](#barthickness) | `number`\|`string` | - | - | | | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` -| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'start'` +| [`borderSkipped`](#borderskipped) | `string`\|`boolean` | Yes | Yes | `'start'` | [`borderWidth`](#borderwidth) | `number`\|`object` | Yes | Yes | `0` | [`borderRadius`](#borderradius) | `number`\|`object` | Yes | Yes | `0` | [`categoryPercentage`](#categorypercentage) | `number` | - | - | `0.8` | @@ -163,7 +163,8 @@ Options are: * `'left'` * `'top'` * `'right'` -* `false` +* `false` (don't skip any borders) +* `true` (skip all borders) #### borderWidth diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 557bffbd8c9..b18ffb71b33 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -208,6 +208,11 @@ function setBorderSkipped(properties, options, stack, index) { return; } + if (edge === true) { + properties.borderSkipped = {top: true, right: true, bottom: true, left: true}; + return; + } + const {start, end, reverse, top, bottom} = borderProps(properties); if (edge === 'middle' && stack) { diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 8fd5a41f635..75304c1f2e2 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -1984,10 +1984,10 @@ export interface BarOptions extends Omit { base: number; /** - * Skipped (excluded) border: 'start', 'end', 'left', 'right', 'bottom', 'top', 'middle' or false (none). + * Skipped (excluded) border: 'start', 'end', 'left', 'right', 'bottom', 'top', 'middle', false (none) or true (all). * @default 'start' */ - borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top' | 'middle' | false; + borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top' | 'middle' | boolean; /** * Border radius