# chart-bar

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

**Framework:** javascript  **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/javascript/chart-bar.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-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.html

```html
<div class="control-section">
    <div id="container" align="center"></div>
</div>

<style>
    #control-container {
        padding: 0px !important;
    }
</style>
```

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

```typescript
import { Chart, DataLabel, BarSeries, Category, Legend, Tooltip, type ILoadedEventArgs, Highlight } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';
import { loadChartTheme } from '../theme-color';
Chart.Inject(BarSeries, DataLabel, Category, Legend, Tooltip, Highlight);

/**
 * Sample for bar series
 */
(window as any).default = (): void => {
    let chart: Chart = new Chart({

        //Initializing Primary X and Y Axis
        primaryXAxis: {
            valueType: 'Category',
            majorGridLines: { width: 0 },
            majorTickLines: { width: 0 }
        },
        primaryYAxis:
        {
            labelFormat: '{value}M',
            title: 'Units Sold (in Millions)',
            maximum: 300,
            edgeLabelPlacement: 'Shift',
            majorTickLines: { width: 0 },
            lineStyle: { width: 0 }
        },
        chartArea: {
            border: {
                width: 0
            },
            margin: {
                bottom: 12
            }
        },
        //Initializing Chart Series
        series: [
            {
                type: 'Bar',
                dataSource: [
                    { year: '2021', count: 237 },
                    { year: '2022', count: 226.4 },
                    { year: '2023', count: 234.6 }

                ],
                xName: 'year', cornerRadius: { bottomRight: 4, topRight: 4 }, legendShape: 'Rectangle',
                yName: 'count', name: 'Apple', columnSpacing: 0.3,
            },
            {
                type: 'Bar',
                dataSource: [
                    { year: '2021', count: 190 },
                    { year: '2022', count: 153.1 },
                    { year: '2023', count: 145.9 }
                ],
                xName: 'year', cornerRadius: { bottomRight: 4, topRight: 4 }, legendShape: 'Rectangle',
                yName: 'count', name: "Xiaomi", columnSpacing: 0.3,
            },
            {
                type: 'Bar',
                dataSource: [
                    { year: '2021', count: 143 },
                    { year: '2022', count: 103.3 },
                    { year: '2023', count: 103.1 }
                ],
                xName: 'year', cornerRadius: { bottomRight: 4, topRight: 4 }, legendShape: 'Rectangle',
                yName: 'count', name: "Oppo", columnSpacing: 0.3,
            }
        ],
        // Initializing the tooltip
        tooltip: {
            enable: true,
            enableHighlight: true,
            header: '<b>${series.name}</b>',
            format: '${point.x} : <b>${point.y}</b>'
        },
        width: Browser.isDevice ? '100%' : '75%',
        legendSettings: { enableHighlight: true, shapeWidth: 9, shapeHeight: 9 },
        //Initializing Chart title
        title: 'Global Smartphone Sales Trends by Brand (2021-2023)',
        subTitle: 'Source: wikipedia.org',
        load: (args: ILoadedEventArgs) => {
            loadChartTheme(args);
        }
    });
    chart.appendTo('#container');
};
```