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!
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.