How do I change the grid line style on the Y axis in Chart.js?

[mycreatz]

I'm using Chart.js version 3.7.0 to draw the graph.

I created a graph like the image using the following code. I want to express only the line in the red box as a normal line based on the Y axis.

    const distanceAccuracyBarChart = new Chart(context, {
        type    : 'bar',
        data    : {
            labels   : ['', '60,0~50,1', '50', '75', '100', '125', '150', '175', '200', '230', ''],
            datasets : [
                {
                    label           : '',
                    data            : [0, 80, 19, 3, 5, 2, 3, 30, 20, 30, 0],
                    backgroundColor : [
                        'rgba(241, 246, 0, 1)'
                    ],
                    borderColor     : [
                        'rgba(241, 246, 0, 1)'
                    ],
                    borderWidth     : 0.1,
                    barPercentage   : 0.05
                },
                {
                    type : 'bubble',
                    data : [
                        {   
                            x : 0,
                            y : 0,
                            r : 0
                        },
                        {   
                            x : 0,
                            y : 80,
                            r : 50
                        },
                        {   
                            x : 0,
                            y : 19,
                            r : 20
                        },
                        {   
                            x : 0,
                            y : 3,
                            r : 1
                        },
                        {   
                            x : 0,
                            y : 5,
                            r : 20
                        },
                        {   
                            x : 0,
                            y : 2,
                            r : 5
                        },
                        {   
                            x : 0,
                            y : 3,
                            r : 5
                        },
                        {   
                            x : 0,
                            y : 30,
                            r : 20
                        },
                        {   
                            x : 0,
                            y : 20,
                            r : 40
                        },
                        {   
                            x : 0,
                            y : 30,
                            r : 42
                        },
                        {   
                            x : 0,
                            y : 0,
                            r : 0
                        }
                    ],
                    backgroundColor : 'rgba(148, 181, 115, 0.7)',
                    borderColor     : 'rgba(228, 248, 188, 0.92)'
                }
            ]
        },
        options : {
            responsive          : false,
            maintainAspectRatio : false,
            plugins             : {
                legend          : {
                    display : false
                },
                chartAreaBorder : {
                    borderColor : 'rgba(255, 255, 255, 0.2)',
                    borderWidth : 2
                },
                tooltip         : {
                    titleFont     : {
                        size : 24
                    },
                    bodyFont      : {
                        size : 14
                    },
                    footerFont    : {
                        size : 0
                    },
                    titleAlign    : 'center',
                    bodyAlign     : 'left',
                    borderColor   : 'rgba(119, 119, 119, 0.9)',
                    borderWidth   : 1,
                    displayColors : false,
                    filter        : function(tooltipItem) {
                        return tooltipItem.datasetIndex === 0;
                    },
                    callbacks     : {
                        title : function(tooltipItem) {
                            let percentage = tooltipItem[0].label.split(',');

                            return percentage[0] + '%';
                        },
                        label : function(tooltipItem) {
                            let percentage = tooltipItem.label.split(',');
                            let distance   = percentage[1];

                            return `Distance ${distance}m`;
                        },
                        afterLabel : function(tooltipItem) {
                            let percentage = tooltipItem.label.split(',');
                            let targetSize = percentage[2];

                            return `Target     ${targetSize}m`;
                        }
                    }
                }
            },
            scales              : {
                x : {
                    display : false,
                    max     : 100,
                    min     : 0,
                    ticks   : {
                        stepSize : 10,
                        callback : () => ('')
                    },
                    grid    : {
                        drawTicks   : false,
                        color       : 'rgba(255, 255, 255, 0.2)',
                        borderWidth : 2
                    }
                },
                y : {
                    max   : 100,
                    min   : 0,
                    ticks : {
                        stepSize : 5,
                        callback : () => ('')
                    },
                    grid  : {
                        color            : 'rgba(255, 255, 255, 0.2)',
                        drawTicks        : false,
                        drawBorder       : true,
                        borderDash       : [5, 5],
                        borderDashOffset : 2,
                        borderWidth      : 2
                    }
                }
            },
            interaction         : {
                mode            : 'index',
                position        : 'custom',
                xAlign          : 'center',
                yAlign          : 'bottom',
                backgroundColor : 'rgba(85, 85, 85, 0.9)'
            }
        },
        plugins : [
            chartAreaBorder
        ]
    });

I've tried using callback() or finding and applying a plugin, but it doesn't give me the desired result. How should I add the code?

[mycreatz]

I found a workaround on Stackoverflow. This answer I got was actually really helpful.

[Stackoverflow Link]