chartjs / chartjs/Chart.js

Grid dash option in the wrong place

Open
#11,136 6 comments 3 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

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_

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.