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 <[email protected]>

Author: LeeLenaleee

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
 

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) {

types/index.esm.d.ts

@@ -1984,10 +1984,10 @@ export interface BarOptions extends Omit<CommonElementOptions, 'borderWidth'> {
   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