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.

Time Axis Scale Bounds

We can change the bounds property to control the scale boundary strategy.

It can either be 'data' or 'ticks' .

'data' makes sure data are fully visible.

'ticks' makes sure ticks are fully visible.

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',
        bounds: 'data'
      }]
    }
  }
});

to display the ticks according to the available data so that they’re visible.

#javascript #programming #web-development #developer #chartjs