You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
The issue is that skipping only the last border is not possible using
elements: { bar: { borderSkipped: 'end' // 'top' shows the same unexpected behavior } }
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.
#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
The text was updated successfully, but these errors were encountered:
Expected behavior
Separating stacked bar elements with a border / separator improves readability and is a common UI pattern:
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:
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.#8941 changed the global bar border radius option to only apply to the last bar element.
I'd propose that:
borderSkipped
property in the bar options applies only to the last element of a stack,Context
No response
chart.js version
v3.7.1
Browser name and version
Chrome Canary, Firefox Developer Edition
Link to your project
No response
The text was updated successfully, but these errors were encountered: