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.