chartjs / chartjs/Chart.js

Skip only last border in stacked bar

Open
#10,360 2 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

Separating stacked bar elements with a border / separator improves readability and is a common UI pattern:
![image](https://user-images.githubusercontent.com/7623375/169265510-7a10f7cb-a805-4569-b2bf-358060300853.png)

For example see https://www.ibm.com/design/language/data-visualization/charts or https://developers.google.com/chart/interactive/docs/gallery/barchart#stacked-bar-charts

### Current behavior

Chart.js provides

`borderWidth: {
top: 1
}`

that shows the separators as expected. But the issue is that the separator on the _last_ stacked bar element is not hidden. This leads to the unwanted side-effect that the stacked bar is not pixel perfect anymore to the respective value axis:

![image](https://user-images.githubusercontent.com/7623375/169267438-9ec445a8-61f7-4c3b-b5f5-48815b9226cc.png)

The issue is that skipping _only_ the last border is not possible using

`elements: {
bar: {
borderSkipped: 'end' // 'top' shows the same unexpected behavior
}
}
`

### Reproducible sample

https://codepen.io/mimizan/pen/ZErKoWp

### Optional extra steps/info to reproduce

_No response_

### Possible solution

Simply not providing a top border on the last element programmatically is not a solution as the user might want to show/hide individual bar elements via the legend. Determining the last visible stacked bar element via `ScriptableOptions` looks impossible or very complex.

https://github.com/chartjs/Chart.js/pull/8941 changed the global bar border radius option to only apply to the last bar element.

I'd propose that:
- Using any `borderSkipped` property in the bar options applies only to the last element of a stack,
- and for convenience 'end' skips the last top border or for horizontal bar charts the last right border / 'start' skips the first bottom border or for horizontal bar charts the first left border.

### Context

_No response_

### chart.js version

v3.7.1

### Browser name and version

Chrome Canary, Firefox Developer Edition

### Link to your project

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.