CODEWITHSUNDEEP
javascriptchartschart.js
Michael
Michael

Reputation: 721

'Chart.js' time chart not displaying properly

So I'm trying to create a simple chart using chart.js. The chart consists of price values for the y-axis and time values for the x-axis. The data is fetched from an API.

The y-axis value are displayed properly, but for the x-values they appear condensed. These are the options I'm passing into the chart:

options: {
        title: {
          display: false
        },
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            type: 'time',
            ticks: {
              source: 'data',
              autoSkip: true,
              autoSkipPadding: 50
            },
            time: {
              parser: 'HH:mm',
              tooltipFormat: 'HH:mm',
              unit: 'minute',
              stepSize: 10,
              displayFormats: {
                'minute': 'HH:mm',
                'hour': 'HH:mm'
              }
            }
          }],
          yAxes: [{
            type: 'linear',
            ticks: {
              beginAtZero: false,
              callback: function(value, index, values) {
                return '$' + value;
              }
            }
          }]
        }
}

I've tried adjusting the step size, but it's not working. For some strange reason, the first label on the x-axis is 15:14 no matter how much I change the data. What could be the issue?

The full code can be found here.

Thanks in advance.

Upvotes: 0

Views: 2442

Answers (1)

Chase Choi
Chase Choi

Reputation: 1012

Seems parser doesn't really work well with. simply remove parser in the option, you can see the clear result.

time: {
  //parser: 'HH:mm',
  tooltipFormat: 'HH:mm',
  unit: 'minute',
  stepSize: 10,
  displayFormats: {
    'minute': 'HH:mm',
    'hour': 'HH:mm'
  }
}

Upvotes: 1

Related Questions