CODEWITHSUNDEEP
chart.js
HelloWorld
HelloWorld

Reputation: 2355

chartjs : uncaught exception: 0 and X are too far apart with stepSize of Y

I am plotting data on a graph with chartjs. It used to work but I don't know why I am continuously getting uncaught exception: 0 and 1587533402000 are too far apart with stepSize of 1 hour, although neither 0 nor 1587533402000 are part of the data I plot.

Here is how I plot the graph : 

var chart_temperature = new Chart(ctx_temperature, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: timeXValues,
        fill: false, // no inner color
        datasets: [{
                label: 'Temperature',
                borderColor: 'rgb(255, 99, 132)',
                data: temperatureData
            }]
    },

    // Configuration options go here
    options: {
        responsive: true,
        layout: {
            padding: {
                bottom: 50
            }
        },
        elements: {
            point: {
                radius: 0 // don't show points
            },
            line: {
                fill: false
            }
        },
        scales: {
            xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'hour',
                        displayFormats: {
                            hour: 'DD/MM/YYYY HH:mm'
                        }
                    },
                    ticks: {
                        beginAtZero: false // tried true, and also removed all this as it used to be
                    }

                }],
            yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'T°C'
                    }
                }]

        },
        showLines: true, // the points will be connected
        // Optimization
        animation: {
            duration: 0 // general animation time
        },
        hover: {
            animationDuration: 0 // duration of animations when hovering an item
        },
        responsiveAnimationDuration: 0 // animation duration after a resize

    }
});

Why is chartjs using 0 whereas the chart is not starting at 0 ? Where should I look at ?

Any help appreciated :-)

Edit :

Commenting the following line (in scales.xAxes) makes the chart displayed :

//                        type: 'time',

But the X Axis becomes then useless since timestamps are displayed.

Upvotes: 2

Views: 5043

Answers (4)

HelloWorld
HelloWorld

Reputation: 2355

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
}

Upvotes: 5

Fenix
Fenix

Reputation: 2401

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',
        }
      }
    }
}

Upvotes: 0

happybird
happybird

Reputation: 74

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);
            }
        }
      }]
    }
  }
}

Upvotes: 0

Mech45
Mech45

Reputation: 339

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

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

Upvotes: 0

Related Questions