Bar Chart in Vue 3D Chart component

18 Nov 201824 minutes to read

Bar chart

To render a bar series, use series type as Bar and inject BarSeries3D into the provide.

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData' type='Bar' xName='month' yName='sales' name='Sales'>
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { Chart3DComponent as EjsChart3d, Chart3DSeriesCollectionDirective as EChart3dSeriesCollection, Chart3DSeriesDirective as EChart3dSeries, BarSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
  { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
  { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
  { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
  { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
  { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  maximum: 60
};

provide('chart3d', [BarSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData' type='Bar' xName='month' yName='sales' name='Sales'>
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, BarSeries3D, 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 {
      seriesData: [
        { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
        { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
        { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
        { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
        { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
        { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
      ],
      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        maximum: 60
      },
    };
  },
  provide: {
    chart3d: [BarSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Bar space and width

The columnSpacing and columnWidth properties are used to customize the space between bars.

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData' type='Bar' xName='month' columnSpacing="0.5" yName='sales'
          name='Sales'> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { Chart3DComponent as EjsChart3d, Chart3DSeriesCollectionDirective as EChart3dSeriesCollection, Chart3DSeriesDirective as EChart3dSeries, BarSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
  { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
  { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
  { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
  { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
  { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  maximum: 60
};
provide('chart3d', [BarSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData' type='Bar' xName='month' columnSpacing="0.5" yName='sales'
          name='Sales'> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, BarSeries3D, 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 {
      seriesData: [
        { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
        { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
        { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
        { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
        { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
        { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
      ],
      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        maximum: 60
      },
    };
  },
  provide: {
    chart3d: [BarSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Grouped bar

The data points can be grouped in the bar type charts by using the groupName property. Data points with same group name are grouped together.

<template>
  <div id="app">
    <ejs-chart3d id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData1" type="Bar" xName="x" yName="y" groupName="Iran" stackingGroup="Asia"
          columnWidth="0.6">
        </e-chart3d-series>
        <e-chart3d-series :dataSource="seriesData2" type="Bar" xName="x" yName="y" groupName="Iran" stackingGroup="Asia"
          columnWidth="0.6">
        </e-chart3d-series>
        <e-chart3d-series :dataSource="seriesData3" type="Bar" xName="x" yName="y" groupName="France"
          stackingGroup="Europe" columnWidth="0.6">
        </e-chart3d-series>
        <e-chart3d-series :dataSource="seriesData4" type="Bar" xName="x" yName="y" groupName="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,
  BarSeries3D,
  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 = {
  interval: 1,
  valueType: 'Category',
};
const primaryYAxis = {
  maximum: 40,
  interval: 10,
};
const title = 'Sales Analysis';

provide('chart3d', [BarSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart3d id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData1" type="Bar" xName="x" yName="y" groupName="Iran" stackingGroup="Asia"
          columnWidth="0.6">
        </e-chart3d-series>
        <e-chart3d-series :dataSource="seriesData2" type="Bar" xName="x" yName="y" groupName="Iran" stackingGroup="Asia"
          columnWidth="0.6">
        </e-chart3d-series>
        <e-chart3d-series :dataSource="seriesData3" type="Bar" xName="x" yName="y" groupName="France"
          stackingGroup="Europe" columnWidth="0.6">
        </e-chart3d-series>
        <e-chart3d-series :dataSource="seriesData4" type="Bar" xName="x" yName="y" groupName="France"
          stackingGroup="Europe" columnWidth="0.6">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import {
  Chart3DComponent,
  Chart3DSeriesDirective,
  Chart3DSeriesCollectionDirective,
  BarSeries3D,
  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: {
        interval: 1,
        valueType: 'Category',
      },
      primaryYAxis: {
        maximum: 40,
        interval: 10,
      },
      title: 'Sales Analysis',
    };
  },
  provide: {
    chart3d: [BarSeries3D, Category3D],
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Cylindrical bar chart

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

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData' type='Bar' columnFacet="Cylinder" xName='month' yName='sales'
          name='Sales'> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { Chart3DComponent as EjsChart3d, Chart3DSeriesCollectionDirective as EChart3dSeriesCollection, Chart3DSeriesDirective as EChart3dSeries, BarSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
  { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
  { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
  { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
  { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
  { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  maximum: 60
};

provide('chart3d', [BarSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData' type='Bar' columnFacet="Cylinder" xName='month' yName='sales'
          name='Sales'> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, BarSeries3D, 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 {
      seriesData: [
        { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
        { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
        { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
        { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
        { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
        { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
      ],
      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        maximum: 60
      },
    };
  },
  provide: {
    chart3d: [BarSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Series customization

The following properties can be used to customize the 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' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData' type='Bar' xName='month' fill='green' opacity='0.35' yName='sales'
          name='Sales'> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { Chart3DComponent as EjsChart3d, Chart3DSeriesCollectionDirective as EChart3dSeriesCollection, Chart3DSeriesDirective as EChart3dSeries, BarSeries3D, Category3D } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
  { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
  { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
  { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
  { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
  { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryXAxis = {
  valueType: 'Category'
};
const primaryYAxis = {
  maximum: 60
};

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

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource='seriesData' type='Bar' xName='month' fill='green' opacity='0.35' yName='sales'
          name='Sales'> </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, BarSeries3D, 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 {
      seriesData: [
        { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
        { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
        { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
        { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
        { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
        { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
      ],
      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        maximum: 60
      }
    };
  },
  provide: {
    chart3d: [BarSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>