how to display the first and last grid complete in chart js in type line

Question

I am new to chart js and want to implement it in reactjs project. I am using a line graph and want to display the tick under each image. For that purpose, I assigned a dynamic width to the line graph i.e. if there is 2 image then the width will be multiplied by 2 and if the image is 3 then the width should be multiplied by 3, and so on. The trick works somehow because I used the offset to true to display the labels in the center.

Now the issue I am facing is the first and last columns because they are not complete.

My question is how I can make them look complete.

What is the current result

I want the first label should start in the middle complete.

The first grid will display the tick in the middle also.

Answer 1

scales: {
      x: {
        offset: true,
        grid: {
          offset: true,
        }
      },
      y: {
        beginAtZero: true,
        min: 0,
        max: 10,
        ticks:{
          autoSkip: true,
        }
      },
    }

In such a case, you will need to add offset to the X. For more detail please visit https://github.com/chartjs/Chart.js/issues/8745