- Angular Highcharts Tutorial
- Angular Highcharts - Home
- Angular Highcharts - Overview
- Environment Setup
- Configuration Syntax
- Angular Highcharts - Line Charts
- Angular Highcharts - Area Charts
- Angular Highcharts - Bar Charts
- Angular Highcharts - Column Charts
- Angular Highcharts - Pie Charts
- Angular Highcharts - Scatter Chart
- Angular Highcharts - Dynamic Charts
- Angular Highcharts - Combinations
- Angular Highcharts - 3D Charts
- Angular Highcharts - Map Charts
- Angular Highcharts Resources
- Angular Highcharts - Quick Guide
- Angular Highcharts - Resources
- Angular Highcharts - Discussion
Angular Highcharts - Stacked Area Chart
Following is an example of a stacked Area Chart.
We have already seen the configurations used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us see an example of a stacked Area Chart.
plotOptions
The plotOptions is a wrapper object for configuration objects for each series type. The configuration objects can be overridden for each series item as given in the series array. This is to stack the values of each series on top of each other.
Configure the stacking of the chart using plotOptions.area.stacking as "normal". Possible values are null which disable stacking, "normal" stacks by value and "percent" stacks the chart by percentages.
var plotOptions = { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } };
Example
app.component.ts
import { Component } from '@angular/core'; import * as Highcharts from 'highcharts'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { highcharts = Highcharts; chartOptions = { chart: { type: "area" }, title: { text: 'Historic and Estimated Worldwide Population Growth by Region' }, subtitle : { text: 'Source: Wikipedia.org' }, 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 : { shared: true, valueSuffix: ' millions' }, plotOptions : { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }, credits:{ enabled: false }, series: [ { name: 'Asia', data: [502, 635, 809, 947, 1402, 3634, 5268] }, { name: 'Africa', data: [106, 107, 111, 133, 221, 767, 1766] }, { name: 'Europe', data: [163, 203, 276, 408, 547, 729, 628] }, { name: 'America', data: [18, 31, 54, 156, 339, 818, 1201] }, { name: 'Oceania', data: [2, 2, 2, 6, 13, 30, 46] } ] }; }
Result
Verify the result.
angular_highcharts_area_charts.htm
Advertisements