Chart Libraries and Angular – An Introduction

When we create web applications, data visualization is often necessary for end users to access the current state of certain parameters easily. Frequently visualization and display of data using only text creates challenges for users. In cases like these, charts are very useful. Angular uses numerous libraries for working with graphs. This post presents two of the most popular libraries, Chart.js and Highcharts, and includes a brief explanation about how they are incorporated and used in Angular.

Dejan Drvendzija

Web Developer

May 15, 2019

1 min read

Angular and Highcharts

Highcharts is an excellent library for working with graphs. You can do it in several ways with Angular, but my preference is using a wrapper. To create a wrapper with Highcharts, you need the following: Node (version 6.10.2+), npm (version 4.6.1+) and Angular/cli (version 6+).

First, install the Highcharts library in your app with the following commands.

$ npm install highcharts-angular --save
$ npm install highcharts –save

Second, import the HighchartsChartModule into the parent module of the component where you want to use the charts or app.module.ts.

import { HighchartsChartModule } from 'highcharts-angular';
@NgModule({
  imports: [ HighchartsChartModule]
)}

Next, import the Highcharts library into the component itself.

import * as Highcharts from 'highcharts';

In the same file (app.component.ts), add the Highcharts-angular component selector highcharts-chart to your template.

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="yourChartOptions" 
></highcharts-chart>

Finally, you also need to set the variable.

export class YourComponent {
Highcharts = Highcharts;
chartOptions = {
    series: [{
      data: [1, 4, 9]
    }]
  };

Angular and Chart.js

Chart.js is another popular library for working with graphs. You can include Chart.js in your Angular app very simply.

First, installChart.js in your Angular app using the command below.

$ npm install chart.js –save

Second, import the module into your component.

import { Chart } from 'chart.js';

The following example demonstrates how to use the chart.component.html and chart.component.ts files.

<!-- chart.component.html --> 
<canvas #barChart>{{ chart }}</canvas>

// chart.component.ts 
export class chartComponent implements OnInit {
 
  @ViewChild('barChart') private chartRef;
 
  chart: any;
 
  ngOnInit() {
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: bar,
      data: {
        labels: labels, // your labels array
        datasets: [{
          data: data, // your data array
          borderColor: '#00AEFF',
          fill: false
        }]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true
          }],
        }
      }
    });
  }
}

Now you have a basic introduction to the HighCharts and Chart.js libraries with Angular as well as instructions regarding how to use them. Future posts will include more detail about using these libraries.