Stacked Bar in Angular Chart component
3 Oct 20239 minutes to read
Stacked bar
To render a stacked bar series, use series type
as StackingBar
and inject StackingBarSeriesService
into the @NgModule.providers
.
import { Component, OnInit } from '@angular/core';
import { stackData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
<e-series-collection>
<e-series [dataSource]='chartData' type='StackingBar' xName='x' yName='y' name='Apple'></e-series>
<e-series [dataSource]='chartData' type='StackingBar' xName='x' yName='y1' name='Orange'></e-series>
<e-series [dataSource]='chartData' type='StackingBar' xName='x' yName='y2' name='Wastage'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
primaryYAxis: any;
ngOnInit(): void {
this.chartData = stackData;
this.primaryXAxis = {
valueType: 'Category',
title: 'Months'
};
this.title = 'Sales Comparison';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { BarSeriesService, StackingBarSeriesService, CategoryService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ BarSeriesService, StackingBarSeriesService, CategoryService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Cylindrical stacked bar chart
To render a cylindrical stacked bar chart, set the columnFacet
property to Cylinder
in the chart series.
import { Component, OnInit } from '@angular/core';
import { cylindricalData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis'>
<e-series-collection>
<e-series [dataSource]='chartData' type='StackingBar' columnFacet= 'Cylinder' xName='x' yName='y'></e-series>
<e-series [dataSource]='chartData' type='StackingBar' columnFacet= 'Cylinder' xName='x' yName='y1'></e-series>
<e-series [dataSource]='chartData' type='StackingBar' columnFacet= 'Cylinder' xName='x' yName='y2'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
primaryYAxis: any;
primaryXAxis: any;
ngOnInit(): void {
this.chartData = cylindricalData;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { BarSeriesService, StackingBarSeriesService, CategoryService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ BarSeriesService, StackingBarSeriesService, CategoryService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Series customization
The following properties can be used to customize the stacked bar
series.
- fill – Specifies the color of the series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes of series.
- border – Specifies the color and width of series border.
import { Component, OnInit } from '@angular/core';
import { stackData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
<e-series-collection>
<e-series [dataSource]='chartData' type='StackingBar' xName='x' yName='y' name='Apple' fill='yellow' [border]='border' dashArray='5.5'></e-series>
<e-series [dataSource]='chartData' type='StackingBar' xName='x' yName='y1' name='Orange' fill='green' [border]='border1' dashArray='5.5'></e-series>
<e-series [dataSource]='chartData' type='StackingBar' xName='x' yName='y2' name='Wastage' fill='blue' [border]='border2' dashArray='5.5'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public border?: Object;
public border1?: Object;
public border2?: Object;
public chartData?: Object[];
public title?: string;
primaryYAxis: any;
ngOnInit(): void {
this.chartData = stackData;
this.border = {
width: 2,
color: 'brown'
};
this.border1 = {
width: 2,
color: 'red'
};
this.border2 = {
width: 2,
color: 'grey'
};
this.primaryXAxis = {
valueType: 'Category',
title: 'Months'
};
this.title = 'Sales Comparison';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { BarSeriesService, StackingBarSeriesService, CategoryService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ BarSeriesService, StackingBarSeriesService, CategoryService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);