https://i.sstatic.net/AfosF.png
Upon observation of the provided image, it can be seen that the points are halved when they reach the top or bottom edges, specifically when the data points are 1 or 5 in this context.
Various attempts were made to address this issue such as using padding, adding 'fake' data to extend the limits of 1 and 5, and removing it with a callback function on ticks. However, none of these approaches yielded the desired results.
Below is the configuration used for this chart.
const config = {
type: 'line' as ChartType,
data: data,
options: {
pointStyle: 'circle',
//pointBackgroundColor: 'white',
scales: {
y: {
ticks: {
maxTicksLimit: 5,
stepSize: 1,
},
min: 1,
max: 5,
reverse: true,
},
},
},
};
After removing the min and max values, the output matched the expected results. https://i.sstatic.net/a7KQQ.png
However, it is essential for me to have fixed Y-axis values, hence the need for min and max values.
Any suggestions on how to resolve this issue would be greatly appreciated.