The HighCharts and D3js are the JavaScript library for data visualization. HighCharts Angular library is the official minimal Highcharts wrapper for Angular. We have a lot of other libraries’ options to add a chart in Angular. Where D3js is the most popular open-source.
In this tutorial, we’ll learn how to used highcharts library and highcharts-angular library in Angular 11. First, we’ll use only highCharts library to demonstrates charts like pie, line, and more. In the second example, we’ll use highCharts-angular library to demonstrate different charts.
What is Highcharts Angular library
Highcharts is a product that was created by the Norway-based company Highsoft and this library for charting is written in pure JavaScript. Highcharts is an SVG-based, multi-platform charting library that has been actively developed since 2009. It makes it easy to add interactive, mobile-optimized charts to your web and mobile projects. It features robust documentation, advanced responsiveness, and industry-leading accessibility support. Highcharts is used by large corporate like yahoo, Facebook, visa, and more. HighChart angular is from the official minimal Highcharts wrapper for Angular. We can use highcharts library in other frameworks like Vue and react also.
Example on highCharts in angular
We are demonstrating two charts examples of highcharts. I have taken both chart information from highcharts official demo page and we are only using highCharts library only in the first example. The bar charts contain information about the world population. The pie a chart containing information on the browser market
Setting up project for Angular HighChart example
We need to create our angular project using angular CLI and need to install the Angular highCharts library.
ng new highChart
cd highChart
npm install highcharts --saveImplementing highChart example in our component
In our app.component.html template, we have two columns, each containing a different chart. One column content bar chart and another for the pie chart. For UI angular grid we have to use ng-bootstrap, which is optional is for demo purposes only.
<div class="container">
<h3 class="mt-2">{{ title }}</h3>
<div class="row">
<div class="col-sm">
<div id="barChart" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<h5 class="card-title text-center">Bar Chart - Population</h5>
</div>
<div class="col-sm">
<div id="pieChart" style="width:100%; height:400px;"></div>
<h5 class="card-title text-center">Pie Chart - Browser market</h5>
</div>
</div>
</div>
We have added dummy data for both charts and we have two methods. One for a drawing bar and another for a pie chart. Let’s edit the app.component.ts file to add our chart data and options.
import { Component, OnInit } from '@angular/core';
import * as HighCharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'Angular 9 HighCharts';
constructor() { }
ngOnInit() {
this.barChartPopulation();
this.pieChartBrowser();
}
barChartPopulation() {
HighCharts.chart('barChart', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
type: undefined,
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
type: undefined,
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
type: undefined,
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
type: undefined,
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
}
pieChartBrowser() {
HighCharts.chart('pieChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in October, 2019'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
type: undefined,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
}
}In highcharts, we have a series object is a set of data. For example, a line graph or one set of columns. All data plotted on a chart comes from the series object. The type of series, for example, line or column. By default, the series type is inherited from the chart.type, so unless the chart is a combination of series types, there is no need to set it on the series level.
HighCharts Angular example
There is a different node package module (npm) library to include HighCharts in Angular. We are using highcharts Angular npm library, which is one of the most used libraries to include highcharts library in the angular project. Let’s continue from the previous example. Let’s install our highCharts-angular library and run the following command to install the library.
npm install highcharts-angular --saveIn our app.module.ts we need to import and include the HighchartsChartModule as.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HighchartsChartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }HighCharts Angular: Simple line chart example
First, we’ll demonstrate a simple line chart as shown in the screenshot.
In our component where we are using Highcharts charts, we need to import Highcharts first. We have already installed the highCharts in our project. Let’s edit the app.component.ts file to include highCharts library and data for our line chart example.
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
highcharts = Highcharts;
chartOptions: Highcharts.Options = {
title: {
text: "Infosys stock value"
},
xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
yAxis: {
title: {
text: "Infosys Stock value in dollar"
}
},
series: [{
data: [12, 8, 43, 35, 20, 90, 100, 110],
type: 'line'
}]
}
}In chartOption we need to specify chart data and chart types. We need to add the highCharts Angular component in our app.component.html file as.
<highcharts-chart
[Highcharts] = "highcharts"
[options] = "chartOptions"
style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>HighCharts Angular: Bar chart example
In our second example, we will display the world population from 1800 to 2020 using bar charts. We don’t need to change our app.component.html template. We only need to change the HighChart option only. Let’s edit the app.component.ts file to include bar chart data.
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
highcharts = Highcharts;
chartOptions: Highcharts.Options = {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
},
yAxis: {
min: 0,
title: {
text: "Infosys Stock value in dollar"
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
type: undefined,
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
type: undefined,
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
type: undefined,
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
type: undefined,
name: 'Year 2026',
data: [1216, 1001, 4436, 738, 40]
}]
}
}How to implmennt Angular highcharts pie chart example
At last, we’ll demonstrate HighCharts Angular pie chart, we don’t need to change it in our app.component.html. Let’s edit the app.component.ts file to include pie chart data and Chart options. Here is a screenshot of our example.
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
highcharts = Highcharts;
chartOptions: Highcharts.Options = {
chart: {
plotBackgroundColor: 'silver',
plotBorderWidth: 2,
plotShadow: true,
type: 'pie'
},
title: {
text: 'Browser market shares in October, 2019'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
type: undefined,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
}
}How to change Angular HighCharts chart size
We can easily control our HighCharts Angular chart size using our CSS style. We can also use media Query to have different chart sizes based on device size. Let’s edit our highCharts component and remove the inline style on the HighCharts page.
<highcharts-chart [Highcharts] = "highcharts" [options] = "chartOptions">
</highcharts-chart>
We can use the highcharts-chart tag name in our component SCC file to edit the style sheet. Add the following code in our app.component.scss file.
highcharts-chart {
width: 100%;
height: 500px;
display: block;
}Conclusion
Finally, we have completed a demonstration on an Angular highcharts pie, lines, and bar chart. Angular HighCharts are easy to customize based on your needs. Here is an ionic slider repository of an example and you can view the code in our Github repository.
Related posts
- How to make charts and graphs using angular chartjs?
- How to integrate d3js in Angular and an example of Angular D3js?
- How to install Angular material
- How to implement CKEditor in Angular
- How to use to implement HighCharts Angular
