# chart-bar

> Bar chart comparing smartphone brand sales across years with legend, tooltip, and highlight.

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

**Install Package(s)**

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

```tsx
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DataLabel, BarSeries, Category, Legend, Tooltip, Highlight, type ILoadedEventArgs } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';

export let appleData: Object[] = [
    { year: '2021', count: 237 },
    { year: '2022', count: 226.4 },
    { year: '2023', count: 234.6 }
];

export let xiaomiData: Object[] = [
    { year: '2021', count: 190 },
    { year: '2022', count: 153.1 },
    { year: '2023', count: 145.9 }
];

export let oppoData: Object[] = [
    { year: '2021', count: 143 },
    { year: '2022', count: 103.3 },
    { year: '2023', count: 103.1 }
];

const SAMPLE_CSS = `
    .control-fluid {
        padding: 0px !important;
    }`;

const Bar = () => {

    const onChartLoad = (args: ILoadedEventArgs): void => {
        let chart: Element = document.getElementById('charts');
        chart.setAttribute('title', '');
    };

    return (
        <div className='control-pane'>
            <style>{SAMPLE_CSS}</style>
            <div className='control-section'>
                <div>
                    <ChartComponent id='charts' style={{ textAlign: "center" }} legendSettings={{ enableHighlight: true, shapeWidth: 9, shapeHeight: 9 }} 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 } }} width={Browser.isDevice ? '100%' : '75%'} title='Global Smartphone Sales Trends by Brand (2021-2023)' subTitle='Source: wikipedia.org' loaded={onChartLoad.bind(this)} tooltip={{ enable: true, enableHighlight: true, header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}</b>' }}>
                        <Inject services={[BarSeries, DataLabel, Category, Legend, Tooltip, Highlight]} />
                        <SeriesCollectionDirective>
                            <SeriesDirective dataSource={appleData} xName='year' yName='count' type='Bar' columnSpacing={0.3} name="Apple" cornerRadius={{ bottomRight: 4, topRight: 4 }} legendShape='Rectangle' />
                            <SeriesDirective dataSource={xiaomiData} xName='year' yName='count' type='Bar' columnSpacing={0.3} name='Xiaomi' cornerRadius={{ bottomRight: 4, topRight: 4 }} legendShape='Rectangle' />
                            <SeriesDirective dataSource={oppoData} xName='year' yName='count' type='Bar' columnSpacing={0.3} name='Oppo' cornerRadius={{ bottomRight: 4, topRight: 4 }} legendShape='Rectangle' />
                        </SeriesCollectionDirective>
                    </ChartComponent>
                </div>
            </div>
        </div>
    )    
}
export default Bar;
```