Appearance in Vue Accumulation chart component
13 Jun 202420 minutes to read
Custom Color Palette
You can customize the default color of series or points by providing a custom color palette of your choice by using the palettes property.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' :palettes='palettes' xName='x' yName='y'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Jan', y: 3, fill: '#498fff', text: 'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
];
const palettes = ["#E94649", "#F6B53F", "#6FAAB0", "#FF33F3", "#228B22", "#3399FF"];
provide('accumulationchart', [PieSeries]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' :palettes='palettes' xName='x' yName='y'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-accumulationchart": AccumulationChartComponent,
"e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
"e-accumulation-series": AccumulationSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, fill: '#498fff', text: 'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
],
palettes: ["#E94649", "#F6B53F", "#6FAAB0", "#FF33F3", "#228B22", "#3399FF"],
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Animation
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-accumulationchart id="container" ref="pie" :title="title" :loaded="loaded">
<e-accumulation-series-collection>
<e-accumulation-series name="Revenue" :dataSource="data" xName="x" yName="y" :startAngle="startAngle"
:endAngle="endAngle" innerRadius="40%" :dataLabel="dataLabel">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
import { ref } from 'vue';
const pie = ref(null);
let count = 0;
let datasource1 = [
{ x: "Net-tution and Fees", y: 10 },
{ x: "Self-supporting Operations", y: 10 },
{ x: "Private Gifts", y: 13 },
{ x: "All Other", y: 14 },
{ x: "Local Revenue", y: 9 },
{ x: "State Revenue", y: 13 },
{ x: "Federal Revenue", y: 8 }
];
let datasource2 = [
{ x: "Net-tution and Fees", y: 120 },
{ x: "Self-supporting Operations", y: 31 },
{ x: "Private Gifts", y: 6 },
{ x: "All Other", y: 12 },
{ x: "Local Revenue", y: 25 },
{ x: "State Revenue", y: 11 },
{ x: "Federal Revenue", y: 12 }
];
let datasource3 = [
{ x: "Net-tution and Fees", y: 6 },
{ x: "Self-supporting Operations", y: 22 },
{ x: "Private Gifts", y: 11 },
{ x: "All Other", y: 15 },
{ x: "Local Revenue", y: 13 },
{ x: "State Revenue", y: 10 },
{ x: "Federal Revenue", y: 8 }
];
let datasource4 = [
{ x: "Net-tution and Fees", y: 15 },
{ x: "Self-supporting Operations", y: 10 },
{ x: "Private Gifts", y: 18 },
{ x: "All Other", y: 20 },
{ x: "Local Revenue", y: 30 },
{ x: "State Revenue", y: 20 },
{ x: "Federal Revenue", y: 25 }
];
let datasource5 = [
{ x: "Net-tution and Fees", y: 21 },
{ x: "Self-supporting Operations", y: 10 },
{ x: "Private Gifts", y: 15 },
{ x: "All Other", y: 15 },
{ x: "Local Revenue", y: 11 },
{ x: "State Revenue", y: 20 },
{ x: "Federal Revenue", y: 60 }
];
const data = [
{ x: "Net-tution and Fees", y: 21, text: "21%" },
{ x: "Self-supporting Operations", y: 21, text: "21%" },
{ x: "Private Gifts", y: 8, text: "8%" },
{ x: "All Other", y: 8, text: "8%" },
{ x: "Local Revenue", y: 4, text: "4%" },
{ x: "State Revenue", y: 21, text: "21%" },
{ x: "Federal Revenue", y: 16, text: "16%" }
];
const dataLabel = {
visible: true,
position: "Inside",
font: {
color: "white",
fontWeight: "Bold",
size: "14px"
}
};
const startAngle = 0;
const endAngle = 360;
const title = "Education Institutional Revenue";
const loaded = function () {
pie.value.ej2Instances.loaded = null;
setInterval(() => {
if (count === 0) {
pie.value.ej2Instances.series[0].dataSource = datasource1;
pie.value.ej2Instances.animate();
count++;
} else if (count === 1) {
pie.value.ej2Instances.series[0].dataSource = datasource2;
pie.value.ej2Instances.animate();
count++;
} else if (count === 2) {
pie.value.ej2Instances.series[0].dataSource = datasource3;
pie.value.ej2Instances.animate();
count++;
} else if (count === 3) {
pie.value.ej2Instances.series[0].dataSource = datasource4;
pie.value.ej2Instances.animate();
count++;
} else if (count === 4) {
pie.value.ej2Instances.series[0].dataSource = datasource5;
pie.value.ej2Instances.animate();
count = 0;
}
}, 3000);
};
provide('accumulationchart', [PieSeries, AccumulationDataLabel]);
</script><template>
<div id="app">
<ejs-accumulationchart id="container" ref="pie" :title="title" :loaded="loaded">
<e-accumulation-series-collection>
<e-accumulation-series name="Revenue" :dataSource="data" xName="x" yName="y" :startAngle="startAngle"
:endAngle="endAngle" innerRadius="40%" :dataLabel="dataLabel">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
let count = 0;
let datasource1 = [
{ x: "Net-tution and Fees", y: 10 },
{ x: "Self-supporting Operations", y: 10 },
{ x: "Private Gifts", y: 13 },
{ x: "All Other", y: 14 },
{ x: "Local Revenue", y: 9 },
{ x: "State Revenue", y: 13 },
{ x: "Federal Revenue", y: 8 }
];
let datasource2 = [
{ x: "Net-tution and Fees", y: 120 },
{ x: "Self-supporting Operations", y: 31 },
{ x: "Private Gifts", y: 6 },
{ x: "All Other", y: 12 },
{ x: "Local Revenue", y: 25 },
{ x: "State Revenue", y: 11 },
{ x: "Federal Revenue", y: 12 }
];
let datasource3 = [
{ x: "Net-tution and Fees", y: 6 },
{ x: "Self-supporting Operations", y: 22 },
{ x: "Private Gifts", y: 11 },
{ x: "All Other", y: 15 },
{ x: "Local Revenue", y: 13 },
{ x: "State Revenue", y: 10 },
{ x: "Federal Revenue", y: 8 }
];
let datasource4 = [
{ x: "Net-tution and Fees", y: 15 },
{ x: "Self-supporting Operations", y: 10 },
{ x: "Private Gifts", y: 18 },
{ x: "All Other", y: 20 },
{ x: "Local Revenue", y: 30 },
{ x: "State Revenue", y: 20 },
{ x: "Federal Revenue", y: 25 }
];
let datasource5 = [
{ x: "Net-tution and Fees", y: 21 },
{ x: "Self-supporting Operations", y: 10 },
{ x: "Private Gifts", y: 15 },
{ x: "All Other", y: 15 },
{ x: "Local Revenue", y: 11 },
{ x: "State Revenue", y: 20 },
{ x: "Federal Revenue", y: 60 }
];
export default {
name: "App",
components: {
"ejs-accumulationchart": AccumulationChartComponent,
"e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
"e-accumulation-series": AccumulationSeriesDirective
},
data() {
return {
data: [
{ x: "Net-tution and Fees", y: 21, text: "21%" },
{ x: "Self-supporting Operations", y: 21, text: "21%" },
{ x: "Private Gifts", y: 8, text: "8%" },
{ x: "All Other", y: 8, text: "8%" },
{ x: "Local Revenue", y: 4, text: "4%" },
{ x: "State Revenue", y: 21, text: "21%" },
{ x: "Federal Revenue", y: 16, text: "16%" }
],
dataLabel: {
visible: true,
position: "Inside",
font: {
color: "white",
fontWeight: "Bold",
size: "14px"
}
},
startAngle: 0,
endAngle: 360,
title: "Education Institutional Revenue"
};
},
methods: {
loaded: function () {
this.$refs.pie.ej2Instances.loaded = null;
setInterval(() => {
if (count === 0) {
this.$refs.pie.ej2Instances.series[0].dataSource = datasource1;
this.$refs.pie.ej2Instances.animate();
count++;
} else if (count === 1) {
this.$refs.pie.ej2Instances.series[0].dataSource = datasource2;
this.$refs.pie.ej2Instances.animate();
count++;
} else if (count === 2) {
this.$refs.pie.ej2Instances.series[0].dataSource = datasource3;
this.$refs.pie.ej2Instances.animate();
count++;
} else if (count === 3) {
this.$refs.pie.ej2Instances.series[0].dataSource = datasource4;
this.$refs.pie.ej2Instances.animate();
count++;
} else if (count === 4) {
this.$refs.pie.ej2Instances.series[0].dataSource = datasource5;
this.$refs.pie.ej2Instances.animate();
count = 0;
}
}, 3000);
}
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>