]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Skip all borders if borderSkipped === true (#10530)
authorJacco van den Berg <jaccoberg2281@gmail.com>
Sat, 30 Jul 2022 12:12:53 +0000 (14:12 +0200)
committerGitHub <noreply@github.com>
Sat, 30 Jul 2022 12:12:53 +0000 (08:12 -0400)
* 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 <pijulius@users.noreply.github.com>
docs/charts/bar.md
src/controllers/controller.bar.js
types/index.esm.d.ts

index 853130f966e01e070ca283865804b1a2fcf864cb..b5a24fc48fb34caefc8db17233a2df364c786eed 100644 (file)
@@ -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
 
index 557bffbd8c91a5ee46f3e227b2cad48aeeb8cc57..b18ffb71b3393b38e21a1962b5d3f120b4c5e2b9 100644 (file)
@@ -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) {
index 8fd5a41f6359d94fbceefe49e34087128a4672a9..75304c1f2e2b3de668e3f4c9d3f1be2104be5e16 100644 (file)
@@ -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