Appearance in Vue 3D Chart component
13 Jun 202424 minutes to read
Custom color palette
The default color of series or points can be customized by providing a custom color palette of your choice by using the palettes property.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :palettes="pallets" :primaryYAxis="primaryYAxis">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="silver" name="Sales">
</e-chart3d-series>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="bronze" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50, silver: 70, bronze: 45 },
{ country: 'China', gold: 40, silver: 60, bronze: 55 },
{ country: 'Japan', gold: 70, silver: 60, bronze: 50 },
{ country: 'Australia', gold: 60, silver: 56, bronze: 40 },
{ country: 'France', gold: 50, silver: 45, bronze: 35 },
{ country: 'Germany', gold: 40, silver: 30, bronze: 22 },
{ country: 'Italy', gold: 40, silver: 35, bronze: 37 },
{ country: 'Sweden', gold: 30, silver: 25, bronze: 27 }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
maximum: 80
};
const pallets = ['#E94649', '#F6B53F', '#6FAAB0', '#C4C24A'];
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :palettes="pallets" :primaryYAxis="primaryYAxis">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="silver" name="Sales">
</e-chart3d-series>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="bronze" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50, silver: 70, bronze: 45 },
{ country: 'China', gold: 40, silver: 60, bronze: 55 },
{ country: 'Japan', gold: 70, silver: 60, bronze: 50 },
{ country: 'Australia', gold: 60, silver: 56, bronze: 40 },
{ country: 'France', gold: 50, silver: 45, bronze: 35 },
{ country: 'Germany', gold: 40, silver: 30, bronze: 22 },
{ country: 'Italy', gold: 40, silver: 35, bronze: 37 },
{ country: 'Sweden', gold: 30, silver: 25, bronze: 27 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
maximum: 80
},
pallets: ['#E94649', '#F6B53F', '#6FAAB0', '#C4C24A']
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Data point customization
The color of an individual data point can be customized using the below options.
Point color mapping
The color for the points can be bound from the dataSource for the series by utilizing the pointColorMapping property.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales"
pointColorMapping="color">
</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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ x: 'Jan', y: 6.96, color: 'red' },
{ x: 'Feb', y: 8.9, color: 'blue' },
{ x: 'Mar', y: 12, color: 'orange' },
{ x: 'Apr', y: 17.5, color: 'aqua' },
{ x: 'May', y: 22.1, color: 'grey' }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
labelFormat: '{value}°C',
interval: 5
};
provide('chart3d', [ColumnSeries3D, 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="Column" xName="x" yName="y" name="Sales"
pointColorMapping="color">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ x: 'Jan', y: 6.96, color: 'red' },
{ x: 'Feb', y: 8.9, color: 'blue' },
{ x: 'Mar', y: 12, color: 'orange' },
{ x: 'Apr', y: 17.5, color: 'aqua' },
{ x: 'May', y: 22.1, color: 'grey' }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
labelFormat: '{value}°C',
interval: 5
}
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Point level customization
The data label and fill color of each data point can be customized using the pointRender and textRender events.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" :pointRender="pointRender">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis = {
valueType: 'Category',
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
const pointRender = (args) => {
let colors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
args.fill = colors[args.point.index];
};
provide('chart3d', [ColumnSeries3D, Category3D],);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" :pointRender="pointRender">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
},
pointRender: function (args) {
let colors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
args.fill = colors[args.point.index];
},
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Chart area customization
Customize the chart background
The background color and border of the 3D chart can be customized using the background and border properties.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" background="skyblue"
:border="border">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
const border = {
color: 'red',
width: 2
};
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" background="skyblue"
:border="border">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
},
border: {
color: 'red',
width: 2
},
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Chart margin
The 3D chart’s margin can be set from its container using the margin property.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" background="skyblue"
:border="border">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis = {
valueType: 'Category',
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
const border = {
color: 'red',
width: 2
};
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" background="skyblue"
:border="border">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
},
border: {
color: 'red',
width: 2
},
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Animation
To customize the animation for a particular series, the animation property can be used. It can be enabled or disabled by using the enable property. The duration property specifies the duration of an animation and the delay property allows us to start the animation at desire time.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData= [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis= {
valueType: 'Category'
};
const primaryYAxis= {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
provide('chart3d', [ColumnSeries3D, 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="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
}
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Chart rotation
The 3D chart can be rotated by using the enableRotation property.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" enableRotation="true">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" enableRotation="true">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
}
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Title
The 3D chart can be given a title by using title property, to show the information about the data plotted.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather Report - 2022">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather Report - 2022">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
}
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Title position
By using the position property in titleStyle, the title can be positioned at left, right, top or bottom of the 3D chart. The title is positioned at the top of the 3D chart, by default.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather report - 2022"
:titleStyle="title">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
const title = {
position: 'Bottom'
};
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather report - 2022"
:titleStyle="title">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
},
title: {
position: 'Bottom'
},
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>The custom option is used to position the title anywhere in the 3D chart using x and y coordinates.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather report - 2022"
:titleStyle="title">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
const title = {
position: 'Custom',
x: 300,
y: 60
};
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather report - 2022"
:titleStyle="title">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
},
title: {
position: 'Custom',
x: 300,
y: 60
},
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Title alignment
The title can be aligned to the near, far, or center of the 3D chart by using the textAlignment property.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather report - 2022"
:titleStyle="title">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
};
const title = {
position: 'Bottom', textAlignment: 'Far'
};
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather report - 2022"
:titleStyle="title">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
},
title: {
position: 'Bottom', textAlignment: 'Far'
},
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Title customization
The titleStyle property of the 3D chart provides options to customize the title by using the following properties.
-
size- Specifies the size of the title. -
color- Specifies the color for the title. -
fontFamily- Specifies the font family for the title. -
fontWeight- Specifies the font weight of the title. -
fontStyle- Specifies the font style for the title. -
opacity- Specifies the opacity for the color of the title. -
textAlignment- Specifies the alignment of the title. -
textOverflow- Specifies the overflow of the title.
<template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather report - 2022"
:titleStyle="title">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" 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,
ColumnSeries3D,
Category3D
} from '@syncfusion/ej2-vue-charts';
const seriesData = [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 },
];
const primaryXAxis = {
valueType: 'Category',
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10,
};
const title = {
fontFamily: 'Cursive',
color: 'red',
fontWeight: '14px',
size: '18px'
};
provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" title="Weather report - 2022"
:titleStyle="title">
<e-chart3d-series-collection>
<e-chart3d-series :dataSource="seriesData" type="Column" xName="country" yName="gold" name="Sales">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
</template>
<script>
import {
Chart3DComponent,
Chart3DSeriesCollectionDirective,
Chart3DSeriesDirective,
ColumnSeries3D,
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: [
{ country: 'USA', gold: 50 },
{ country: 'China', gold: 40 },
{ country: 'Japan', gold: 70 },
{ country: 'Australia', gold: 60 },
{ country: 'France', gold: 50 },
{ country: 'Germany', gold: 40 },
{ country: 'Italy', gold: 40 },
{ country: 'Sweden', gold: 30 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
interval: 10
},
title: {
fontFamily: 'Cursive',
color: 'red',
fontWeight: '14px',
size: '18px'
},
};
},
provide: {
chart3d: [ColumnSeries3D, Category3D]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>