Chart.js does not display any data

Question

I have a data coming from the server in the following format:

[
  {
    name: "series1"
    series: [
    {
        date: "2016-01-31T00:00:00.000Z",
        value: 49
      },
      {
        date: "2016-02-28T00:00:00.000Z",
        value: 49
      },
      {
        date: "2016-03-30T00:00:00.000Z",
        value: 44
      },
      {
        date: "2016-04-31T00:00:00.000Z",
        value: 57
      }
    ]
  }
  {
    name: "series2"
    series: [
       ...
    ]
  }
]

Every point in the series above represent monthly data

Here is my chart declaration:

this.ctx = this.myChartRef.nativeElement.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'line',
      data: {
          datasets: [{
            label: this.data[0].name,
            fill: false,
            data: [
              this.data[0].series.map((x) => {
                return {
                  x: this.dateTickFormatting(x.date),
                  y: x.value
                }
              })
            ],
          }, {
            label: this.data[1].name,
            fill: false,
            data: [
              this.data[1].series.map((x) => {
                return {
                  x: this.dateTickFormatting(x.date),
                  y: x.value
                }
              })
            ],
          }]
      },
      options: {
          responsive: true,
          title: {
              display: true,
              text: 'My Chart',
              fontSize: 18
          },
          legend: {
              display: true,
              position: "top"
          },
          scales: {
              xAxes: [{
                  type: 'time',
                  time: {
                      unit: 'month',
                      displayFormats: {
                          'month': 'MMM YYYY',
                      },
                      tooltipFormat: "MMM YYYY"
                  }
              }],
          }
      }
    });

function dateTickFormatting returns string like that:

 return new Date(val).toLocaleString('en-us', { month: 'short', year: 'numeric' });

When I am running the code above the cart does not show any values, what I see is only blank canvas with horizontal lines.

Any ideas how to fix that?

Answer 1

There are several problems in your data and in your code:

1. The provided data is not of valid JSON format (lots of commas missing)
2. The data option inside individual datasets is not correctly created
   • It must not be a nested array but a simple array
   • The Date must not be converted to string as you currently do using dateTickFormatting

Please also note that moment.js needs to be imported if you're not using a bundled build of Chart.js.

The following runnable code snippet illustrates how it can be done.

const data = [{
    name: "series1",
    series: [{
            date: "2016-01-31T00:00:00.000Z",
            value: 49
        },
        {
            date: "2016-02-28T00:00:00.000Z",
            value: 49
        },
        {
            date: "2016-03-30T00:00:00.000Z",
            value: 44
        },
        {
            date: "2016-04-31T00:00:00.000Z",
            value: 57
        }
    ]
}, {
    name: "series2",
    series: [{
            date: "2016-01-31T00:00:00.000Z",
            value: 12
        },
        {
            date: "2016-02-28T00:00:00.000Z",
            value: 32
        },
        {
            date: "2016-03-30T00:00:00.000Z",
            value: 28
        },
        {
            date: "2016-04-31T00:00:00.000Z",
            value: 48
        }
    ]
}];

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        datasets: [
          {
              label: data[0].name,
              fill: false,
              backgroundColor: 'red',
              borderColor: 'red',
              data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }, {
              label: data[1].name,
              fill: false,
              backgroundColor: 'blue',
              borderColor: 'blue',
              data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }
        ]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'My Chart',
            fontSize: 18
        },
        legend: {
            display: true,
            position: 'top'
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month',
                    displayFormats: {
                        'month': 'MMM YYYY',
                    },
                    tooltipFormat: 'MMM YYYY'
                }
            }],
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>