# chart-stacked-column

> Stacked columns compare global cotton production by country across recent years.

**Framework:** react  **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/react/js/chart-stacked-column.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-stacked-column/Chart.jsx

```jsx
import { useRef } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, StackingColumnSeries, Tooltip, Highlight, DataLabel } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
export let data1 = 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 }
    ];
export let data2 = 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 }
    ];
export let data3 = 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 }
    ];
const SAMPLE_CSS = `
    .control-fluid {
        padding: 0px !important;
    }`;
const StackedColumn = () => {
    let chartInstance = useRef(null);
    const onChartLoad = (args) => {
        let chart = document.getElementById('charts');
        chart.setAttribute('title', '');
    };

    const onLegendClick = (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;
            }
        }
    };
    return (<div className='control-pane'>
            <style>{SAMPLE_CSS}</style>
            <div className='control-section'>
                <ChartComponent id='charts' ref={chartInstance} style={{ textAlign: "center" }} legendSettings={{ enableHighlight: true, shapeWidth: 9, shapeHeight: 9 }} primaryXAxis={{ majorGridLines: { width: 0 }, minorGridLines: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, interval: 1, lineStyle: { width: 0 }, labelIntersectAction: 'Rotate45', valueType: 'Category' }} 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 }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 }, margin: { bottom: 12 } }} title='Global Cotton Production by Country (2019–2024)' subTitle='Source: fas.usda.gov' loaded={onChartLoad.bind(this)} tooltip={{ enable: true, enableHighlight: true, header: '<b>${point.x}</b>', format: '${series.name} : <b>${point.y}</b>' }} legendClick={onLegendClick.bind(this)} stackLabels={{ visible: true, format: '{value}M', font: { size: Browser.isDevice ? '10px' : '12px' } }}>
                    <Inject services={[StackingColumnSeries, Category, Legend, Tooltip, Highlight, DataLabel]}/>
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={data1} xName='x' yName='y' name='India' columnWidth={0.4} border={{ width: 1, color: "white" }} type='StackingColumn' marker={{ dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }} legendShape='Rectangle'/>
                        <SeriesDirective dataSource={data2} xName='x' yName='y' name='China' columnWidth={0.4} border={{ width: 1, color: "white" }} type='StackingColumn' marker={{ dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }} legendShape='Rectangle'/>
                        <SeriesDirective dataSource={data3} xName='x' yName='y' name='United States' columnWidth={0.4} border={{ width: 1, color: "white" }} type='StackingColumn' cornerRadius={{ topLeft: 4, topRight: 4 }} marker={{ dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }} legendShape='Rectangle'/>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        </div>);
};
export default StackedColumn;
```