chart.js not showing all values in x axis

Question

I'm trying to plot a line graph with multi-axis. The main issue is in x-axis not all the values are showing. Its showing some random values. There are 2 set of values, each having 10 values. So 20 ticks should be there in x-axis. But its only showing 4. I added 'autoSkip: false' but its not working.

var s1 = {
          label: 's1',
          borderColor: 'blue',
          spanGaps: false,
          lineTension: 0,
          data: [
            { x: '2017-01-06 7:00:00', y: 100 },
            { x: '2017-01-07 10:00:00', y: 101 },
            { x: '2017-01-08 18:00:00', y: 101 },
            { x: '2017-01-09 4:00:00', y: 101 },
            { x: '2017-01-10 19:00:00', y: 101 },
            { x: '2017-01-11 21:00:00', y: 101 },
            { x: '2017-01-12 6:00:00', y: 101 },
            { x: '2017-01-13 17:00:00', y: 101 },
            { x: '2017-01-14 15:00:00', y: 101 },
            { x: '2017-01-15 14:00:00', y: 101 },
          ]
        };
        
        var s2 = {
          label: 's2',
          borderColor: 'red',
          spanGaps: false,
          lineTension: 0,
          data: [
            { x: '2017-01-07 18:00:00', y: 90 },
            { x: '2017-01-08 3:00:00', y: 105 },
            { x: '2017-01-09 10:00:00', y: 101 },
            { x: '2017-01-10 19:00:00', y: 101 },
            { x: '2017-01-12 20:00:00', y: 101 },
            { x: '2017-01-16 23:00:00', y: 90 },
            { x: '2017-01-19 7:00:00', y: 105 },
            { x: '2017-01-21 14:00:00', y: 101 },
            { x: '2017-01-25 22:00:00', y: 101 },
            { x: '2017-01-29 11:00:00', y: 101 },
          ]
        };
        
        var chart = new Chart(ctx, {
          type: 'line',
          data: { 
            datasets: [s1, s2]
          
          },
          options: {
            scales: {
              yAxes: [{
                scaleLabel: {
                  display: true
                },
                ticks: {
                  suggestedMin: 0,
                  beginAtZero: true
                }
              }],
              xAxes: [{
                stacked: false,
                type: 'time',
                time: {
                  displayFormats: {
                    'millisecond': 'D MMM YYYY, hh:mm a',
                    'second': 'D MMM YYYY, hh:mm a',
                    'minute': 'D MMM YYYY, hh:mm a',
                    'hour': 'D MMM YYYY, hh:mm a',
                    'day': 'D MMM YYYY, hh:mm a',
                    'week': 'D MMM YYYY, hh:mm a',
                    'month': 'D MMM YYYY, hh:mm a',
                    'quarter': 'D MMM YYYY, hh:mm a',
                    'year': 'D MMM YYYY, hh:mm a',
                  }
                },
                scaleLabel: {
                  display: true,
                },
                ticks: {
                  stepSize: 1,
                  autoSkip: false
                }
              }]
            }
          }
        });

score 0 · Answer 1 · answered Oct 11 '21 at 05:29

The missing code was:

unit: 'day',
unitStepSize: 2,

After adding them, now all x-axis points are showing.

xAxes: [{
                type: "time",
                time: {
                  unit: 'day',
                  unitStepSize: 2,
                  displayFormats: {
                    'millisecond': 'D MMM YYYY, hh:mm a',
                    'second': 'D MMM YYYY, hh:mm a',
                    'minute': 'D MMM YYYY, hh:mm a',
                    'hour': 'D MMM YYYY, hh:mm a',
                    'day': 'D MMM YYYY, hh:mm a',
                    'week': 'D MMM YYYY, hh:mm a',
                    'month': 'D MMM YYYY, hh:mm a',
                    'quarter': 'D MMM YYYY, hh:mm a',
                    'year': 'D MMM YYYY, hh:mm a',
                  }
                },
                scaleLabel: {
                  display: true,
                },
                ticks: {
                  autoSkip: false,
                  maxTicksLimit: 10
                }
              }]

chart.js not showing all values in x axis

1 Answers1