Gradient in TypeScript Accumulation chart control
18 Nov 201824 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 {
AccumulationChart, AccumulationDataLabel, PieSeries, AccumulationLegend
} from '@syncfusion/ej2-charts';
AccumulationChart.Inject(AccumulationDataLabel, PieSeries, AccumulationLegend);
const CategoryData = [
{ Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
{ Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
{ Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
{ Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
{ Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
{ Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
{ Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
{ Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
{ Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
];
let chart: AccumulationChart = new AccumulationChart({
series: [{
type: 'Pie',
dataSource: CategoryData,
xName: 'Category',
yName: 'Share',
name: 'Share by Category',
dataLabel: {
visible: true,
name: 'DataLabelMappingName',
position: 'Outside',
connectorStyle: { length: '10px' },
font: { size: '12px' }
},
border: {
color: '#FFFFFF',
width: 2
},
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 },
]
}
}],
legendSettings: { visible: true, position: 'Right' },
tooltip: { enable: true },
title: 'Orders by Category',
enableSmartLabels: true,
});
chart.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>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 {
AccumulationChart, AccumulationDataLabel, PieSeries, AccumulationLegend,
IAccPointRenderEventArgs
} from '@syncfusion/ej2-charts';
AccumulationChart.Inject(AccumulationDataLabel, PieSeries, AccumulationLegend);
const CategoryData = [
{ Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
{ Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
{ Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
{ Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
{ Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
{ Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
{ Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
{ Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
{ Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
];
const baseColors: string[] = ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"];
let chart: AccumulationChart = new AccumulationChart({
series: [{
type: 'Pie',
dataSource: CategoryData,
xName: 'Category',
yName: 'Share',
name: 'Share by Category',
dataLabel: {
visible: true,
name: 'DataLabel',
position: 'Outside',
connectorStyle: { length: '10px' },
font: { size: '12px' }
},
border: {
color: '#FFFFFF',
width: 2
}
}],
pointRender: (args: IAccPointRenderEventArgs) => {
const idx: number = args.point.index;
const base: string = baseColors[idx % 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 }
]
}
},
legendSettings: { visible: true, position: 'Right' },
tooltip: { enable: true },
title: 'Orders by Category',
enableSmartLabels: true,
});
chart.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>Radial gradient
A radial gradient blends colors outward from a central point, creating a circular or elliptical color progression. Configure it by adding radialGradient inside the target element and define one or more color stops to control how colors transition from the center to the outer edge. Set the gradient’s center, optional focal point, and radius using radialGradient properties. The color stop values such as offset, color, opacity, lighten, and brighten are set using the gradientColorStop property.
In the radialGradient:
-
cx- Sets the normalized horizontal center of the gradient (0 to 1). -
cy- Sets the normalized vertical center of the gradient (0 to 1). -
fx- Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1). -
fy- Sets the normalized vertical focal point (0 to 1). -
r- Sets the normalized radius of the gradient circle (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 {
AccumulationChart, AccumulationDataLabel, PieSeries, AccumulationLegend,
IAccPointRenderEventArgs
} from '@syncfusion/ej2-charts';
AccumulationChart.Inject(AccumulationDataLabel, PieSeries, AccumulationLegend);
const CategoryData = [
{ Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
{ Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
{ Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
{ Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
{ Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
{ Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
{ Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
{ Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
{ Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
];
let chart: AccumulationChart = new AccumulationChart({
series: [{
type: 'Pie',
innerRadius: '50%',
dataSource: CategoryData,
xName: 'Category',
yName: 'Share',
name: 'Share by Category',
dataLabel: {
visible: true,
name: 'DataLabelMappingName',
position: 'Outside',
connectorStyle: { length: '10px' },
font: { size: '12px' }
},
border: {
color: '#FFFFFF',
width: 2
},
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 },
]
}
}],
legendSettings: { visible: true, position: 'Right' },
tooltip: { enable: true },
title: 'Orders by Category',
enableSmartLabels: true,
});
chart.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>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 {
AccumulationChart, AccumulationDataLabel, PieSeries, AccumulationLegend,
IAccPointRenderEventArgs
} from '@syncfusion/ej2-charts';
AccumulationChart.Inject(AccumulationDataLabel, PieSeries, AccumulationLegend);
const CategoryData = [
{ Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
{ Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
{ Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
{ Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
{ Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
{ Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
{ Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
{ Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
{ Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
];
const baseColors: string[] = ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"];
let chart: AccumulationChart = new AccumulationChart({
series: [{
type: 'Pie',
innerRadius: '50%',
dataSource: CategoryData,
xName: 'Category',
yName: 'Share',
name: 'Share by Category',
dataLabel: {
visible: true,
name: 'DataLabel',
position: 'Outside',
connectorStyle: { length: '10px' },
font: { size: '12px' }
},
border: {
color: '#FFFFFF',
width: 2
}
}],
pointRender: (args: IAccPointRenderEventArgs) => {
const idx: number = args.point.index;
const base: string = baseColors[idx % 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 }
]
}
},
legendSettings: { visible: true, position: 'Right' },
tooltip: { enable: true },
title: 'Orders by Category',
enableSmartLabels: true,
});
chart.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>