1👍
✅
Change scales.yAxis.gridLines
to scales.yAxis.grid
and it will work.
see Grid Line Configuration from Chart.js documentation or the Grid Configuration samples page.
Please take a look at below runnable JavaScript code and see how it works.
Please take a look at
new Chart('line-chart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'My Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.2
}]
},
options: {
scales: {
yAxis: {
beginAtZero: true,
grid: {
color: 'rgb(0 ,0 ,255)',
lineWidth: 0.5
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<canvas id="line-chart" height="100"></canvas>
0👍
React chart.js is not up to date with chart.js so you can’t use v3. Please use the v2 syntax since that is what react-chartjs uses.
https://www.chartjs.org/docs/2.9.4/axes/styling.html#grid-line-configuration
If you change yAxes: {gridLines: {color: 'red'}}
to yAxes: [{gridLines: { color: 'red'}}]
it should work as intended
Source:stackexchange.com