chartjs: How to set padding for y Axes and Increase the length of ticks indecator

Question

Is there any way to give padding from the Y-axis so that there is a gap from the gridlines? I achieved this with a transparent border and ticks border. Also, How Can I customize the length of the tick indicator.

Targeted Graph Design => https://i.ibb.co/gFJVyBQ/image.png

Current Graph Design => https://i.ibb.co/LNtgTtT/image.png

my graph config code:

const config = {
      type: "line",
      data: data,
      options: {
        animations: {
          tension: {
            duration: 1000,
            easing: "linear",
            to: 0.3,
            from: 0,
          },
        },
        interaction: {
          intersect: false,
        },
        elements: {
          point: {
            radius: 1,
            hoverRadius: 4,
            hitRadius: 10,
          },
        },

        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            enabled: false,
            external: externalTooltipHandler,
          },
        },
        scales: {
          yAxes: {
            grid: {
              color: "#ACB8BE",
              borderColor: "rgba(0,0,0,0)", //transparent border
            },
            position: "right",

            //How to add padding to this AXES?

            min: 1.0,
            max: 2.0,
            ticks: {
              stepSize: 0.1,
              padding: 30, //padding form the axis

              //How to customize the length of the ticks indicator?

            },
          },

          xAxes: {
            grid: {
              offset: true,
              display: false,
            },
          },
        },
      },
    };

I have tried creating new custom axes but didn't find any luck there. Can anyone suggest to me how to add this customization?