How to change distance of data labels from the axies

1

Please take a look at the 2 charts below. They are identical except one has drawTicks set to true and the other to false.

The problem: when I set it to false, the data labels (the numbers that shows in the axies) gets too close to the axis, it becomes ugly. Is there a way to set drawTicks to false and at the same time control the distance from the data labels to the axis?

Untitled-1 copy

https://quickchart.io/sandbox/#%7B%22chart%22%3A%22%7B%5Cr%5Cn%5Cttype%3A%5C%22line%5C%22%2C%5Cr%5Cn%5Ctdata%3A%7B%5Cr%5Cn%5Ct%5Cr%5Cn%5Ct%5Ctlabels%3A%5B%5C%2201%2F10%5C%22%2C%20%5C%2204%2F10%5C%22%2C%20%5C%2207%2F10%5C%22%2C%20%5C%2208%2F10%5C%22%5D%2C%5Cr%5Cn%5Ct%5Ctdatasets%3A%5B%5Cr%5Cn%5Ct%5Ct%5Ct%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Ctlabel%3A%5C%22Pre%C3%A7o%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5CtbackgroundColor%3A%5C%22%23F00637%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5CtborderColor%3A%5C%22%23F00637%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ctdata%3A%5B93%2C%20-29%2C%20-17%2C%20-8%2C%2073%2C%2098%2C%2040%5D%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ctfill%3Afalse%2C%5Cr%5Cn%5Ct%5Ct%5Ct%7D%5Cr%5Cn%5Ct%5Ct%5D%2C%5Cr%5Cn%5Ct%5Ct%5Cr%5Cn%5Ct%7D%2C%5Cr%5Cn%5Ctoptions%3A%7B%5Cr%5Cn%5Ct%5Cttitle%3A%7B%5Cr%5Cn%5Ct%5Ct%5Ctdisplay%3Afalse%2C%5Cr%5Cn%5Ct%5Ct%5Cttext%3A%5C%22%5C%22%2C%5Cr%5Cn%5Ct%5Ct%7D%2C%5Cr%5Cn%5Ct%5Ctlegend%3A%7B%5Cr%5Cn%5Ct%5Ct%5Ctdisplay%3Afalse%5Cr%5Cn%5Ct%5Ct%7D%2C%5Cr%5Cn%5Ct%5Ctscales%3A%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Cr%5Cn%5Ct%5Ct%5CtyAxes%3A%5B%7B%5Cr%5Cn%5Ct%5Cr%5Cn%5Ct%5Ct%5Ct%5CtgridLines%3A%20%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctdisplay%3Atrue%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctcolor%3A%5C%22rgba(0%2C0%2C0%2C0.25)%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5CtdrawTicks%3Afalse%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5Cr%5Cn%5Cr%5Cn%5Ct%5Ct%5Ct%7D%5D%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5CtxAxes%3A%5B%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5CtgridLines%3A%20%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctdisplay%3Atrue%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctcolor%3A%5C%22rgba(0%2C0%2C0%2C0.25)%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5CtdrawTicks%3Afalse%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cr%5Cn%5Ct%5Ct%5Ct%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5D%5Cr%5Cn%5Ct%5Ct%5Cr%5Cn%5Ct%5Ct%7D%5Cr%5Cn%5Ct%7D%2C%5Cr%5Cn%7D%22%2C%22width%22%3A500%2C%22height%22%3A300%2C%22version%22%3A%222%22%2C%22backgroundColor%22%3A%22%23fff%22%7D

https://quickchart.io/sandbox/#%7B%22chart%22%3A%22%7B%5Cr%5Cn%5Cttype%3A%5C%22line%5C%22%2C%5Cr%5Cn%5Ctdata%3A%7B%5Cr%5Cn%5Ct%5Cr%5Cn%5Ct%5Ctlabels%3A%5B%5C%2201%2F10%5C%22%2C%20%5C%2204%2F10%5C%22%2C%20%5C%2207%2F10%5C%22%2C%20%5C%2208%2F10%5C%22%5D%2C%5Cr%5Cn%5Ct%5Ctdatasets%3A%5B%5Cr%5Cn%5Ct%5Ct%5Ct%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Ctlabel%3A%5C%22Pre%C3%A7o%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5CtbackgroundColor%3A%5C%22%23F00637%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5CtborderColor%3A%5C%22%23F00637%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ctdata%3A%5B93%2C%20-29%2C%20-17%2C%20-8%2C%2073%2C%2098%2C%2040%5D%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ctfill%3Afalse%2C%5Cr%5Cn%5Ct%5Ct%5Ct%7D%5Cr%5Cn%5Ct%5Ct%5D%2C%5Cr%5Cn%5Ct%5Ct%5Cr%5Cn%5Ct%7D%2C%5Cr%5Cn%5Ctoptions%3A%7B%5Cr%5Cn%5Ct%5Cttitle%3A%7B%5Cr%5Cn%5Ct%5Ct%5Ctdisplay%3Afalse%2C%5Cr%5Cn%5Ct%5Ct%5Cttext%3A%5C%22%5C%22%2C%5Cr%5Cn%5Ct%5Ct%7D%2C%5Cr%5Cn%5Ct%5Ctlegend%3A%7B%5Cr%5Cn%5Ct%5Ct%5Ctdisplay%3Afalse%5Cr%5Cn%5Ct%5Ct%7D%2C%5Cr%5Cn%5Ct%5Ctscales%3A%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Cr%5Cn%5Ct%5Ct%5CtyAxes%3A%5B%7B%5Cr%5Cn%5Ct%5Cr%5Cn%5Ct%5Ct%5Ct%5CtgridLines%3A%20%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctdisplay%3Atrue%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctcolor%3A%5C%22rgba(0%2C0%2C0%2C0.25)%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5CtdrawTicks%3Atrue%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5Cr%5Cn%5Cr%5Cn%5Ct%5Ct%5Ct%7D%5D%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5CtxAxes%3A%5B%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5CtgridLines%3A%20%7B%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctdisplay%3Atrue%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctcolor%3A%5C%22rgba(0%2C0%2C0%2C0.25)%5C%22%2C%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5CtdrawTicks%3Atrue%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cr%5Cn%5Ct%5Ct%5Ct%5Cr%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5D%5Cr%5Cn%5Ct%5Ct%5Cr%5Cn%5Ct%5Ct%7D%5Cr%5Cn%5Ct%7D%2C%5Cr%5Cn%7D%22%2C%22width%22%3A500%2C%22height%22%3A300%2C%22version%22%3A%222%22%2C%22backgroundColor%22%3A%22%23fff%22%7D

2

Hi @batata004,

Use ticks.padding:

      yAxes: [
        {
          gridLines: {
            display: true,
            color: 'rgba(0,0,0,0.25)',
            drawTicks: false,
          },
          ticks: {
            padding: 10,
          },
        },
      ],

Link to example

ticks with padding and drawTicks false
ticks with padding and drawTicks false1000×600 38.2 KB