Canvas chart how to display xAxis time format

Question

I'm trying to display a time linear graph in Angular 14 with chart.js version 3.9.1. I've been trying a lot of examples from https://www.chartjs.org/docs/latest/ or youtube tutorials and I couldn't find something to work. Below you can see what I wanted to achieve and the code that is not working. Any help or idea will be very helpful.

The yAxis is number and xAxis is DateTime.

TS file

data: ChartData = {
  labels: [new Date('2021-11-16T00:00:00'), new Date('2021-12-16T00:00:00'), new Date('2022-01-16T00:00:00')],
  datasets: [{
      type: 'line',
      data: [2, 3, 1],
      label: 'Title',
      fill: true,
    }],
};

options: ChartOptions = {
  plugins: {
    title: {
      text: 'Chart.js Time Scale',
      display: true
    }
  },
  scales: {
    x: {
      type: 'time',
      time: {
        tooltipFormat: 'DD T'
      },
      title: {
        display: true,
        text: 'Date'
      }
    },
    y: {
      title: {
        display: true,
        text: 'value'
      }
    }
  },
};

HTML file

<canvas baseChart style="height: 20em;"
        type="line"
        [data]="data"
        [options]="options">
</canvas>

Expected behavior: to see something like this

Actual behavior: displays nothing

AS I tried to dig further for a solution, I found it here: https://stackoverflow.com/a/68409070/9459066 — Radu, Nov 13 '22 at 07:56

score 0 · Answer 1 · answered Nov 08 '22 at 18:28

assuming this is the code you are feeding to new Chart
just have a couple syntax issues...

first, don't need the name assignment here...

these...

data: ChartData = {

options: ChartOptions = {

should be...

data: {

options: {

and the reason nothing is displayed is because of the semi-colon at the end,
it should be a comma,
here...

data: ChartData = {
  labels: [new Date('2021-11-16T00:00:00'), new Date('2021-12-16T00:00:00'), new Date('2022-01-16T00:00:00')],
  datasets: [{
      type: 'line',
      data: [2, 3, 1],
      label: 'Title',
      fill: true,
    }],
};        <<--- change to comma (,)

corrected...

data: {
  labels: [new Date('2021-11-16T00:00:00'), new Date('2021-12-16T00:00:00'), new Date('2022-01-16T00:00:00')],
  datasets: [{
    type: 'line',
    data: [2, 3, 1],
    label: 'Title',
    fill: true,
  }]
},
options: {
  plugins: {
    title: {
      text: 'Chart.js Time Scale',
      display: true
    }
  },
  scales: {
    x: {
      type: 'time',
      time: {
        tooltipFormat: 'DD T'
      },
      title: {
        display: true,
        text: 'Date'
      }
    },
    y: {
      title: {
        display: true,
        text: 'value'
      }
    }
  }
}

see following working snippett...

$(document).ready(function() {
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [new Date('2021-11-16T00:00:00'), new Date('2021-12-16T00:00:00'), new Date('2022-01-16T00:00:00')],
      datasets: [{
        type: 'line',
        data: [2, 3, 1],
        label: 'Title',
        fill: true,
      }]
    },
    options: {
      plugins: {
        title: {
          text: 'Chart.js Time Scale',
          display: true
        }
      },
      scales: {
        x: {
          type: 'time',
          time: {
            tooltipFormat: 'DD T'
          },
          title: {
            display: true,
            text: 'Date'
          }
        },
        y: {
          title: {
            display: true,
            text: 'value'
          }
        }
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Canvas chart how to display xAxis time format

1 Answers1