[Chartjs]-Chartjs : uncaught exception: 0 and X are too far apart with stepSize of Y

by

5👍

✅

A genius idea finally spurted! Searching against are too far apart with stepSize in chartjs git repository showed that time scale min option was wrongly set to 0.
Adding these min max to time option of xAxes solved the issue.

And even as time min max options are deprecated, ticks.min and ticks.max should be used:

ticks: {
    min: startTimestamp,
    max: endTimestamp
}

0👍

For me, I needed to update my type time to "minute" instead of "second".

 xAxes: [ {
          type: 'time',
          time: {
            unit: 'minute'
          },

0👍

In my case, that because the data from x is not ‘int’ but ‘string’.

data from Backend:

data: [{
    x: "1626414792000",  //1626414792000
    y: 2
  }, {
    x: 1626414873000,  // 14:00:00
    y: 3
  }, {
    x: 1626415500000,  // 13:00:00
    y: 5
  }]
}],

Then, I parse x data before chart.js use it.
My full code:

var obj = {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [{
        x: "1626414792000",
        y: 2
      }, {
        x: 1626414873000,
        y: 3
      }, {
        x: 1626415500000,
        y: 5
      }]
    }],
  },
  options: {
    title: {
        text: 'Chart',
        display: true,
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
            unit: 'minute',
            /* parsing x data before chart.js use it  */
            parser: function(dt){
                console.log(dt)
                return parseInt(dt);
            }
        }
      }]
    }
  }
}

0👍

In my case, the issue happened when zooming.

It was caused by wrong properties of the zoom plugin option used with a chart type 'time'. The following works options works fine:

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          suggestedMin: 0,
        },
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD YYYY',
        },
      }],
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'xy'
        },
        zoom: {
          enabled: true,
          mode: 'xy',
        }
      }
    }
}

Leave a comment