Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Grid dash option in the wrong place #11136

Open
pacastro opened this issue Feb 12, 2023 · 6 comments · May be fixed by #11188
Open

Grid dash option in the wrong place #11136

pacastro opened this issue Feb 12, 2023 · 6 comments · May be fixed by #11188
Labels
type: bug
Milestone
Version 5.0.0

Comments

@pacastro
Copy link

pacastro commented Feb 12, 2023 •
edited

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
@etimberg
Copy link
Member

Interactive reproduce of the sample above https://codepen.io/etimberg/pen/xxaKZbz

@etimberg
Copy link
Member

Caused by these lines using optsAtIndexBorder instead of optsAtIndex. Why that is the case will need further investigation

@etimberg
Copy link
Member

Introuced in #10571. @LeeLenaleee do you recall why this change was made?

Seems like the solution here is to:

  1. Add dash and dashOffset to the grid options
  2. Add separate reads of the dash options into drawBorder inside the core scale
  3. Use that when drawing the grid instead of the border

@etimberg etimberg added this to the Version 4.3.0 milestone Feb 12, 2023
@LeeLenaleee
Copy link
Collaborator

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

@etimberg etimberg linked a pull request Mar 11, 2023 that will close this issue
Open
@etimberg etimberg modified the milestones: Version 4.3.0, Version 5.0.0 Mar 11, 2023
@Ser6-IO
Copy link

Ser6-IO commented Feb 29, 2024

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"?

@dani-filipovic
Copy link

+1 on this. It's very misleading that this actually works:

y: { border: { display: false, dash: [4, 4], }, }

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

y: { grid: { dash: [4, 4] }, }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
Version 5.0.0
Development

Successfully merging a pull request may close this issue.

Enable separate grid and border dashes for cartesian axes etimberg/Chart.js
5 participants
@etimberg @pacastro @LeeLenaleee @Ser6-IO @dani-filipovic