Chart.js stepSize is not working for Line chart for date

Question

I'm plotting a line with Chart.js. I'm plotting time against some value. I want fix time slots on axis. I'm using the stepSize property, but it is not applying.

Here is the code:

var data = {
  labels: [1495015201000, 1495015202000, 1495015203000, 1495015204000, 1495015205000, 1495015206000, 1495015207000, 1495015208000, 1495015209000, 1495015210000, 1495015211000, 1495015212000, 1495015213000, 1495015214000, 1495015215000, 1495015216000, 1495015217000, 1495015218000, 1495015219000, 1495015220000, 1495015221000, 1495015222000, 1495015223000, 1495015224000, 1495015225000, 1495015226000, 1495015227000, 1495015228000, 1495015229000, 1495015230000, 1495015231000, 1495015232000, 1495015233000, 1495015234000, 1495015235000, 1495015236000, 1495015237000, 1495015238000, 1495015239000, 1495015240000, 1495015241000, 1495015242000, 1495015243000, 1495015244000, 1495015245000, 1495015246000, 1495015247000, 1495015248000, 1495015249000, 1495015250000, 1495015251000, 1495015252000, 1495015253000, 1495015254000, 1495015255000, 1495015256000, 1495015257000, 1495015258000, 1495015259000, 1495015260000],
  datasets: [{
    label: "DataSet",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 1,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [10, 15, 47, 58, 54, 1, 6, 8],
    scaleOverride: false,
    scaleSteps: 0,
    scaleStartValue: 0,
    scaleStepWidth: 1
  }]
};

var myBarChart = new Chart($("#a"), {
  type: 'line',
  data: data,
  options: {
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true
        }
      }],
      xAxes: [{
        type: 'time',
        autoSkip: false,
        ticks: {
          min: 1495015201000,
          stepSize: 10000,
          max: 1495015260000
        },
        scaleLabel: {
          display: true
        },
      }]
    }
  }
});

JSFiddle link

I need fix scaling on x-axis based on step size. In current case, I need it with a time difference of 10 seconds.

Solution

Instead of using ticks configuration to get the xAxes to skip by 10 seconds, you can accomplish what you want using a Time Scale.

time: {
    unit: 'second',
    unitStepSize: 10
}

JSFiddle Demo: https://jsfiddle.net/q7qnh9so/5/

Comments

[Patrick Mutuku]

More on this, load moment.js before chart js.

[Patrick Mutuku]

More units under chartjs.org/docs/latest/axes/cartesian/time.html