# chart-bar

> Bar chart compares smartphone brand sales across years with a vertical series.

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

**Install Package(s)**

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

```vue
<template>
  <div class="control-section">
    <div align='center'>
        <ejs-chart style='display:block' align='center' id='chartcontainer' :title='title' :subTitle='subTitle' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
            :chartArea='chartArea' :width='width' :tooltip='tooltip' :legendSettings='legend'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Bar' xName='year' columnSpacing=0.3 yName='count' name='Apple' :cornerRadius='cornerRadius' legendShape='Rectangle'> </e-series>
                <e-series :dataSource='seriesData2' type='Bar' xName='year' columnSpacing=0.3 yName='count' name='Xiaomi' :cornerRadius='cornerRadius' legendShape='Rectangle'> </e-series>
                <e-series :dataSource='seriesData3' type='Bar' xName='year' columnSpacing=0.3 yName='count' name='Oppo' :cornerRadius='cornerRadius' legendShape='Rectangle'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>

</div>

</template>
<script>
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, BarSeries, Category, Tooltip, Legend, DataLabel, Highlight} from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data: function() {
    return {
      seriesData1: [
          { year: '2021', count: 237 },
          { year: '2022', count: 226.4 },
          { year: '2023', count: 234.6 }
      ],
      seriesData2: [
          { year: '2021', count: 190 },
          { year: '2022', count: 153.1 },
          { year: '2023', count: 145.9 }
      ],
      seriesData3: [
          { year: '2021', count: 143 },
          { year: '2022', count: 103.3 },
          { year: '2023', count: 103.1 }
      ],
      //Initializing Primary X Axis
      primaryXAxis: {
        valueType: 'Category',
        majorGridLines: { width: 0 },
        majorTickLines: { width: 0 }
      },

      //Initializing Primary Y Axis
      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
        }
      },
      cornerRadius: { bottomRight: 4, topRight: 4 },
      width: Browser.isDevice ? '100%' : '75%',
      tooltip: {
        enable: true,
        enableHighlight: true,
        header: '<b>${series.name}</b>',
        format: '${point.x} : <b>${point.y}</b>'
      },
      legend: { enableHighlight: true, shapeWidth: 9, shapeHeight: 9 },
      title: 'Global Smartphone Sales Trends by Brand (2021-2023)',
      subTitle: 'Source: wikipedia.org'
    };
  },
  provide: {
    chart: [BarSeries, Legend, Category, Tooltip, DataLabel, Highlight]
  },
};
</script>

```

### src/components/chart-bar/ChartView.vue

```vue
<template>
  <Chart />
</template>

<script setup>
import Chart from '../../components/Chart.vue'
</script>
```