100% Stacked column chart in Vue 3D Chart component

18 Nov 201824 minutes to read

100% Stacked column chart

To render a 100% stacked column series, use series type as StackingColumn100 and inject StackingColumnSeries3D into the provide.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingColumn100' xName='x' yName='y' name='America'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingColumn100' xName='x' yName='y' name='Canada'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingColumn100' xName='x' yName='y' name='France'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingColumn100' xName='x' yName='y' name='Germany'>
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { Chart3DComponent as EjsChart3d, Chart3DSeriesDirective as EChart3dSeries, Chart3DSeriesCollectionDirective as EChart3dSeriesCollection, StackingColumnSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

const seriesData1 = [{ x: '2014', y: 9 },
{ x: '2016', y: 46 },
{ x: '2018', y: 9 },
{ x: '2020', y: 39 },
{ x: '2022', y: 8 }];
const seriesData2 = [{ x: '2014', y: 10 },
{ x: '2016', y: 4 },
{ x: '2018', y: 11 },
{ x: '2020', y: 7 },
{ x: '2022', y: 4 }];
const seriesData3 = [{ x: '2014', y: 4 },
{ x: '2016', y: 10 },
{ x: '2018', y: 5 },
{ x: '2020', y: 10 },
{ x: '2022', y: 5 }];
const seriesData4 = [{ x: '2014', y: 8 },
{ x: '2016', y: 17 },
{ x: '2018', y: 14 },
{ x: '2020', y: 10 },
{ x: '2022', y: 12 }];

const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  interval: 20
};

