Appearance in React Accumulation chart component
20 Jan 202324 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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, Inject } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
function App() {
const palettes = [
'#E94649',
'#F6B53F',
'#6FAAB0',
'#FF33F3',
'#228B22',
'#3399FF',
];
return <AccumulationChartComponent id='charts'>
<Inject services={[PieSeries]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' type='Pie' palettes={palettes}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, Inject} from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
function App() {
const palettes: any[] = [
'#E94649',
'#F6B53F',
'#6FAAB0',
'#FF33F3',
'#228B22',
'#3399FF',
];
return <AccumulationChartComponent id='charts'>
<Inject services={[PieSeries]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' type='Pie' palettes= {palettes}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationChart, PieSeries, AccumulationLegend, AccumulationDataLabel, AccumulationTooltip, AccumulationSelection } from '@syncfusion/ej2-react-charts';
import { getInstance } from '@syncfusion/ej2-base';
import { accData } from 'datasource.ts';
function App() {
let count = 0;
function onChartLoad(args) {
let pie = getInstance('#pie-chart2', AccumulationChart);
document.getElementById('pie-chart2').setAttribute('title', '');
pie.loaded = null;
let pieinterval = setInterval(() => {
if (document.getElementById('pie-chart2')) {
if (count === 0) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count++;
}
else if (count === 1) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count++;
}
else if (count === 2) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count++;
}
else if (count === 3) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count++;
}
else if (count === 4) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count = 0;
}
}
else {
clearInterval(pieinterval);
}
}, 3000);
}
return (<AccumulationChartComponent id="pie-chart2" title="Education Institutional Revenue" loaded={onChartLoad.bind(this)}>
<Inject services={[
AccumulationLegend,
PieSeries,
AccumulationDataLabel,
AccumulationTooltip,
AccumulationSelection
]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective name="Revenue" dataSource={accData} xName="x" yName="y" innerRadius="40%" startAngle={0} endAngle={360} dataLabel={{
visible: true,
position: 'Inside',
}}></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
AccumulationChartComponent,
AccumulationSeriesCollectionDirective,
AccumulationSeriesDirective,
Inject,
AccumulationChart,
PieSeries,
AccumulationLegend,
AccumulationDataLabel,
AccumulationTooltip,
AccumulationSelection,
ILoadedEventArgs
} from '@syncfusion/ej2-react-charts';
import { getInstance } from '@syncfusion/ej2-base';
import { accData } from 'datasource.ts';
function App() {
let count = 0;
function onChartLoad(args: ILoadedEventArgs): void {
let pie = getInstance('#pie-chart2', AccumulationChart);
document.getElementById('pie-chart2').setAttribute('title', '');
pie.loaded = null;
let pieinterval = setInterval(() => {
if (document.getElementById('pie-chart2')) {
if (count === 0) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count++;
} else if (count === 1) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count++;
} else if (count === 2) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count++;
} else if (count === 3) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count++;
} else if (count === 4) {
pie.series[0].dataSource = [
{ 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 }
];
pie.animate();
count = 0;
}
} else {
clearInterval(pieinterval);
}
}, 3000);
}
return (
<AccumulationChartComponent
id="pie-chart2"
title="Education Institutional Revenue"
loaded={onChartLoad.bind(this)}
>
<Inject
services={[
AccumulationLegend,
PieSeries,
AccumulationDataLabel,
AccumulationTooltip,
AccumulationSelection
]}
/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective
name="Revenue"
dataSource={accData}
xName="x"
yName="y"
innerRadius="40%"
startAngle={0}
endAngle={360}
dataLabel={{
visible: true,
position: 'Inside',
}}
></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));