Stacked Area Chart In Angular Using HighChart

In the last article, we discuss how to create a basic area chart in angular. In this article, we discuss how to create a stacked area chart in angular using highchart.
For that first, we need to know what is stacked area chart and where we use these?
Stacked Area Charts: The stacked chart shows how the constituent parts of a whole quantity changed over time. It shows how much each part(quantity) contributes to the whole amount at a particular time. For that let’s take an example for the population of each region on some time interval how much population increase over time with each region so we can easily visualization those things.
For drawing the chart First, we need to install High chart node modules in our application.


npm install highcharts --save
npm install highcharts-angular --save

After installing module lets add a module in our app.module.ts file.

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



After adding a module in the app.module file we can use it in our component to draw the chart. Let’s create app.component.ts file and add import highchat module using “import * as Highcharts from ‘highcharts’;” then assign options and values to the chart in this chart we need to chart type as “area” and adding In xAxis we have pass the years and in yAxis we pass the data of each region so we can display their how much poulation that years.


import { Component, VERSION ,OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

declare var require: any;
const More = require('highcharts/highcharts-more');
More(Highcharts);

const Exporting = require('highcharts/modules/exporting');
Exporting(Highcharts);

const ExportData = require('highcharts/modules/export-data');
ExportData(Highcharts);

const Accessibility = require('highcharts/modules/accessibility');
Accessibility(Highcharts);

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{


 public options: any = {
    chart: {
       type: 'area'
    },
    accessibility: {
        description: '',
    },
    title: {
       text: 'Historic and Estimated Worldwide Population Growth by Region'
    },
    subtitle: {
        text: 'Sources: Dummy data'
    },
    xAxis: {
        categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Billions'
        },
        labels: {
            formatter: function () {
                return this.value / 1000;
            }
        }
    },
    tooltip: {
        split: true,
        valueSuffix: ' millions'
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Asia',
        data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
        name: 'Africa',
        data: [105, 107, 111, 133, 221, 767, 1766]
    }, {
        name: 'Europe',
        data: [153, 203, 276, 408, 547, 729, 628]
    }, {
        name: 'America',
        data: [16, 31, 54, 156, 339, 818, 1201]
    }, {
        name: 'Oceania',
        data: [2, 2, 2, 6, 13, 30, 50]
    }]
  }

  constructor() { }

  ngOnInit(){
    Highcharts.chart('container', this.options);
  }
}


<h1 style="text-align:center">HighChart Basic Area</h1>
<div id="container"></div>




Below is the full embeded code for the stacked area chart using Highchart you can easily used in your application.

Spread the love
  •  
  •  
  •  
  •  
  • 6
  • 2
  •  
  •