provide('chart3d', [StackingColumnSeries3D, Category3D]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingColumn100' xName='x' yName='y' name='America'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingColumn100' xName='x' yName='y' name='Canada'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingColumn100' xName='x' yName='y' name='France'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingColumn100' xName='x' yName='y' name='Germany'>
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import { Chart3DComponent, Chart3DSeriesDirective, Chart3DSeriesCollectionDirective, StackingColumnSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  data() {
    return {
      seriesData1: [{ x: '2014', y: 9 },
      { x: '2016', y: 46 },
      { x: '2018', y: 9 },
      { x: '2020', y: 39 },
      { x: '2022', y: 8 }],
      seriesData2: [{ x: '2014', y: 10 },
      { x: '2016', y: 4 },
      { x: '2018', y: 11 },
      { x: '2020', y: 7 },
      { x: '2022', y: 4 }],
      seriesData3: [{ x: '2014', y: 4 },
      { x: '2016', y: 10 },
      { x: '2018', y: 5 },
      { x: '2020', y: 10 },
      { x: '2022', y: 5 }],
      seriesData4: [{ x: '2014', y: 8 },
      { x: '2016', y: 17 },
      { x: '2018', y: 14 },
      { x: '2020', y: 10 },
      { x: '2022', y: 12 }],

      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        interval: 20
      }
    };
  },
  provide: {
    chart3d: [StackingColumnSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

100% Cylindrical stacked column chart

To render a 100% cylindrical stacked column chart, set the columnFacet property to Cylinder in the chart series.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingColumn100' columnFacet='Cylinder' xName='x' yName='y'
          name='Iran' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingColumn100' columnFacet='Cylinder' xName='x' yName='y'
          name='Indonesia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingColumn100' columnFacet='Cylinder' xName='x' yName='y'
          name='Italy' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingColumn100' columnFacet='Cylinder' xName='x' yName='y'
          name='France' columnWidth=0.6> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { Chart3DComponent as EjsChart3d, Chart3DSeriesDirective as EChart3dSeries, Chart3DSeriesCollectionDirective as EChart3dSeriesCollection, StackingColumnSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

const seriesData1 = [
  { x: '2018', y: 24.5 },
  { x: '2019', y: 25.6 },
  { x: '2020', y: 29 },
  { x: '2021', y: 28.5 },
  { x: '2022', y: 30.6 }
];
const seriesData2 = [
  { x: '2018', y: 6.2 },
  { x: '2019', y: 15.6 },
  { x: '2020', y: 14.3 },
  { x: '2021', y: 9.3 },
  { x: '2022', y: 7.8 }
];
const seriesData3 = [
  { x: '2018', y: 24.5 },
  { x: '2019', y: 23.2 },
  { x: '2020', y: 20.4 },
  { x: '2021', y: 23.2 },
  { x: '2022', y: 24.5 }
];
const seriesData4 = [
  { x: '2018', y: 15.4 },
  { x: '2019', y: 21.1 },
  { x: '2020', y: 13.9 },
  { x: '2021', y: 11.6 },
  { x: '2022', y: 14.4 }
];

const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  interval: 20
};

provide('chart3d', [StackingColumnSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingColumn100' columnFacet='Cylinder' xName='x' yName='y'
          name='Iran' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingColumn100' columnFacet='Cylinder' xName='x' yName='y'
          name='Indonesia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingColumn100' columnFacet='Cylinder' xName='x' yName='y'
          name='Italy' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingColumn100' columnFacet='Cylinder' xName='x' yName='y'
          name='France' columnWidth=0.6> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import { Chart3DComponent, Chart3DSeriesDirective, Chart3DSeriesCollectionDirective, StackingColumnSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  data() {
    return {
      seriesData1: [
        { x: '2018', y: 24.5 },
        { x: '2019', y: 25.6 },
        { x: '2020', y: 29 },
        { x: '2021', y: 28.5 },
        { x: '2022', y: 30.6 }
      ],
      seriesData2: [
        { x: '2018', y: 6.2 },
        { x: '2019', y: 15.6 },
        { x: '2020', y: 14.3 },
        { x: '2021', y: 9.3 },
        { x: '2022', y: 7.8 }
      ],
      seriesData3: [
        { x: '2018', y: 24.5 },
        { x: '2019', y: 23.2 },
        { x: '2020', y: 20.4 },
        { x: '2021', y: 23.2 },
        { x: '2022', y: 24.5 }
      ],
      seriesData4: [
        { x: '2018', y: 15.4 },
        { x: '2019', y: 21.1 },
        { x: '2020', y: 13.9 },
        { x: '2021', y: 11.6 },
        { x: '2022', y: 14.4 }
      ],

      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        interval: 20
      }
    };
  },
  provide: {
    chart3d: [StackingColumnSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Series customization

The following properties can be used to customize the 100% stacked column series.

• fill – Specifies the color of the series.
• opacity – Specifies the opacity of the fill color.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingColumn100' opacity='0.4' fill='red' xName='x' yName='y'
          name='Iran' stackingGroup='Asia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingColumn100' opacity='0.4' fill='green' xName='x'
          yName='y' name='Indonesia' stackingGroup='Asia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingColumn100' opacity='0.4' fill='yellow' xName='x'
          yName='y' name='Italy' stackingGroup='Europe' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingColumn100' opacity='0.4' fill='blue' xName='x' yName='y'
          name='France' stackingGroup='Europe' columnWidth=0.6> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { Chart3DComponent as EjsChart3d, Chart3DSeriesDirective as EChart3dSeries, Chart3DSeriesCollectionDirective as EChart3dSeriesCollection, StackingColumnSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

const seriesData1 = [
  { x: '2018', y: 24.5 },
  { x: '2019', y: 25.6 },
  { x: '2020', y: 29 },
  { x: '2021', y: 28.5 },
  { x: '2022', y: 30.6 }
];
const seriesData2 = [
  { x: '2018', y: 6.2 },
  { x: '2019', y: 15.6 },
  { x: '2020', y: 14.3 },
  { x: '2021', y: 9.3 },
  { x: '2022', y: 7.8 }
];
const seriesData3 = [
  { x: '2018', y: 24.5 },
  { x: '2019', y: 23.2 },
  { x: '2020', y: 20.4 },
  { x: '2021', y: 23.2 },
  { x: '2022', y: 24.5 }
];
const seriesData4 = [
  { x: '2018', y: 15.4 },
  { x: '2019', y: 21.1 },
  { x: '2020', y: 13.9 },
  { x: '2021', y: 11.6 },
  { x: '2022', y: 14.4 }
];

const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  interval: 20
};

provide('chart3d', [StackingColumnSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingColumn100' opacity='0.4' fill='red' xName='x' yName='y'
          name='Iran' stackingGroup='Asia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingColumn100' opacity='0.4' fill='green' xName='x'
          yName='y' name='Indonesia' stackingGroup='Asia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingColumn100' opacity='0.4' fill='yellow' xName='x'
          yName='y' name='Italy' stackingGroup='Europe' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingColumn100' opacity='0.4' fill='blue' xName='x' yName='y'
          name='France' stackingGroup='Europe' columnWidth=0.6> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import { Chart3DComponent, Chart3DSeriesDirective, Chart3DSeriesCollectionDirective, StackingColumnSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  data() {
    return {
      seriesData1: [
        { x: '2018', y: 24.5 },
        { x: '2019', y: 25.6 },
        { x: '2020', y: 29 },
        { x: '2021', y: 28.5 },
        { x: '2022', y: 30.6 }
      ],
      seriesData2: [
        { x: '2018', y: 6.2 },
        { x: '2019', y: 15.6 },
        { x: '2020', y: 14.3 },
        { x: '2021', y: 9.3 },
        { x: '2022', y: 7.8 }
      ],
      seriesData3: [
        { x: '2018', y: 24.5 },
        { x: '2019', y: 23.2 },
        { x: '2020', y: 20.4 },
        { x: '2021', y: 23.2 },
        { x: '2022', y: 24.5 }
      ],
      seriesData4: [
        { x: '2018', y: 15.4 },
        { x: '2019', y: 21.1 },
        { x: '2020', y: 13.9 },
        { x: '2021', y: 11.6 },
        { x: '2022', y: 14.4 }
      ],

      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        interval: 20
      }
    };
  },
  provide: {
    chart3d: [StackingColumnSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>