chart.js display even intervals between two dates and adding label to y axes

Question

I am converting Jqplot chart to ChartJs and I want them both to look the same. I have the following chart using the chart.js library.

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: {
                        // Include a GBP in the ticks
                        callback: function (value, index, values) {
                            return 'GBP' + value;
                        }
                    }
                }],
                xAxes: [{
                    type: 'time',
                }]
            }
        }
    });

that gives me this chart

I would like to make it have intervals of time between the start date and the end date(like the x axis on the Jqplot chart) and also add string "GBP" in front of each y-value (like y-axis of Jqplot chart).

Both graphs are generated with the same identical data. so they should look the same.

So far everything i have tried from the chart.js docs has failed.

Below is a snipped of my js console:

Answer 1

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/[email protected]"></script>
<canvas id="chart"></canvas>