How to set max/min on x axis to display time range in Chart.js?

0
votes

How do I set the maximum and minimum to display on the x axis? I'd ideally like it to show just the one 24 hour period. The chart is initialised with the following options:

options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        max: 120,
        fontFamily: 'FontAwesome'
        }
    }],
    xAxes: [{
      type: 'time',
      time: {
        unit: 'day',
        displayFormats: {
        'day': 'HH:mm'
      }
    },
    distribution: 'series',
    ticks: {
      source: 'data'
    }                                               
  }]
},

The max/min is set:

chart.options.scales.xAxes[0].ticks.min = dateToday;
chart.options.scales.xAxes[0].ticks.max = dateTomorrow;

Dates are date objects at 00:00 hours.

Graph output is:

Chart.js

Any ideas? Thanks.

1
javascriptchart.js

1 Answers

1
votes

Try this : yAxes: [{ ticks: { suggestedMin: 0, suggestedMax: 100 } }]

It's tested and working for me. you can setup for xAxes as well.