Customize react-chartjs-2

Question

My task is to create a chart with the following design using react-chartjs-2:

My current approach:

With options:

    scales: {
      x: {
        ticks: {
          maxTicksLimit: 8,
        },
        grid: {
          display: false,
          
        },
        
      },
      y: {
        ticks: {
          callback: function (value, index, ticks) {
            // customize
            return value;
          },
          labelOffset: -5
        },
        border:{dash: [3, 1]}
      },
    },

However, I'm facing difficulty in accomplishing two tasks:

• Hiding the gridline next to the y-labels while still displaying the y-labels.
• Making the x-gridlines longer so they can be below the y-labels.
• Formatting y-labels to use units such as K, M, B. Could you please assist me in solving these problems? Thank you so much!