How to change position of label of y-axes in chartjs?

Question

I have a working code like in this link: https://codesandbox.io/s/keen-darkness-x31u7?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js

I want ask, is there a possibility we could change the position of yaxes label to the top? (see the expected picture below).

I had actually tried the below code but it displays in the middle of gridline instead of top.

scales: {
    yAxes: [
      {
        ticks: {
          mirror: true,
        },
      },
    ],
}

---

Current Output:

Expected Output:

Answer 1

The mirror is actually fine to move the yaxes labels to inside. Your only problem is to move the labels upward so that it won't intersect with the x-gridlines. And for that, you can use labelOffset property to achieve it, and then you can also put some padding to move the label a little a bit from the y-line.

labelOffset - Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis).

So in all, your code would look like this below:

yAxes: [
    {
        ticks: {
            mirror: true,
            padding: -10,
            labelOffset: -10
        }
    }
]

see more props and their definition here