Chart.js — Time Axis

We can make creating charts on a web page easy with Chart.js.

In this article, we’ll look at how to create charts with Chart.js.

Step Size

We can change the step size of the linear axis.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [0, 0.5, 1, 1.5, 2]
    }],
    labels: ['January', 'February', 'March', 'April']
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          max: 5,
          min: 0,
          stepSize: 0.5
        }
      }]
    }
  }
});

We change the stepSize to 0.5 so that the ticks are in intervals of 0.5.

Time Cartesian Axis

Time Cartesian axis is used to display times and dates.

When the ticks are added, it’ll automatically calculate the most comfortable unit based on the size of the scale.

For example, we can write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js" integrity="sha512-rmZcZsyhe0/MAjquhTgiUcb4d9knaFc7b5xAfju483gbEXTkeJRUMIPk6s3ySZMYUHEcjKbjLjyddGWMrNEvZg==" crossorigin="anonymous"></script>

<script src='https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js'></script>

<canvas id="myChart" width="400" height="400"></canvas>

to add moment.js before Chart.js.

This way, we can use the library to calculate the tick intervals.

Then we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [{
        x: new Date(2020, 1, 1),
        y: 1
      }, {
        t: new Date(2020, 2, 1),
        y: 10
      }]
    }],
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month'
        }
      }]
    }
  }
});

to add the time and number data with the t and y properties.

And we set the type of the x-axis to 'time' so that we display time.

And time.unit is 'month' so that we display the months.

Display Formats

We can change the display format of the ticks to any format that’s supported by moment.js.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [{
        x: new Date(2020, 1, 1),
        y: 1
      }, {
        t: new Date(2020, 4, 1),
        y: 3
      }, {
        t: new Date(2020, 7, 1),
        y: 5
      }, {
        t: new Date(2020, 10, 1),
        y: 7
      }]
    }],
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            quarter: 'MMM YYYY'
          }
        }
      }]
    }
  }
});

to set the format to month and year format for quarters.

Scale Distribution

We can change the scale distribution of the data distribution.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [{
        x: new Date(2020, 1, 1),
        y: 1
      }, {
        t: new Date(2020, 4, 1),
        y: 3
      }, {
        t: new Date(2020, 7, 1),
        y: 5
      }, {
        t: new Date(2020, 10, 1),
        y: 7
      }]
    }],
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'series'
      }]
    }
  }
});

We changed the distribution p[roperty to control the data distribution along the scale.

It can be changed to 'linear' , which spreads data according to their time.

And 'series' spreads data with the same distance from each other.

Conclusion

We can make various changes to the time axis with Chart.js.