# chart-bar

> Grouped Bar chart of global smartphone unit sales by brand from 2021-2023 via ChartAllModule.

**Framework:** angular  **Component:** Chart  **Variant:** bar

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/chart-bar.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-bar/bar.component.ts

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
import { ILoadedEventArgs, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { Browser } from '@syncfusion/ej2-base';
import { loadChartTheme } from '../theme-color';
/**
 * Sample for Bar Series
 */
@Component({
    selector: 'control-content',
    templateUrl: 'bar.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [ ChartAllModule]
})
export class BarChartComponent {
    public chartArea: Object = {
        border: {
            width: 0
        },
        margin: {
            bottom: 12
        }
    };
    //Initializing Chart Width
    public width: string = Browser.isDevice ? '100%' : '75%';
    public data: Object[] = [
        { year: '2021', count: 237 },
        { year: '2022', count: 226.4 },
        { year: '2023', count: 234.6 }
    ];
    public data1: Object[] = [
        { year: '2021', count: 190 },
        { year: '2022', count: 153.1 },
        { year: '2023', count: 145.9 }
    ];
    public data2: Object[] = [
        { year: '2021', count: 143 },
        { year: '2022', count: 103.3 },
        { year: '2023', count: 103.1 }
    ];
    //Initializing Marker
    public cornerRadius: Object = { bottomRight: 4, topRight: 4 };
    //Initializing Primary X Axis
    public primaryXAxis: Object = {
        valueType: 'Category',
        majorGridLines: { width: 0 },
        majorTickLines: { width: 0 }
    };
    //Initializing Primary Y Axis
    public primaryYAxis: Object = {
        labelFormat: '{value}M',
        title: 'Units Sold (in Millions)',
        maximum: 300,
        edgeLabelPlacement: 'Shift',
        majorTickLines: { width: 0 },
        lineStyle: { width: 0 }
    };
    public tooltip: Object = {
        enable: true,
        enableHighlight: true,
        header: '<b>${series.name}</b>',
        format: '${point.x} : <b>${point.y}</b>'
    };
    public legend: Object = {
        enableHighlight: true, shapeWidth: 9, shapeHeight: 9
    }
    // custom code start
    public load(args: ILoadedEventArgs): void {
        loadChartTheme(args);
    };
    // custom code end
    public title: string = 'Global Smartphone Sales Trends by Brand (2021-2023)';
    public subTitle: string = 'Source: wikipedia.org';
    constructor() {
        //code
    };

}
```

### src/components/chart-bar/bar.html

```html

<div class="control-section">
    <div align='center'>
        <ejs-chart style='display:block;' [chartArea]='chartArea' [width]='width' align='center' id='chartcontainer' [primaryXAxis]='primaryXAxis'
            [primaryYAxis]='primaryYAxis' [title]='title' [subTitle]='subTitle' [tooltip]='tooltip' (load)='load($event)' [legendSettings]='legend'>
            <e-series-collection>
                <e-series [dataSource]='data' type='Bar' xName='year' yName='count' name='Apple' columnSpacing=0.3 legendShape='Rectangle' [cornerRadius]='cornerRadius'> </e-series>
                <e-series [dataSource]='data1' type='Bar' xName='year' yName='count' name="Xiaomi" columnSpacing=0.3 legendShape='Rectangle' [cornerRadius]='cornerRadius'> </e-series>
                <e-series [dataSource]='data2' type='Bar' xName='year' yName='count' name="Oppo" columnSpacing=0.3 legendShape='Rectangle' [cornerRadius]='cornerRadius'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</div>

```