How do I change the grid line style on the Y axis in Chart.js?
Solution 1:
You can define a second y-axis responsible for drawing the solid grid lines only.
y2: {
max: 100,
min: 0,
ticks: {
display: false,
stepSize: 25
},
grid: {
drawTicks: false,
drawBorder: false,
color: 'rgba(255, 255, 255, 0.2)'
}
}
Also add y.gird.lineWidth as follows in order to omit the dashed lines where a solid line should appear.
lineWidth: ctx => ctx.index % 5 ? 1 : 0
Please take a look at your amended code and see how it works.
new Chart('chart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '',
barPercentage : 0.05,
data: [80, 19, 3, 5, 2, 3, 30, 20, 30],
backgroundColor: [
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)'
],
borderColor: [
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)'
],
borderWidth: 0.1
},{
type : 'bubble',
data : [
{
x : 20,
y : 80,
r : 50
},
{
x : 40,
y : 19,
r : 20
},
{
x : 60,
y : 3,
r : 1
},
{
x : 80,
y : 5,
r : 20
},
{
x : 100,
y : 2,
r : 5
},
{
x : 120,
y : 3,
r : 5
},
{
x : 140,
y : 30,
r : 20
},
{
x : 140,
y : 20,
r : 20
},
{
x : 140,
y : 30,
r : 50
}
],
backgroundColor: 'rgba(148, 181, 115, 0.7)',
borderColor : 'rgba(228, 248, 188, 0.92)'
}]
},
options: {
responsive : true,
plugins : {
legend : {
display : false
},
chartAreaBorder: {
borderColor: 'rgba(255, 255, 255, 0.2)',
borderWidth: 2,
}
},
scales: {
x : {
display : false,
max : 100,
min : 0,
ticks : {
stepStze : 10,
callback : () => ('')
},
grid : {
drawTicks : false,
//color : 'rgba(255, 255, 255, 0.2)',
borderWidth : 2
}
},
y : {
max : 100,
min : 0,
ticks : {
display: false,
stepSize : 5
},
grid : {
drawTicks: false,
drawBorder : true,
borderWidth : 2,
borderDash : [5,5],
borderDashOffset : 2,
color : 'rgba(255, 255, 255, 0.2)',
lineWidth: ctx => ctx.index % 5 ? 1 : 0
}
},
y2 : {
max : 100,
min : 0,
ticks : {
display: false,
stepSize : 25
},
grid : {
drawTicks: false,
drawBorder : false,
color : 'rgba(255, 255, 255, 0.2)'
}
}
},
interaction : {
mode : 'index'
},
}
});body {
background-color: #000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<canvas id="chart"></canvas>