I am working with the chart.js version 2.9.4 and I am having an issue with the xAxis labels as they are overlapping the xAxis, see image below:

Here is my option object:

{
    responsive: true,
    aspectRatio: 2.44,
    maintainAspectRatio: false,
    layout: {
      padding: 0
    },
    scales: {
      xAxes: [
        {
          ticks: {
            display: false,
          },
          gridLines: {
            display: false,
          },
        },
      ],
      yAxes: [
        {
          ticks: {
            display: false,
          },
          gridLines: {
            display: false,
          },
        },
      ],
    },
  }