Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-06 08:24:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Skip all borders if borderSkipped === true (#10530)

Browse Source 
* 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>
This commit is contained in:
Jacco van den Berg
2022-07-30 14:12:53 +02:00
committed by GitHub
parent a31e1e59d6
commit 1fef75d990
3 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/charts/bar.md
View 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

5
src/controllers/controller.bar.js
View 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) {

4
types/index.esm.d.ts vendored
View 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