Grid dash option in the wrong place #11136
Comments
|
Interactive reproduce of the sample above https://codepen.io/etimberg/pen/xxaKZbz |
|
Caused by these lines using |
|
Introuced in #10571. @LeeLenaleee do you recall why this change was made? Seems like the solution here is to:
|
|
Change was made so you could manually set the z of the border and since it would clutter the grid namespace it would be nice to have the options grouped in the border section. But borderDash was not a border prop so it got moved to the border location while it should have stayed and just removed the border namespace from it |
|
Also, documentation is misleading/incorrect: https://www.chartjs.org/docs/latest/axes/styling.html The description for 'tickBorderDash' states "Length and spacing of the tick mark line. If not set, defaults to the grid line borderDash value.", but there is no borderDash setting in Grid Line Configuration. Should it say "... defaults to the grid border dash value"? |
|
+1 on this. It's very misleading that this actually works:
This hides the border of the Y axis, which is expected, but then actually changes the grid line dash. Should probably be changed to something like
|
Expected behavior
Expected to find dash option for gridlines in Namespace: options.scales[scaleId].grid, there is none.
Current behavior
Instead found that the dash option in Namespace: options.scales[scaleId].border works for Grids, so its in the wrong place... and so there is no option to config dash for border.
Reproducible sample
var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3] }] }, options: { scales: { x: { }, y: { border: { display: false, color: 'red', dash: [20,20] }, grid: { display: true, color: 'black', } } } } });
Optional extra steps/info to reproduce
use the provided JS in the code pen template.
border display is off, with dash config under border... it still displays dashed line for y axis grid, with no dash config under grid
Possible solution
create dash config for Namespace: options.scales[scaleId].grid
correctly assign dash option in Namespace: options.scales[scaleId].border for dashing the border
Context
No response
chart.js version
v4.2.1
Browser name and version
No response
Link to your project
No response
The text was updated successfully, but these errors were encountered: