Using ng2-charts to Chart Date Based Data

tldr;

Many Angular applications need to put data on a chart, and ng2-charts is a great option. There are several built in charts that just work. But you can also customize the charts quite a bit as well. In this post we’ll learn how to chart your data by grouping it according to date. Because ng2-charts is built on Chart.js, we just have to dig through the documentation enough to find what we’re looking for. We won’t go in to detail on how to really use ng2-charts, but instead we’ll just look at the options that need to be set and how the data should look when passed in to the chart.

Chart Options

Let’s start with building our chart options object. There are many options you can set, but there are just a couple that are related to charting our date based on time. In this case, the x axis will represent the date and the y axis will represent the actual data. Here’s an example of the chart options object to display your time based data:

export class ChartComponent {
  public chartOptions = {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'MMM D', // This is the default
          },
        },
      }];
    }
  }
}

First we need to set the type to time. Then we tell the chart what unit of time to group the data by. I chose day for this example, but you can select millisecond, second, minute, hour, day, week, month, quarter and year. In addition, you can determine how the time unit should be displayed. The day format above is the default output for day. You can provide any valid format based on the Moment.js docs.

That’s all you need to do for setting the options for the chart. With this, you’re ready to format the data so that it can output properly in the chart. If you have any more questions, check out the Chart.js docs.

Data Formatting

After you’ve got the chart options set, you need to format the data that you input to the chart. Normally for the chart we would just need to provide an object with a data attribute and a label attribute. The data is normally just an array of numbers, each of which will be plotted on the chart. But for time based data, we need that array of data to look a little different:

export class ChartComponent {
  // ...

  public data = [{
      x: new Date('2020-04-30'),
      y: 5
    },
    {
      x: new Date('2020-05-01'),
      y: 10
    },
  ];
}

Now we provide an array of objects. The x attribute (or t if you want) contains the date for that data point, and the y attribute has the value. With the data formatted like this, and the chart options set up as well, you’re ready to output the chart. If you have any more questions, check out the Chart.js docs.

Chart Output

Now all you have to do is output the chart just as explained in the ng2-charts docs. Here’s a partial example:

<canvas baseChart [datasets]="[{ data, label: 'My data' }]" [options]="chartOption" chartType="line"> </canvas>

The chart will now show on the screen with our data grouped by date on the x axis.

Conclusion

ng2-charts is very configurable, as is Chart.js. I have found that digging through the documentation can be hard but only because it’s hard to know what to search for. The docs are really good and everything is in there. Just keep searching and looking for the options!