100% Stacked bar chart in Vue 3D Chart component

18 Nov 201824 minutes to read

100% Stacked bar chart

To render a 100% stacked bar series, use series type as StackingBar100 and inject StackingBarSeries3D into the provide.

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingBar100' xName='x' yName='y' name='America'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingBar100' xName='x' yName='y' name='Canada'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingBar100' xName='x' yName='y' name='France'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingBar100' 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, StackingBarSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

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

const primaryXAxis = {
  valueType: 'Category'
};

provide('chart3d', [StackingBarSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingBar100' xName='x' yName='y' name='America'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingBar100' xName='x' yName='y' name='Canada'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingBar100' xName='x' yName='y' name='France'>
        </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingBar100' xName='x' yName='y' name='Germany'>
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import { Chart3DComponent, Chart3DSeriesDirective, Chart3DSeriesCollectionDirective, StackingBarSeries3D, 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: 'Sochi 2014', y: 9 },
      { x: 'Rio 2016', y: 46 },
      { x: 'Pyeongchang 2018', y: 9 },
      { x: 'Tokyo 2020', y: 39 },
      { x: 'Beijing 2022', y: 8 }],
      seriesData2: [{ x: 'Sochi 2014', y: 10 },
      { x: 'Rio 2016', y: 4 },
      { x: 'Pyeongchang 2018', y: 11 },
      { x: 'Tokyo 2020', y: 7 },
      { x: 'Beijing 2022', y: 4 }],
      seriesData3: [{ x: 'Sochi 2014', y: 4 },
      { x: 'Rio 2016', y: 10 },
      { x: 'Pyeongchang 2018', y: 5 },
      { x: 'Tokyo 2020', y: 10 },
      { x: 'Beijing 2022', y: 5 }],
      seriesData4: [{ x: 'Sochi 2014', y: 8 },
      { x: 'Rio 2016', y: 17 },
      { x: 'Pyeongchang 2018', y: 14 },
      { x: 'Tokyo 2020', y: 10 },
      { x: 'Beijing 2022', y: 12 }],

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

100% Cylindrical stacked bar chart

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

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingBar100' columnFacet='Cylinder' xName='x' yName='y'
          name='Iran' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingBar100' columnFacet='Cylinder' xName='x' yName='y'
          name='Indonesia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingBar100' columnFacet='Cylinder' xName='x' yName='y'
          name='Italy' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingBar100' 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, StackingBarSeries3D, 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'
};

provide('chart3d', [StackingBarSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingBar100' columnFacet='Cylinder' xName='x' yName='y'
          name='Iran' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingBar100' columnFacet='Cylinder' xName='x' yName='y'
          name='Indonesia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingBar100' columnFacet='Cylinder' xName='x' yName='y'
          name='Italy' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingBar100' 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, StackingBarSeries3D, 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'
      }
    };
  },
  provide: {
    chart3d: [StackingBarSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Series customization

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

  • fill – Specifies the color of the series.
  • opacity – Specifies the opacity of the fill color.
<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingBar100' opacity='0.4' fill='red' xName='x' yName='y'
          name='Iran' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingBar100' opacity='0.4' fill='green' xName='x' yName='y'
          name='Indonesia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingBar100' opacity='0.4' fill='yellow' xName='x' yName='y'
          name='Italy' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingBar100' opacity='0.4' fill='blue' 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, StackingBarSeries3D, 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'
};

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

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData1' type='StackingBar100' opacity='0.4' fill='red' xName='x' yName='y'
          name='Iran' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData2' type='StackingBar100' opacity='0.4' fill='green' xName='x' yName='y'
          name='Indonesia' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData3' type='StackingBar100' opacity='0.4' fill='yellow' xName='x' yName='y'
          name='Italy' columnWidth=0.6> </e-chart3d-series>
        <e-chart3d-series :dataSource='seriesData4' type='StackingBar100' opacity='0.4' fill='blue' 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, StackingBarSeries3D, 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'
      }
    };
  },
  provide: {
    chart3d: [StackingBarSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>