var xValues = timeArray;
new Chart("myChart",
{
type: "line",
data:
{
labels: xValues,
datasets: [{
label: "Size",
data: sizeArray,
borderColor: "green",
fill: false
}]
},
options:
{
legend: {display: false},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: document.getElementById("label_text").innerHTML
},
ticks: {
min: 0,
max: 30,
stepSize: 1
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Size (no. of elements)"
}
}]
}
}
});
Everything else is working well.The data is properly plotted on the x axes But what I want is that my x axis to be linearly scaled. I have tried many things but still it isn't working. I am not able to find what am I missing?
Please help
Image of chart generated:
One quick solution is to change your chart type to scatter and set showLine to True. The scatter chart automatically uses linear axes for both x and y.
new Chart("myChart",
{
type: "scatter",
data:
{
labels: xValues,
datasets: [{
label: "Size",
data: sizeArray,
borderColor: "green",
fill: false,
showLine: true,
tension: 0.15
}]
},...
Here is a DEMO