100% Stacked Column Chart in Angular Charts

100% Stacked Column

A 100% stacked column chart displays data in vertical columns where each column represents 100% of the data at that point, with individual series shown as segments proportional to their contribution.

100% stacked column chart showing percentage contribution of data series

Configure a 100% stacked column series as follows:

  1. Set the series type: Set the series type to StackingColumn100.

  2. Register StackingColumnSeriesService: Register StackingColumnSeriesService (along with any other chart services you need) in the component’s providers array.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { stackedData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = stackedData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let stackedData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Binding data to a series

Bind an array of JSON objects or a DataManager instance with the dataSource property. Map the category field with xName and each series value field with yName. Handle loading and request errors before assigning remote data to the chart.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { stackedData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = stackedData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let stackedData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Series customization

Use the following properties to customize a 100% stacked column series.

Solid fill

Use the fill property to set a solid CSS color for a series.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK' fill='red'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany' fill='yellow'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France' fill='green'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy' fill='blue'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Gradient fill

The fill property can apply an SVG gradient to a 100% stacked column series. Define each gradient in an SVG <defs> element with a unique ID, and assign it in the url(#gradientId) format.

Place the following definitions in index.html, inside <body> and outside <app-container>.

<svg>
    <defs>
        <linearGradient id="gradient1">
            <stop offset="0%" style="stop-color:darkblue;stop-opacity:5" />
            <stop offset="50%" style="stop-color:dimgrey;stop-opacity:5" />
        </linearGradient>
    </defs>
</svg>
<svg>
    <defs>
        <linearGradient id="gradient2">
            <stop offset="0%" style="stop-color:darkred;stop-opacity:5" />
            <stop offset="50%" style="stop-color:darkorange;stop-opacity:5" />
        </linearGradient>
    </defs>
</svg>
<svg>
    <defs>
        <linearGradient id="gradient3">
            <stop offset="0%" style="stop-color:darkmagenta;stop-opacity:5" />
            <stop offset="50%" style="stop-color:darkcyan;stop-opacity:5" />
        </linearGradient>
    </defs>
</svg>
<svg>
    <defs>
        <linearGradient id="gradient4">
            <stop offset="0%" style="stop-color:darkviolet;stop-opacity:5" />
            <stop offset="50%" style="stop-color:darkgoldenrod;stop-opacity:5" />
        </linearGradient>
    </defs>
</svg>

Set the series fill values to url(#gradient1), url(#gradient2), url(#gradient3), and url(#gradient4), respectively.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK' fill='url(#gradient)'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany' fill='url(#gradient1)'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France' fill='url(#gradient2)'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy' fill='url(#gradient3)'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Opacity

Use the opacity property to control series transparency. Set a value from 0 to 1.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK' opacity='0.5'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany' opacity='0.5'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France' opacity='0.5'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy' opacity='0.5'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Border

Use the border property to customize the color and width of the series border.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK' [border]='border'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany' [border]='border1'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France' [border]='border2'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy' [border]='border3'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public border?: Object;
    public border1?: Object;
    public border2?: Object;
    public border3?: Object;
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.border = {width: 1.5, color: 'blue', dashArray: '2,5'};
        this.border1 = {width: 1.5, color: 'green', dashArray: '2,5'};
        this.border2 = {width: 1.5, color: 'orange', dashArray: '2,5'};
        this.border3 = {width: 1.5, color: 'red', dashArray: '2,5'};
        this.title = 'Gross Domestic Product Growth';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

100% cylindrical stacked column chart

Set the columnFacet property to Cylinder to render a cylindrical shape. The default is Rectangle.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { DateTimeService, StackingColumnSeriesService
 } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { cylindricalData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [DateTimeService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' columnFacet= 'Cylinder' xName='x' yName='y' name='UK'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' columnFacet= 'Cylinder' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' columnFacet= 'Cylinder' xName='x' yName='y2' name='France'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' columnFacet= 'Cylinder' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = cylindricalData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'DateTime',
            labelFormat: 'y'
        };
        this.primaryYAxis = {
            title: 'GDP (%) Per Annum',
            rangePadding: 'None',
            labelFormat: '{value}%'
        };
        this.title = 'Gross Domestic Product Growth';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let cylindricalData: Object[] = [
        { x: new Date(2006, 0, 1), y: 900, y1: 190, y2: 250, y3: 150 },
        { x: new Date(2007, 0, 1), y: 544, y1: 226, y2: 145, y3: 120 },
        { x: new Date(2008, 0, 1), y: 880, y1: 194, y2: 190, y3: 115 },
        { x: new Date(2009, 0, 1), y: 675, y1: 250, y2: 220, y3: 125 },
        { x: new Date(2010, 0, 1), y: 765, y1: 222, y2: 225, y3: 132 },
        { x: new Date(2011, 0, 1), y: 679, y1: 181, y2: 135, y3: 137 },
        { x: new Date(2012, 0, 1), y: 770, y1: 128, y2: 152, y3: 110 }
]

Empty points

A data point whose mapped value is null or undefined is empty. Configure its behavior with emptyPointSettings.mode.

Mode

Use mode to control empty-point rendering. The supported modes are:

  • Gap: Leaves a gap at the empty point. This is the default mode.
  • Zero: Replaces the missing value with zero.
  • Average: Replaces the missing value with an average derived from neighboring points.
  • Drop: Omits the empty point from rendering.
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK' [emptyPointSettings]='emptyPointSettings'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France' [emptyPointSettings]='emptyPointSettings1'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public emptyPointSettings?: Object;
    public emptyPointSettings1?: Object;
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
        this.emptyPointSettings = { mode: 'Zero' };
        this.emptyPointSettings1 = { mode: 'Average' };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Empty-point fill

Use emptyPointSettings.fill when the selected mode renders a replacement point.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK' [emptyPointSettings]='emptyPointSettings'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France' [emptyPointSettings]='emptyPointSettings1'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public emptyPointSettings?: Object;
    public emptyPointSettings1?: Object;
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
        this.emptyPointSettings = { mode: 'Zero' };
        this.emptyPointSettings1 = { mode: 'Average', fill: 'red' };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
     { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
     { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
     { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
     { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
     { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
     { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
     { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
];

Empty-point border

Use emptyPointSettings.border to style a rendered replacement point.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, StackingColumnSeriesService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK' [emptyPointSettings]='emptyPointSettings'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France' [emptyPointSettings]='emptyPointSettings1'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public emptyPointSettings?: Object;
    public emptyPointSettings1?: Object;
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
        this.emptyPointSettings = { mode: 'Zero' };
        this.emptyPointSettings1 = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'} };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
     { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
     { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
     { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
     { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
     { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
     { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
     { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
];

Corner radius

Series corner radius

Use cornerRadius to round series points. Configure topLeft, topRight, bottomLeft, and bottomRight.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
    import { CategoryService, StackingColumnSeriesService, IPointRenderEventArgs
    } from '@syncfusion/ej2-angular-charts';


    import { Component, OnInit } from '@angular/core';
    import { percentData } from './datasource';
    @Component({
    imports: [
            ChartModule
        ],

    providers: [CategoryService, StackingColumnSeriesService],
    standalone: true,
        selector: 'app-container',
        template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [title]='title'>
            <e-series-collection>
                <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK'></e-series>
                <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
                <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France'></e-series>
                <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy' [cornerRadius]='cornerRadius'></e-series>
            </e-series-collection>
        </ejs-chart>`
    })
    export class AppComponent implements OnInit {
        public primaryXAxis?: Object;
        public chartData?: Object[];
        public title?: string;
        public cornerRadius?: Object;
        ngOnInit(): void {
            this.chartData = percentData;
            this.primaryXAxis = {
                title: 'Years',
                interval: 1,
                valueType: 'Category'
            };
            this.cornerRadius = { topRight: 10, topLeft: 10 };
            this.title = 'Gross Domestic Product Growth';
        }
        public pointRender(args: IPointRenderEventArgs) {
            if (args.point.y <= 250) {
                args.fill = '#ff6347';
            }
            else {
                args.fill = '#009cb8';
            }
        }
    }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Point corner radius

You can customize the corner radius for individual points in the chart series using the pointRender event by setting the cornerRadius property in its event argument.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
import { CategoryService, StackingColumnSeriesService
 } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
    }
    public pointRender(args: IPointRenderEventArgs) {
        if (args.point.index === 0 && args.point.series.index === 3) {
            args.cornerRadius = { topLeft: 10, bottomLeft: 0, topRight: 10, bottomRight: 0 };
        }
        if (args.point.index === 3 && args.point.series.index === 3) {
            args.cornerRadius = { topLeft: 10, bottomLeft: 0, topRight: 10, bottomRight: 0 };
        }
        if (args.point.index === 4 && args.point.series.index === 3) {
            args.cornerRadius = { topLeft: 10, bottomLeft: 0, topRight: 10, bottomRight: 0 };
        }
        if (args.point.index === 6 && args.point.series.index === 3) {
            args.cornerRadius = { topLeft: 10, bottomLeft: 0, topRight: 10, bottomRight: 0 };
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Events

Series render

The seriesRender event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
import { CategoryService, StackingColumnSeriesService
 } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
    }
    public seriesRender(args: ISeriesRenderEventArgs) {
        if (args.series.index === 0) {
            args.fill = '#ff4251';
        }
        else if (args.series.index === 1) {
            args.fill = '#4C4C4C';
        }
        else if (args.series.index === 2) {
            args.fill = '#794F1B';
        }
        else if (args.series.index === 3) {
            args.fill = '#1a9a6f';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Point render

The pointRender event allows you to customize each data point before it is rendered on the chart.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
import { CategoryService, StackingColumnSeriesService
 } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';
import { percentData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService, StackingColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y' name='UK'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y1' name='Germany'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y2' name='France'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn100' xName='x' yName='y3' name='Italy'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    ngOnInit(): void {
        this.chartData = percentData;
        this.primaryXAxis = {
            title: 'Years',
            interval: 1,
            valueType: 'Category'
        };
        this.title = 'Gross Domestic Product Growth';
    }
    public pointRender(args: IPointRenderEventArgs) {
        if (args.point.y <= 250) {
            args.fill = '#ff6347';
        }
        else {
            args.fill = '#009cb8';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let percentData: Object[] = [
             { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
             { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
             { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
             { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
             { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
             { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
             { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },
        ];

Troubleshooting

  • No columns are displayed: Confirm that StackingColumnSeriesService and required axis services are registered, the series type is StackingColumn100, and mapped fields exist.
  • Series do not normalize correctly: Confirm that all series use StackingColumn100 and compatible category values.
  • A point is missing: Check for null or undefined data and review emptyPointSettings.mode.
  • A gradient is not displayed: Confirm that the SVG gradient ID matches the series fill value.

See also