Chartjs-Chart.js display even intervals between two dates and adding label to y axes

by

0👍

There is something else wrong with your implementation that you have not told us about, because copy and pasting your code results in a working chart with GBP labels and time span. See below.

Please check your console for errors and also make sure that you are including moment.js, a dependency of Chart.js when work with dates.

I’ve also set options.yAxes[0].ticks.beginAtZero to true to more closely match the example you gave.

var ctxr = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctxr, {
  type: 'line',
  data: {
    datasets: [{
        label: "Estimated cost",
        data: [{
          x: new Date("09/24/2020 10:26:20"),
          //x: new Date(),
          y: 8
        }, {
          x: new Date("09/24/2020 10:27:56"),
          //x: new Date(),
          y: 8
        }],
        borderColor: [
          'rgba(196, 217, 45, 1)',
        ]
      },
      {
        label: "Actual cost",
        data: [{
          x: new Date("09/24/2020 10:27:56"),
          //x: new Date(),
          y: 23
        }, {
          x: new Date("09/24/2020 10:26:20"),
          //x: new Date(),
          y: 24
        }],
        borderColor: [
          'rgba(75, 178, 197, 1)',
        ]
      }
    ],
    labels: [new Date("09/24/2020 10:26:20").toLocaleString(), new Date("09/24/2020 10:27:56").toLocaleString()]
  },
  options: {
    responsive: true,
    responsiveAnimationDuration: 1,
    maintainAspectRatio: false,
    aspectRatio: 1,
    title: {
      display: true,
      text: 'Auction Overview'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          // Include a GBP in the ticks
          callback: function(value, index, values) {
            return 'GBP' + value;
          }
        }
      }],
      xAxes: [{
        type: 'time',
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<canvas id="chart"></canvas>

Leave a comment