How can I help you?
Chart appearance in Vue Chart component
3 Feb 202624 minutes to read
Custom color palette
Customize the default color of series or points by providing a custom color palette using the palettes property.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:palettes='palettes'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='bronze' name='Bronze'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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',
title: 'Countries'
};
const primaryYAxis =
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals',
labelFormat: '${value}K'
};
const palettes = ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"];
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:palettes='palettes'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='bronze' name='Bronze'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
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',
title: 'Countries'
},
primaryYAxis:
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals',
labelFormat: '${value}K'
},
palettes: ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"],
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Data point customization
The color of individual data point or data points within a range can be customized using the options below.
Point color mapping
You can bind the color for the points from dataSource for the series using pointColorMapping property.
<template>
<div id="app">
<ejs-chart id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea'>
<e-series-collection>
<e-series :pointColorMapping='pointColorMapping' :dataSource='seriesData' type='Column' xName='x' yName='y'
:cornerRadius='cornerRadius'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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', majorGridLines: { width: 0 }
};
const pointColorMapping = "color";
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
};
const chartArea = {
border: {
width: 0
}
};
const title = "USA CLIMATE - WEATHER BY MONTH";
const cornerRadius = {
topLeft: 10, topRight: 10
};
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea'>
<e-series-collection>
<e-series :pointColorMapping='pointColorMapping' :dataSource='seriesData' type='Column' xName='x' yName='y'
:cornerRadius='cornerRadius'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
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', majorGridLines: { width: 0 }
},
pointColorMapping: "color",
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
},
chartArea: {
border: {
width: 0
}
},
title: "USA CLIMATE - WEATHER BY MONTH",
cornerRadius: {
topLeft: 10, topRight: 10
}
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Range color mapping
You can differentiate data points based on their y values using rangeColorSettings in the chart.
<template>
<div id="app">
<ejs-chart id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :selectionMode="selectionMode">
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='USA' :animation='animation'
:cornerRadius='cornerRadius'> </e-series>
</e-series-collection>
<e-rangecolorsettings>
<e-rangecolorsetting label="1°C to 10°C" start="1" end="10" :colors="colors1"></e-rangecolorsetting>
<e-rangecolorsetting label="11°C to 20°C" start="11" end="20" :colors="colors2"></e-rangecolorsetting>
<e-rangecolorsetting label="21°C to 30°C" start="21" end="30" :colors="colors3"></e-rangecolorsetting>
</e-rangecolorsettings>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, RangecolorsettingsDirective as ERangecolorsettings, RangecolorsettingDirective as ERangecolorsetting, ColumnSeries, Category, Legend, Selection } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: "Jan", y: 6.96 },
{ x: "Feb", y: 8.9 },
{ x: "Mar", y: 12 },
{ x: "Apr", y: 17.5 },
{ x: "May", y: 22.1 },
{ x: "June", y: 25 },
{ x: "July", y: 29.4 },
{ x: "Aug", y: 29.6 },
{ x: "Sep", y: 25.8 },
{ x: "Oct", y: 21.1 },
{ x: "Nov", y: 15.5 },
{ x: "Dec", y: 9.9 }
];
const primaryXAxis = {
valueType: 'Category', majorGridLines: { width: 0 }
};
const primaryYAxis = {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
};
const chartArea = {
border: {
width: 0
}
};
const title = "USA CLIMATE - WEATHER BY MONTH";
const legendSettings = {
mode: 'Range',
visible: true,
toggleVisibility: false,
};
const selectionMode = 'Point';
const animation = {
enable: false
};
const cornerRadius = {
topLeft: 10, topRight: 10
};
const colors1 = ["#F9D422"];
const colors2 = ["#F28F3F"];
const colors3 = ["#E94F53"];
provide('chart', [ColumnSeries, Category, Legend, Selection]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :legendSettings='legendSettings' :selectionMode="selectionMode">
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='USA' :animation='animation'
:cornerRadius='cornerRadius'> </e-series>
</e-series-collection>
<e-rangecolorsettings>
<e-rangecolorsetting label="1°C to 10°C" start="1" end="10" :colors="colors1"></e-rangecolorsetting>
<e-rangecolorsetting label="11°C to 20°C" start="11" end="20" :colors="colors2"></e-rangecolorsetting>
<e-rangecolorsetting label="21°C to 30°C" start="21" end="30" :colors="colors3"></e-rangecolorsetting>
</e-rangecolorsettings>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, RangecolorsettingsDirective, RangecolorsettingDirective, ColumnSeries, Category, Legend, Selection } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective,
"e-rangecolorsettings": RangecolorsettingsDirective,
"e-rangecolorsetting": RangecolorsettingDirective,
},
data() {
return {
seriesData: [
{ x: "Jan", y: 6.96 },
{ x: "Feb", y: 8.9 },
{ x: "Mar", y: 12 },
{ x: "Apr", y: 17.5 },
{ x: "May", y: 22.1 },
{ x: "June", y: 25 },
{ x: "July", y: 29.4 },
{ x: "Aug", y: 29.6 },
{ x: "Sep", y: 25.8 },
{ x: "Oct", y: 21.1 },
{ x: "Nov", y: 15.5 },
{ x: "Dec", y: 9.9 }
],
primaryXAxis: {
valueType: 'Category', majorGridLines: { width: 0 }
},
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
},
chartArea: {
border: {
width: 0
}
},
title: "USA CLIMATE - WEATHER BY MONTH",
legendSettings: {
mode: 'Range',
visible: true,
toggleVisibility: false,
},
selectionMode: 'Point',
animation: {
enable: false
},
cornerRadius: {
topLeft: 10, topRight: 10
},
colors1: ["#F9D422"],
colors2: ["#F28F3F"],
colors3: ["#E94F53"]
};
},
provide: {
chart: [ColumnSeries, Category, Legend, Selection]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Point level customization
Marker, data label, and fill color of individual data points can be customized using the
pointRender and
textRender events.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:pointRender='pointRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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',
title: 'Countries'
};
const primaryYAxis =
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category]);
const pointRender = (args) => {
var seriesColor = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
args.fill = seriesColor[args.point.index];
};
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:pointRender='pointRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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',
title: 'Countries'
},
primaryYAxis:
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
},
methods: {
pointRender: function (args) {
var seriesColor = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
args.fill = seriesColor[args.point.index];
},
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Chart area customization
Customize the Chart Background
Using background and border properties on the chart to change its background color and border.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
background='skyblue' :border='border'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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',
title: 'Countries'
};
const primaryYAxis = {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
};
const border = { color: "#FF0000", width: 2 };
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
background='skyblue' :border='border'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
border: { color: "#FF0000", width: 2 },
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Chart margin
Set the chart margin relative to its container using the margin property.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
background='skyblue' :border='border' :margin='margin'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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',
title: 'Countries'
};
const primaryYAxis =
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
};
const border = { color: "#FF0000", width: 2 };
const margin = { left: 40, right: 40, top: 40, bottom: 40 };
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
background='skyblue' :border='border' :margin='margin'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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',
title: 'Countries'
},
primaryYAxis:
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
border: { color: "#FF0000", width: 2 },
margin: { left: 40, right: 40, top: 40, bottom: 40 },
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Chart area customization
To customize the plotting region (chart area), use the chartArea properties: background and border change the chart area’s appearance, and width adjusts its size.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
background='skyblue' :chartArea='chartArea'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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',
title: 'Countries'
};
const primaryYAxis = {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
};
const chartArea = {
//background for Chart area
background: "skyblue",
width: '90%'
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' background='skyblue' :chartArea='chartArea'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
chartArea: {
//background for Chart area
background: "skyblue",
width: '90%'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Chart area margin
You can customize the space between the chart area from its chart container through margin property.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :border='chartBorder' :chartArea='chartArea' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold' :border='border'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, Legend } 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',
title: 'Countries'
};
const primaryYAxis = {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
};
const border = {
width: 2, color: 'grey'
};
const chartArea = {
border: { width: 2, color: 'blue' },
margin: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
};
const title = "Olympic Medals";
const legendSettings = { visible: false };
const chartBorder = { width: 2, color: 'green' };
const border = { width: 2, color: 'grey' };
provide('chart', [ColumnSeries, Category, Legend]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :border='chartBorder' :chartArea='chartArea' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold' :border='border'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Legend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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',
title: 'Countries'
},
primaryYAxis: {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
},
chartBorder: { width: 2, color: 'green' },
chartArea: {
border: { width: 2, color: 'blue' },
margin: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
},
title: "Olympic Medals",
legendSettings: { visible: false },
border: { width: 2, color: 'grey' }
};
},
provide: {
chart: [ColumnSeries, Category, Legend]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Animation
Customize animation for a series using the animation property. Use enable to turn animation on or off; duration controls the animation length and delay sets when the animation starts.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
background='skyblue'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold' :border='border'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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',
title: 'Countries'
};
const primaryYAxis = {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
};
const border = { width: 2, color: 'grey' };
//Animation for chart series
const animation = {
enable: true,
duration: 2000,
delay: 200
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
background='skyblue'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold' :border='border'
:animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
border: { width: 2, color: 'grey' },
//Animation for chart series
animation: {
enable: true,
duration: 2000,
delay: 200
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Fluid animation
Fluid animation used to animate series with updated dataSource continues animation rather than animation whole series. You can customize animation for a particular series using animate method.
<template>
<div id="app">
<ejs-chart id="container" ref="chart" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :tooltip='tooltip' :chartArea='chartArea'
:legendSettings='legendSettings' :loaded='loaded'>
<e-series-collection>
<e-series :dataSource='seriesData' :marker='marker' type='Column' xName='x' yName='y' name='Tiger' width='1' :cornerRadius="cornerRadius"> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries,
ColumnSeries,
Category,
DataLabel,
Tooltip,
Legend } from "@syncfusion/ej2-vue-charts";
import {ref}from 'vue';
const chart=ref(null);
let count = 0;
let datasource1 = [
{ x: 'Egg', y: 206 },
{ x: 'Fish', y: 123 },
{ x: 'Misc', y: 48 },
{ x: 'Tea', y: 240 },
{ x: 'Fruit', y: 170 }
];
let datasource2 = [
{ x: 'Egg', y: 86 },
{ x: 'Fish', y: 173 },
{ x: 'Misc', y: 188 },
{ x: 'Tea', y: 109 },
{ x: 'Fruit', y: 100 }
];
let datasource3 = [
{ x: 'Egg', y: 156 },
{ x: 'Fish', y: 33 },
{ x: 'Misc', y: 260 },
{ x: 'Tea', y: 200 },
{ x: 'Fruit', y: 30 }
];
const seriesData= [
{ x: 'Egg', y: 106 },
{ x: "Fish", y: 103 },
{ x: "Misc", y: 198 },
{ x: "Tea", y: 189 },
{ x: "Fruit", y: 250 }
];
const primaryXAxis= {
valueType: "Category",
interval: 1,
majorGridLines: { width: 0 },
tickPosition: "Inside",
labelPosition: "Inside",
labelStyle: { color: "#ffffff" }
};
const primaryYAxis= {
minimum: 0,
maximum: 300,
interval: 50,
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: { color: "transparent" }
};
const legendSettings={ visible: false },
tooltip= {
enable: false
};
const cornerRadius= {
bottomLeft: 10,
bottomRight: 10,
topLeft: 10,
topRight: 10
};
const marker= {
dataLabel: {
visible: true,
position: "Top",
}
};
const chartArea= { border: { width: 0 } };
const title= "Trade in Food Groups";
provide('chart', [ColumnSeries, Legend, DataLabel, Category, Tooltip]);
const loaded=()=> {
chart.value.ej2Instances.loaded = null;
let columninterval = setInterval(() => {
if (document.getElementById('container')) {
if (count === 0) {
chart.value.ej2Instances.series[0].dataSource = datasource1;
chart.value.ej2Instances.animate();
count++;
} else if (count === 1) {
chart.value.ej2Instances.series[0].dataSource = datasource2;
chart.value.ej2Instances.animate();
count++;
} else if (count === 2) {
chart.value.ej2Instances.series[0].dataSource = datasource3;
chart.value.ej2Instances.animate();
count = 0;
}
} else {
clearInterval(columninterval)
}
}, 2000);
}
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" ref="chart" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :tooltip='tooltip' :chartArea='chartArea'
:legendSettings='legendSettings' :loaded='loaded'>
<e-series-collection>
<e-series :dataSource='seriesData' :marker='marker' type='Column' xName='x' yName='y' name='Tiger' width='1' :cornerRadius="cornerRadius"> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective,
ColumnSeries,
Category,
DataLabel,
Tooltip,
Legend } from "@syncfusion/ej2-vue-charts";
let count = 0;
let datasource1 = [
{ x: 'Egg', y: 206 },
{ x: 'Fish', y: 123 },
{ x: 'Misc', y: 48 },
{ x: 'Tea', y: 240 },
{ x: 'Fruit', y: 170 }
];
let datasource2 = [
{ x: 'Egg', y: 86 },
{ x: 'Fish', y: 173 },
{ x: 'Misc', y: 188 },
{ x: 'Tea', y: 109 },
{ x: 'Fruit', y: 100 }
];
let datasource3 = [
{ x: 'Egg', y: 156 },
{ x: 'Fish', y: 33 },
{ x: 'Misc', y: 260 },
{ x: 'Tea', y: 200 },
{ x: 'Fruit', y: 30 }
];
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Egg', y: 106 },
{ x: "Fish", y: 103 },
{ x: "Misc", y: 198 },
{ x: "Tea", y: 189 },
{ x: "Fruit", y: 250 }
],
primaryXAxis: {
valueType: "Category",
interval: 1,
majorGridLines: { width: 0 },
tickPosition: "Inside",
labelPosition: "Inside",
labelStyle: { color: "#ffffff" }
},
primaryYAxis: {
minimum: 0,
maximum: 300,
interval: 50,
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: { color: "transparent" }
},
legendSettings: { visible: false },
tooltip: {
enable: false
},
cornerRadius: {
bottomLeft: 10,
bottomRight: 10,
topLeft: 10,
topRight: 10
},
marker: {
dataLabel: {
visible: true,
position: "Top",
}
},
chartArea: { border: { width: 0 } },
title: "Trade in Food Groups"
};
},
provide: {
chart: [ColumnSeries, Legend, DataLabel, Category, Tooltip]
},
methods: {
loaded: function(args) {
this.$refs.chart.ej2Instances.loaded = null;
let columninterval = setInterval(() => {
if (document.getElementById('container')) {
if (count === 0) {
this.$refs.chart.ej2Instances.series[0].dataSource = datasource1;
this.$refs.chart.ej2Instances.animate();
count++;
} else if (count === 1) {
this.$refs.chart.ej2Instances.series[0].dataSource = datasource2;
this.$refs.chart.ej2Instances.animate();
count++;
} else if (count === 2) {
this.$refs.chart.ej2Instances.series[0].dataSource = datasource3;
this.$refs.chart.ej2Instances.animate();
count = 0;
}
} else {
clearInterval(columninterval)
}
}, 2000);
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>