[Chartjs]-Chartjs – first x-axis tick is not displayed

In the x axis settings you need add :

scales: {
xAxes: [{
bounds: 'ticks',
}]}

Not sure what this changes but it will fix your problem.

time: {
    round: 'day'
}

solved it for me

Inside callback you can write a logic to control the number of ticks.

callback(value, index, values){
    if(index === 0)
    {
        return `${value}`
    }
}

Hope this might help.
For more information please refer

Chart.js v.4
Utilizing Version 4 of Chart.js, I accomplised this by setting the bounds of the x-axis.
According to the Configuration Options documentation chartjs.org, the default value is ‘data’.

The bounds property controls the scale boundary strategy (bypassed by
min/max options).

• ‘data’: makes sure data are fully visible, labels outside are removed
• ‘ticks’: makes sure ticks are fully visible, data outside are truncated

scales: {
           x: {
                 bounds: 'ticks',   //here is the answer
                 type: 'time',
                 time: {
                      unit: 'day',   
                      parser: 'DD-MMMM-YYYY',
                      tooltipFormat: 'DD-MMMM-YYYY'
                  },
                  grid: {
                    display: false
                  },
                  ticks: {                            
                    color: 'black',
                    align: 'center'                            
                  }
              }
         }