React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Appearance in React Accumulation Chart component

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
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"));
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
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"));
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