Gradient in Angular Accumulation chart component

18 Nov 201820 minutes to read

Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:

  • Linear gradient
  • Radial gradient

Linear gradient

A linear gradient blends colors along a straight path from a defined start point to an end point. In accumulation charts, a linear gradient can be applied either to the whole series or to each point via the pointRender event. An linearGradient is configured with one or more color stops.

The linear gradient properties are:

  • x1 - Horizontal start position of the gradient (0 to 1).
  • y1 - Vertical start position of the gradient (0 to 1).
  • x2 - Horizontal end position of the gradient (0 to 1).
  • y2 - Vertical end position of the gradient (0 to 1).

Properties for gradientColorStop:

  • offset - Position along the gradient (0 to 100).
  • color - Base color at the stop.
  • opacity - Transparency (0 to 1).
  • lighten - Adjusts lightness (positive lightens, negative darkens).
  • brighten - Adjusts brightness (positive increases, negative decreases).

Apply gradient to the entire series

A linear gradient may be applied directly at the series level. The same gradient is applied uniformly to all data points, legend symbols and tooltip markers.

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



import { Component, OnInit } from '@angular/core';
import { CategoryData } from './datasource';

@Component({
    imports: [AccumulationChartModule],
    providers: [PieSeriesService, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [title]="title" [legendSettings]="legendSettings" [tooltip]="tooltip" [enableSmartLabels]="enableSmartLabels">
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]="categoryData" type="Pie" xName="Category" yName="Share" name="Share by Category" [dataLabel]="dataLabel" [border]="border" [linearGradient]="linearGradient"></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public categoryData?: Object[];
    public dataLabel?: Object;
    public border?: Object;
    public linearGradient?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public title?: string;
    public enableSmartLabels?: boolean;
    ngOnInit(): void {
        this.categoryData = CategoryData;
        this.dataLabel = { visible: true, name: 'DataLabelMappingName', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } };
        this.border = { color: '#FFFFFF', width: 2 };
        this.linearGradient = {
            x1: 0.1, y1: 0,
            x2: 0.9, y2: 1,
            gradientColorStop: [
                { color: '#4F46E5', offset: 0, opacity: 1, brighten: 0.55 },
                { color: '#4F46E5', offset: 60, opacity: 0.98, brighten: 0.15 },
                { color: '#4F46E5', offset: 100, opacity: 0.95, brighten: -0.25 }
            ]
        };
        this.legendSettings = { visible: true, position: 'Right' };
        this.tooltip = { enable: true };
        this.title = 'Orders by Category';
        this.enableSmartLabels = true;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Apply a gradient per point using the point render event

A diagonal linear gradient can be applied per data point using the pointRender event for a clear light-to-shadow transition.

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



import { Component, OnInit } from '@angular/core';
import { CategoryData } from './datasource';

@Component({
    imports: [AccumulationChartModule],
    providers: [PieSeriesService, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [title]="title" [legendSettings]="legendSettings" [tooltip]="tooltip" [enableSmartLabels]="enableSmartLabels" (pointRender)="pointRender($event)">
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]="categoryData" type="Pie" xName="Category" yName="Share" name="Share by Category" [dataLabel]="dataLabel" [border]="border"></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public categoryData?: Object[];
    public dataLabel?: Object;
    public border?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public title?: string;
    public enableSmartLabels?: boolean;
    private baseColors: string[] = ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"];

    ngOnInit(): void {
        this.categoryData = CategoryData;
        this.dataLabel = { visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } };
        this.border = { color: '#FFFFFF', width: 2 };
        this.legendSettings = { visible: true, position: 'Right' };
        this.tooltip = { enable: true };
        this.title = 'Orders by Category';
        this.enableSmartLabels = true;
    }
    public pointRender(args: any) {
        const idx: number = args.point.index;
        const base: string = this.baseColors[idx % this.baseColors.length];
        args.linearGradient = {
            x1: 0.05, y1: 0.0, x2: 0.95, y2: 1.0,
            gradientColorStop: [
                { offset: 0, color: base, opacity: 1, brighten: 0.85, lighten: 0 },
                { offset: 20, color: base, opacity: 0.98, brighten: 0.45, lighten: 0 },
                { offset: 50, color: base, opacity: 0.96, brighten: 0, lighten: 0 },
                { offset: 80, color: base, opacity: 0.94, brighten: -0.30, lighten: 0 },
                { offset: 100, color: base, opacity: 0.92, brighten: -0.55, lighten: 0 }
            ]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Radial gradient

In the linearGradient:

  • x1 - Sets the horizontal start position of the gradient (0 to 1).
  • y1 - Sets the vertical start position of the gradient (0 to 1).
  • x2 - Sets the horizontal end position of the gradient (0 to 1).
  • y2 - Sets the vertical end position of the gradient (0 to 1).

In the gradientColorStop:

  • offset - Specifies the position of the color stop along the gradient (0 to 100).
  • color - Sets the color at the stop.
  • opacity - Defines the transparency of the stop (0 to 1).
  • lighten - Adjusts lightness at the stop. Positive values lighten the color. Range: 0 to 1.
  • brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1.

Apply a radial gradient to the entire series

A radial gradient can be applied directly at the series level. The same gradient is applied uniformly to all data points, legend symbols and tooltip markers.

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



import { Component, OnInit } from '@angular/core';
import { CategoryData } from './datasource';

@Component({
    imports: [AccumulationChartModule],
    providers: [PieSeriesService, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [title]="title" [legendSettings]="legendSettings" [tooltip]="tooltip" [enableSmartLabels]="enableSmartLabels">
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]="categoryData" type="Pie" innerRadius="50%" xName="Category" yName="Share" name="Share by Category" [dataLabel]="dataLabel" [border]="border" [radialGradient]="radialGradient"></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public categoryData?: Object[];
    public dataLabel?: Object;
    public border?: Object;
    public radialGradient?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public title?: string;
    public enableSmartLabels?: boolean;
    ngOnInit(): void {
        this.categoryData = CategoryData;
        this.dataLabel = { visible: true, name: 'DataLabelMappingName', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } };
        this.border = { color: '#FFFFFF', width: 2 };
        this.radialGradient = {
            cx: 0.22, cy: 0.22,
            fx: 0.12, fy: 0.12, r: 0.96,
            gradientColorStop: [
                { color: '#10B981', offset: 0, opacity: 1, brighten: 0.8 },
                { color: '#10B981', offset: 30, opacity: 1, brighten: 0.3 },
                { color: '#10B981', offset: 60, opacity: 1, brighten: 0 },
                { color: '#10B981', offset: 85, opacity: 1, brighten: -0.3 },
                { color: '#10B981', offset: 100, opacity: 1, brighten: -0.6 }
            ]
        };
        this.legendSettings = { visible: true, position: 'Right' };
        this.tooltip = { enable: true };
        this.title = 'Orders by Category';
        this.enableSmartLabels = true;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Apply a radial gradient per point using the point render event

The following example uses a distinct color palette and an off-center radial gradient to create a clear light-to-shadow effect on each data point. The gradient is configured in pointRender, so each data point receives its own radial gradient derived from its base color.

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



import { Component, OnInit } from '@angular/core';
import { CategoryData } from './datasource';

@Component({
    imports: [AccumulationChartModule],
    providers: [PieSeriesService, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [title]="title" [legendSettings]="legendSettings" [tooltip]="tooltip" [enableSmartLabels]="enableSmartLabels" (pointRender)="pointRender($event)">
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]="categoryData" type="Pie" xName="Category" yName="Share" name="Share by Category" [dataLabel]="dataLabel" [border]="border"></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public categoryData?: Object[];
    public dataLabel?: Object;
    public border?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public title?: string;
    public enableSmartLabels?: boolean;
    private baseColors: string[] = ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"];
    ngOnInit(): void {
        this.categoryData = CategoryData;
        this.dataLabel = { visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } };
        this.border = { color: '#FFFFFF', width: 2 };
        this.legendSettings = { visible: true, position: 'Right' };
        this.tooltip = { enable: true };
        this.title = 'Orders by Category';
        this.enableSmartLabels = true;
    }
    public pointRender(args: any) {
        const idx: number = args.point.index;
        const base: string = this.baseColors[idx % this.baseColors.length];
        args.radialGradient = {
            cx: 0.35, cy: 0.35, fx: 0.35, fy: 0.35, r: 0.85,
            gradientColorStop: [
                { offset: 0, color: base, opacity: 1, brighten: 0.85, lighten: 0 },
                { offset: 20, color: base, opacity: 0.98, brighten: 0.45, lighten: 0 },
                { offset: 50, color: base, opacity: 0.96, brighten: 0, lighten: 0 },
                { offset: 80, color: base, opacity: 0.94, brighten: -0.30, lighten: 0 },
                { offset: 100, color: base, opacity: 0.92, brighten: -0.55, lighten: 0 }
            ]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));