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.
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