score:2

Accepted answer

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>


Related Query

More Query from same tag