search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.94k stars 11.89k forks source link

Radial scale grid border dash not working #11661

Open helmealex opened 4 months ago

helmealex commented 4 months ago

Expected behavior

It should display dashed grid borders for radial scale by applying dash styling to options.scales.r.grid.borderDash image

Current behavior

No dash styling is applied for the radial grid border

Reproducible sample

https://codepen.io/helme1234/pen/ExMedXN

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.4.1

Browser name and version

No response

Link to your project

No response

cubitouch commented 4 months ago

Inspired from https://github.com/reactchartjs/react-chartjs-2/issues/1155 I've used options.scales.r.border.dash instead, which isn't TS declared for some reason but seem to work.

Edit: seems to be called here if I'm reading this right, destructured here:

  drawGrid() {
    const ctx = this.ctx;
    const opts = this.options;
    const {angleLines, grid, border} = opts;
...
cubitouch commented 4 months ago

Seems RadialLinearScaleOptions could be declared wrong? This should do:

  border: {
    /**
     * Length and spacing of dashes on grid lines.
     * @default undefined
     */
    dash: number[];
    /**
     * Offset for line dashes.
     * @default undefined
     */
    dashOffset: number;
  };

And if it's the case this documentation needs updating.

I'm happy to try and open an MR to fix this if I get confirmation from other contributors this is the way to go :crossed_fingers: