Appearance in Angular Accumulation chart component

18 Nov 202218 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 { Component, OnInit } from '@angular/core';
import { data } from 'datasource.ts';
@Component({
    selector: 'app-container',
    template:
    `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' type='Pie' [palettes]='palette'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata: Object[];
    public legendSettings: Object;
    public palette: string[];
    ngOnInit(): void {
        this.piedata = data;
        this.legendSettings = {
            visible: false
        };
        this.palette = ["#E94649", "#F6B53F", "#6FAAB0", "#FF33F3","#228B22","#3399FF"]
    }

}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
  AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, AccumulationChartModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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 { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import {
    AccumulationChart, AccumulationChartComponent,
     IAccLoadedEventArgs, Selection
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    template:
      `<ejs-accumulationchart id="donut-container" #pie [title]="title"  (loaded)='loaded($event)'>
            <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>`
})
export class AppComponent implements OnInit {
    public data ,dataLabel: Object[];
    public count ;
    public startAngle: number ;
    public endAngle: number ;
    public title: string ;
    public pie: AccumulationChartComponent | AccumulationChart;
    public loaded: Function;
    ngOnInit(): void {
        this.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%' }
    ];
      this.dataLabel = {
        visible: true, position: 'Inside',
        name: '${point.y}',
        font: {
            color: 'white',
            fontWeight: 'Bold',
            size: '14px'
        }
    };
      this.loaded = (args: IAccLoadedEventArgs): void {
        if (this.execute) {
            return;
        }
        let pieinterval = setInterval(
            () => {
                if (document.getElementById('donut-container')) {
                    if (this.count === 0) {
                        this.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 }
                        ];
                        this.execute = true;
                        this.pie.animate();
                        this.count++;
                    } else if (this.count === 1) {
                        this.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 }
                        ];
                        this.execute = true;
                        this.pie.animate();
                        this.count++;
                    } else if (this.count === 2) {
                        this.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 }
                        ];
                        this.execute = true;
                        this.pie.animate();
                        this.count++;
                    } else if (this.count === 3) {
                        this.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 }
                        ];
                        this.execute = true;
                        this.pie.animate();
                        this.count++;
                    } else if (this.count === 4) {
                        this.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 }
                        ];
                        this.execute = true;
                        this.pie.animate();
                        this.count = 0;
                    }
                } else {
                    clearInterval(pieinterval);
                }
            },
            3000);
    }
    this.count = 0;
    this.startAngle = 0;
    this.endAngle = 360;
    this.title = 'Education Institutional Revenue';
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule, ExportService } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, AccumulationChartModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PieSeriesService, AccumulationDataLabelService, ExportService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);