Bar in Angular Chart component
27 Apr 202411 minutes to read
Bar
To render a bar series, use series type
as Bar
and inject BarSeriesService
into the @NgModule.providers
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { BarSeriesService, StackingBarSeriesService, CategoryService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { barData } from './datasource';
@Component({
imports: [
ChartModule
],
providers: [ BarSeriesService, StackingBarSeriesService, CategoryService],
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='Bar' xName='x' yName='y' name='India'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public title?: string;
primaryXAxis: any;
primaryYAxis: any;
ngOnInit(): void {
this.chartData = barData;
this.title = 'Unemployment rate (%)';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Bar space and width
The columnSpacing
and columnWidth
properties are used to customize the space between bars.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { BarSeriesService, StackingBarSeriesService, CategoryService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { barData } from './datasource';
@Component({
imports: [
ChartModule
],
providers: [ BarSeriesService, StackingBarSeriesService, CategoryService],
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='Bar' xName='x' yName='y' name='India' columnwidth='0.5' columnSpacing='0.5'></e-series>
<e-series [dataSource]='chartData' type='Bar' xName='x' yName='y1' name='India'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public title?: string;
primaryXAxis: any;
primaryYAxis: any;
ngOnInit(): void {
this.chartData = barData;
this.title = 'Unemployment rate (%)';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Grouped bar
You can use the groupName
property to group the data points in the bar type charts. Data points with same group name are grouped together.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { BarSeriesService, StackingBarSeriesService, CategoryService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { groupData } from './datasource';
@Component({
imports: [
ChartModule
],
providers: [ BarSeriesService, StackingBarSeriesService, CategoryService],
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='Bar' xName='x' yName='y' name='John' groupName='JohnandAndrew'></e-series>
<e-series [dataSource]='chartData' type='Bar' xName='x' yName='y1' name='Andrew' groupName='JohnandAndrew' columnWidth='0.6'></e-series>
<e-series [dataSource]='chartData' type='Bar' xName='x' yName='y2' name='Thomas' groupName='ThomasandMichael'></e-series>
<e-series [dataSource]='chartData' type='Bar' xName='x' yName='y3' name='Michael' columnWidth='0.6' groupName='ThomasandMichael'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public title?: string;
primaryXAxis: any;
primaryYAxis: any;
ngOnInit(): void {
this.chartData = groupData;
this.title = 'Sales by year';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Cylindrical bar chart
To render a cylindrical bar chart, set the columnFacet
property to Cylinder
in the chart series.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { BarSeriesService, StackingBarSeriesService, CategoryService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { cylindricalData } from './datasource';
@Component({
imports: [
ChartModule
],
providers: [ BarSeriesService, StackingBarSeriesService, CategoryService],
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='Bar' columnFacet='Cylinder' xName='x' yName='y' name='India'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public title?: string;
public primaryXAxis?: Object;
public primaryYAxis?: Object;
ngOnInit(): void {
this.chartData = cylindricalData;
this.title = 'Unemployment rate in percentage';
this.primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1
};
this.primaryYAxis = {
minimum: 3,
maximum: 12,
interval: 1,
title: 'Percentage'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Series customization
The following properties can be used to customize the 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { BarSeriesService, StackingBarSeriesService, CategoryService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { barData } from './datasource';
@Component({
imports: [
ChartModule
],
providers: [ BarSeriesService, StackingBarSeriesService, CategoryService],
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='Bar' xName='x' yName='y' name='India' fill='yellow' dashArray='5.5' opacity='0.8' [border]='border'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public title?: string;
public border?: Object;
primaryXAxis: any;
primaryYAxis: any;
ngOnInit(): void {
this.border = {
color: 'brown',
width: 1
};
this.chartData = barData;
this.title = 'Unemployment rate (%)';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));