Why Ticks Not Working in Chart.js but everything is correct?-CodePudding

    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:

CodePudding user response：

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