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

by

3👍

✅

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

0👍

Dont think that this is possible, the closes you can get to this as far as I know is this.

Link: https://codesandbox.io/s/react-chartjs-2-forked-rgiyf?file=/src/index.js
enter image description here

code:

scales: {
    yAxes: [
      {
        ticks: {
          padding: -30
        }
      }
    ]
  }

There is a workaround for this, if you put a null value as the first entry in your dataset and an empty string in the labels array you will get this:
enter image description here

Leave a comment