React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Appearance in React Accumulation Chart component

03 Aug 2021 / 3 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.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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';

class App extends React.Component<{}, {}> {
 this.palettes= ["#E94649", "#F6B53F", "#6FAAB0", "#FF33F3","#228B22","#3399FF"];
  render() {
    return <AccumulationChartComponent id='charts'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' type='Pie' palettes= {this.palettes}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  }

};
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
}
this.palettes = ["#E94649", "#F6B53F", "#6FAAB0", "#FF33F3", "#228B22", "#3399FF"];
render();
{
    return <AccumulationChartComponent id='charts'>
      <Inject services={[PieSeries]}/>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' type='Pie' palettes={this.palettes}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
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.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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';

class App extends React.Component<{}, {}> {
   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);
    }
    ;
}
  render() {
    return  <AccumulationChartComponent id='pie-chart2' ref={pie => this.pie = pie} title='Education Institutional Revenue' loaded={this.onChartLoad.bind(this)}>
            <Inject services={[AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationSelection, Selection]}/>
            <AccumulationSeriesCollectionDirective>
              <AccumulationSeriesDirective name='Revenue' dataSource={data1} xName='x' yName='y' innerRadius='40%' startAngle={0} endAngle={360} dataLabel={{
            visible: true, position: 'Inside'
        }}>
              </AccumulationSeriesDirective>
            </AccumulationSeriesCollectionDirective>
          </AccumulationChartComponent>
  }

};
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    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);
    }
    ;
}
render();
{
    return <AccumulationChartComponent id='pie-chart2' ref={pie => this.pie = pie} title='Education Institutional Revenue' loaded={this.onChartLoad.bind(this)}>
            <Inject services={[AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationSelection, Selection]}/>
            <AccumulationSeriesCollectionDirective>
              <AccumulationSeriesDirective name='Revenue' dataSource={data1} xName='x' yName='y' innerRadius='40%' startAngle={0} endAngle={360} dataLabel={{
        visible: true, position: 'Inside'
    }}>
              </AccumulationSeriesDirective>
            </AccumulationSeriesCollectionDirective>
          </AccumulationChartComponent>;
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Previous
Next