React-Chartjs-2 How to create dashed gridlines - chart.js

Question

Im using react-chartjs-2 and trying to create dashed gridlines on the y-axis
I tried to look on Chart Config Web: https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
But cant find the trick
Here is my code:
import { Chart } from 'react-chartjs-2';
import {Chart as ChartJS, registerables} from 'chart.js';
ChartJS.register(...registerables);
const data = {
labels: ["Label1", "Label2", "Label3"],
datasets: [{
label: 'legend1',
data: [12, 19, 3],
},{
label: 'legend2',
data: [22, 9, 13],
}]
};
const options = {
scales: {
y: {
grid: {
tickBorderDash: [4, 4],
tickColor: '#000',
tickWidth: 2,
offset: true,
drawTicks: true,
drawOnChartArea: true
},
beginAtZero: true,
},
x: {
display: false
}
},
};
const BarChart = (props : Props) => {
return (
<Chart type='bar' data={data} options={options} />
);
};
Thank you!

Answer 1

By looking at the source code, I gathered that for some reason y.grid.tickBorderDash option only applies to the tick marks, not for the grid lines. Actually, the option is applied only for lines that are not affected by drawOnChartArea: true.
To make y axis gridlines dashed, one has to set y.border.dash option. This doesn't seem very consistent to me, but that's the way the code currently functions.
So this should work:
const options = {
scales: {
y: {
border:{dash: [4, 4]}, // for the grid lines
grid: {
color: '#aaa', // for the grid lines
tickColor: '#000', // for the tick mark
tickBorderDash: [2, 3], // also for the tick, if long enough
tickLength: 10, // just to see the dotted line
tickWidth: 2,
offset: true,
drawTicks: true, // true is default
drawOnChartArea: true // true is default
},
beginAtZero: true,
},
x: {
display: false
}
},
};
Note: I tested with charts.js 4.2.0 (latest at the time of posting).