Implementing a Chart.js line chart in your Angular application
Tags: beginners, learning, devtips
Published: 2018-06-07 14:48:53

---
title: Implementing a Chart.js line chart in your Angular application
published: true
description: Chart.js is an open source library for building great looking charts with Javascript. Here's how you can easily use it to display data in your Angular application.
tags: #beginners #learning #devtips
---
![alt text](https://s3-eu-west-1.amazonaws.com/wia-flarum-bucket/2018-06-07/1528382411-789265-chart-js-angular.png)

Chart.js is an open source library for building great looking charts with Javascript. Here's how you can easily use it to display data in your Angular application.


###**Install the library**

First, you'll need to install the Chart.js library:

`npm install chart.js --save`

Next, import the module in your Component:

`import { Chart } from 'chart.js';`
###**Prepare your data**

To render your chart, each dataset should be an array of numbers, or an array of objects formatted like the below, where `x` and `y` refer to the axes of the chart:
```
[{
  x: 1,
  y: 10
}, {
  x: 2,
  y: 20
}]
```
You can substitute the `x` or `y` properties with `t` if you're using the [time scale](https://www.chartjs.org/docs/latest/axes/cartesian/time.html).
Use the [Array.map() method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to structure your data for Chart.js.

You can also specify labels for the x axis - this must also be an array.


###**The template**

In your Component's template, add a `canvas` element with a [reference variable](https://community.wia.io/d/24-template-reference-variables-in-angular-2) of your choice. Inside the canvas element, bind to the variable `chart`. We'll create the variable in the next step.

`<canvas #lineChart>{{ chart }}</canvas>`

###**Configuring the chart**

Back in your Component, import `ViewChild` from angular core and add the reference to your canvas element as a private member. Then, add a public variable `chart` - this will be assigned to a Chart.js instance and will be binded to our template:
```
import { Component, OnInit, ViewChild } from '@angular/core';

  @Component({
    ...
  })

  export class myComponent implements OnInit {
    @ViewChild('lineChart') private chartRef;
    chart: any;
    ...
  }
```
Now that you have your data prepared, and a reference to your canvas element, let's add the basic Chart.js configuration for a line chart:
```
this.chart = new Chart(this.chartRef.nativeElement, {
  type: 'line',
  data: {
    labels: labels, // your labels array
    datasets: [
      {
        data: dataPoints, // your data array
        borderColor: '#00AEFF',
        fill: false
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: true
      }],
      yAxes: [{
        display: true
      }],
    }
  }
});
```
Notice that the `data.datasets` option takes an array - you can have many datasets displaying on the same line chart.

The chart will now display on your page. If you want to fit your chart into a container, you can set the `maintainAspectRatio` option to false. See the [Chart.js documentation](http://www.chartjs.org/docs/latest/) for more configuration options!