# chart-stacked-column

> Stacked column chart compares global cotton production by country across years.

**Framework:** vue  **Component:** Chart  **Variant:** stacked-column

## 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-stacked-column.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-stacked-column/Chart.vue

```vue
<template>
  <div class="control-section">
    <div align='center'>
        <ejs-chart style='display:block' align='center' id='chartcontainer' :title='title' :subTitle='subTitle' :stackLabels='stackLabels' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
            :chartArea='chartArea' :width='width' :tooltip='tooltip' :legendClick='legendClick' :legendSettings='legend' >
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='StackingColumn' xName='x' yName='y' name='India' columnWidth=0.4 :border='border' :marker="marker" legendShape='Rectangle'> </e-series>
                <e-series :dataSource='seriesData2' type='StackingColumn' xName='x' yName='y' name='China' columnWidth=0.4 :border='border' :marker="marker" legendShape='Rectangle'> </e-series>
                <e-series :dataSource='seriesData3' type='StackingColumn' xName='x' yName='y' name='United States' columnWidth=0.4 :border='border' :marker="marker" :cornerRadius='cornerRadius' legendShape='Rectangle'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</div>

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

export default {
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data: function() {
    return {
      seriesData1: Browser.isDevice ?
    [
        { x: '2021', y: 24.3 },
        { x: '2022', y: 26.3 },
        { x: '2023', y: 25.4 },
        { x: '2024', y: 25 }
    ] :
    [
        { x: '2019', y: 28.5 },
        { x: '2020', y: 27.5 },
        { x: '2021', y: 24.3 },
        { x: '2022', y: 26.3 },
        { x: '2023', y: 25.4 },
        { x: '2024', y: 25 }
    ],

    seriesData2: Browser.isDevice ?
    [
        { x: '2021', y: 26.7 },
        { x: '2022', y: 30.8 },
        { x: '2023', y: 27.4 },
        { x: '2024', y: 31 }
    ] :
    [
        { x: '2019', y: 26.9 },
        { x: '2020', y: 29.3 },
        { x: '2021', y: 26.7 },
        { x: '2022', y: 30.8 },
        { x: '2023', y: 27.4 },
        { x: '2024', y: 31 }
    ],

    seriesData3: Browser.isDevice ?
    [
        { x: '2021', y: 17.5 },
        { x: '2022', y: 14.5 },
        { x: '2023', y: 12.1 },
        { x: '2024', y: 14.4 }
    ] :
    [
        { x: '2019', y: 19.9 },
        { x: '2020', y: 14.6 },
        { x: '2021', y: 17.5 },
        { x: '2022', y: 14.5 },
        { x: '2023', y: 12.1 },
        { x: '2024', y: 14.4 }
    ],

      //Initializing Primary X Axis
          primaryXAxis: {
            majorGridLines: { width: 0 },
            minorGridLines: { width: 0 },
            majorTickLines: { width: 0 },
            minorTickLines: { width: 0 },
            interval: 1,
            lineStyle: { width: 0 },
            labelIntersectAction: 'Rotate45',
            valueType: 'Category'
        },

      //Initializing Primary Y Axis
         primaryYAxis:
        {
            title: 'Production (60KG Bags)',
            lineStyle: { width: 0 },
            majorTickLines: { width: 0 },
            majorGridLines: { width: 1 },
            minorGridLines: { width: 1 },
            minorTickLines: { width: 0 },
            labelFormat: '{value}M', interval: 20 
        },
        chartArea: {
            border: {
                width: 0
            },
            margin: { bottom: 12 }
        },

      tooltip: {
            enable: true, enableHighlight: true, header: '<b>${point.x}</b>', format: '${series.name} : <b>${point.y}</b>' 
        },
        marker: { visible: false, dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' }}},
        cornerRadius: {topLeft: 4, topRight: 4},
        legend: { enableHighlight : true, shapeWidth: 9, shapeHeight: 9 },
        border: {color: '#ffffff', width:1},
        width : Browser.isDevice ? '100%' : '75%',
      title: "Global Cotton Production by Country (2019–2024)",
      subTitle: "Source: fas.usda.gov",
      stackLabels: { visible: true, format: '{value}M', font: { size: Browser.isDevice ? '10px' : '12px' } }
    };
  },
  provide: {
    chart: [StackingColumnSeries, Legend, Category, Tooltip, Highlight, DataLabel]
  },
  methods: {
    legendClick: function(args){
      if (args.series.index === 0) {
        if (args.chart.series[2].visible) {
          args.chart.series[2].cornerRadius.topLeft = 4;
          args.chart.series[2].cornerRadius.topRight = 4;
          args.chart.series[0].cornerRadius.topLeft = 0;
          args.chart.series[0].cornerRadius.topRight = 0;
        } else if (args.chart.series[1].visible) {
          args.chart.series[1].cornerRadius.topLeft = 4;
          args.chart.series[1].cornerRadius.topRight = 4;
          args.chart.series[0].cornerRadius.topLeft = 0;
          args.chart.series[0].cornerRadius.topRight = 0;
        } else {
          args.chart.series[0].cornerRadius.topLeft = 4;
          args.chart.series[0].cornerRadius.topRight = 4;
        }
      }
      if (args.series.index === 1) {
        if (args.chart.series[2].visible) {
          args.chart.series[2].cornerRadius.topLeft = 4;
          args.chart.series[2].cornerRadius.topRight = 4;
          args.chart.series[1].cornerRadius.topLeft = 0;
          args.chart.series[1].cornerRadius.topRight = 0;
        } else if (args.series.visible && args.chart.series[0].visible) {
          args.chart.series[0].cornerRadius.topLeft = 4;
          args.chart.series[0].cornerRadius.topRight = 4;
          args.chart.series[1].cornerRadius.topLeft = 0;
          args.chart.series[1].cornerRadius.topRight = 0;
        } else {
          args.chart.series[1].cornerRadius.topLeft = 4;
          args.chart.series[1].cornerRadius.topRight = 4;
          args.chart.series[0].cornerRadius.topLeft = 0;
          args.chart.series[0].cornerRadius.topRight = 0;
        }
      }

      if (args.series.index === 2) {
        if (!args.series.visible) {
          args.chart.series[2].cornerRadius.topLeft = 4;
          args.chart.series[2].cornerRadius.topRight = 4;
          args.chart.series[1].cornerRadius.topLeft = 0;
          args.chart.series[1].cornerRadius.topRight = 0;
          args.chart.series[0].cornerRadius.topLeft = 0;
          args.chart.series[0].cornerRadius.topRight = 0;
        } else if (args.chart.series[1].visible) {
          args.chart.series[1].cornerRadius.topLeft = 4;
          args.chart.series[1].cornerRadius.topRight = 4;
          args.chart.series[2].cornerRadius.topLeft = 0;
          args.chart.series[2].cornerRadius.topRight = 0;
        } else if (args.series.visible && args.chart.series[0].visible) {
          args.chart.series[0].cornerRadius.topLeft = 4;
          args.chart.series[0].cornerRadius.topRight = 4;
          args.chart.series[2].cornerRadius.topLeft = 0;
          args.chart.series[2].cornerRadius.topRight = 0;
        }
      }
    },
    OnChartAxisLabelRender : function(args){
      if(args.value > 999999 || args.value < -999999) {
      args.text = args.text.replace("0000000","0M").replace("000000", "M");
      }
  },
    }
};
</script>

```

### src/components/chart-stacked-column/ChartView.vue

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

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