title: Chart.js : How I change the x axes ticks labels alignment in any sizes?
body: <p>How can I move my labels on my x axes in between another x axes label. Nothing seems to work and I was unable to find anything on the docs. Is there a workaround? I'm using line chart time series.
  <a href="https://www.chartjs.org/samples/latest/scales/time/financial.html" rel="nofollow noreferrer">https://www.chartjs.org/samples/latest/scales/time/financial.html</a></p>
  
  <p>Currently, with the code I have its generating the figure below:</p>
  
  <pre><code>var cfg = {
              elements:{
                  point: {
                      radius: 4
                  }
              },
              data: {
                  datasets: [
                      {
                          label: 'vsy',
                          backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                          borderColor: window.chartColors.red,
                          data: firstData,
                          type: 'line',
                          pointRadius: 2,
                          fill: false,
                          lineTension: 0,
                          borderWidth: 2
                      },
                      {
                          label: 'de vsy',
                          backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                          borderColor: window.chartColors.blue,
                          data: dataMaker(15),
                          type: 'line',
                          pointRadius: 2,
                          fill: false,
                          lineTension: 0,
                          borderWidth: 2
                      }
                  ],
  
              },
              options: {
  
                  animation: {
                      duration: 0
                  },
                  scales: {
                      xAxes: [{
                          type: 'time',
                          distribution: 'series',
                          offset: true,
  
                          time: {
                              unit: 'month',
                              displayFormats: {                                
                                  month: 'MMM'
                              }
                          },
  
                          ticks: {
  
                              autoSkip: true,
                              autoSkipPadding: 75,
  
                              sampleSize: 100
                          },
  
                      }],
                      yAxes: [{
                          gridLines: {
                              drawBorder: false
                          }
  
                      }]
                  },
                  tooltips: {
                      intersect: false,
                      mode: 'index',
  
                  }
              }
          };
  </code></pre>
  
  <p>This is what I have now: 
  <a href="https://i.stack.imgur.com/qyM6A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qyM6A.png" alt="Original"></a></p>
  
  <p>I want the labels on the x-axis to be on center instead of below the y axis grid line.
  <a href="https://i.stack.imgur.com/m2O0g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m2O0g.png" alt="Expected"></a></p>
  
  <p>Thanks to uminder, with his comment it solves the issue but now I have a conflicting tooltip which lie on a same grid. When I hover to april line first point it shows me mar 30 which lies just above it and vice versa.
  <a href="https://i.stack.imgur.com/HPofR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HPofR.png" alt="enter image description here"></a></p>
  
  <p>I fixed it by changing the mode to <code>nearest</code> but why is it activating the another point?
  <a href="https://i.stack.imgur.com/xFPlJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xFPlJ.png" alt="enter image description here"></a></p>