How can I help you?
Gradient in React Accumulation chart control
17 Mar 202624 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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-react-charts';
function App() {
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 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 }
]
};
return (
<AccumulationChartComponent id="charts" title="Orders by Category" legendSettings={{ visible: true, position: 'Right' }} tooltip={{ enable: true }} enableSmartLabels={true}>
<Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={CategoryData} xName="Category" yName="Share" name="Share by Category" type="Pie" dataLabel={{ visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } }} border={{ color: '#FFFFFF', width: 2 }} linearGradient={linearGradient} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries
} from '@syncfusion/ej2-react-charts';
function App() {
const CategoryData: object[] = [
{ 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 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 }
]}
return (
<AccumulationChartComponent id="charts" title="Orders by Category" legendSettings={{ visible: true, position: 'Right' }} tooltip={{ enable: true }} enableSmartLabels={true}>
<Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={CategoryData} xName="Category" yName="Share" name="Share by Category" type="Pie" dataLabel={{ visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } }} border={{ color: '#FFFFFF', width: 2 }} linearGradient={linearGradient} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-react-charts';
function App() {
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: 7.0%' },
{ Category: 'Groceries', Share: 6.0, DataLabel: 'Groceries: 6.0%' },
{ Category: 'Other', Share: 3.5, DataLabel: 'Other: 3.5%' }
];
const baseColors = ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"];
const onPointRender = (args) => {
const idx = args.point.index;
const base = 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 }
]
};
};
return (
<AccumulationChartComponent id="charts" title="Orders by Category" legendSettings={{ visible: true, position: 'Right' }} tooltip={{ enable: true }} enableSmartLabels={true} pointRender={onPointRender}>
<Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={CategoryData} xName="Category" yName="Share" name="Share by Category" type="Pie" dataLabel={{ visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } }} border={{ color: '#FFFFFF', width: 2 }} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries, IAccTextRenderEventArgs, IAccPointRenderEventArgs
} from '@syncfusion/ej2-react-charts';
function App() {
const CategoryData: object[] = [
{ 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: 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"];
const onPointRender = (args: IAccPointRenderEventArgs) => {
const idx = args.point.index as number;
const base = 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 }
]
};
};
return (
<AccumulationChartComponent id="charts" title="Orders by Category" legendSettings={{ visible: true, position: 'Right' }} tooltip={{ enable: true }} enableSmartLabels={true} pointRender={onPointRender}>
<Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={CategoryData} xName="Category" yName="Share" name="Share by Category" type="Pie" dataLabel={{ visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } }} border={{ color: '#FFFFFF', width: 2 }} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));Radial gradient
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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-react-charts';
function App() {
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 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 }
]
};
return (
<AccumulationChartComponent id="charts" title="Orders by Category" legendSettings={{ visible: true, position: 'Right' }} tooltip={{ enable: true }} enableSmartLabels={true}>
<Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={CategoryData} xName="Category" yName="Share" name="Share by Category" type="Pie" innerRadius="50%" dataLabel={{ visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } }} border={{ color: '#FFFFFF', width: 2 }} radialGradient={radialGradient} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries
} from '@syncfusion/ej2-react-charts';
function App() {
const CategoryData: object[] = [
{ 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: 7.0%' },
{ Category: 'Groceries', Share: 6.0, DataLabel: 'Groceries: 6.0%' },
{ Category: 'Other', Share: 3.5, DataLabel: 'Other: 3.5%' }
];
const 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 }
]
};
return (
<AccumulationChartComponent id="charts" title="Orders by Category" legendSettings={{ visible: true, position: 'Right' }} tooltip={{ enable: true }} enableSmartLabels={true}>
<Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={CategoryData} xName="Category" yName="Share" name="Share by Category" type="Pie" innerRadius="50%" dataLabel={{ visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } }} border={{ color: '#FFFFFF', width: 2 }} radialGradient={radialGradient} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-react-charts';
function App() {
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: 7.0%' },
{ Category: 'Groceries', Share: 6.0, DataLabel: 'Groceries: 6.0%' },
{ Category: 'Other', Share: 3.5, DataLabel: 'Other: 3.5%' }
];
const baseColors = ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"];
const onPointRender = (args) => {
const idx = args.point.index;
const base = 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 }
]
}
};
return (
<AccumulationChartComponent id="charts" title="Orders by Category" legendSettings={{ visible: true, position: 'Right' }} tooltip={{ enable: true }} enableSmartLabels={true} pointRender={onPointRender} >
<Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={CategoryData} xName="Category" yName="Share" name="Share by Category" type="Pie" dataLabel={{ visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } }} border={{ color: '#FFFFFF', width: 2 }} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries, IAccPointRenderEventArgs
} from '@syncfusion/ej2-react-charts';
function App() {
const CategoryData: object[] = [
{ 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: 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"];
const onPointRender = (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 }
]
}
};
return (
<AccumulationChartComponent id="charts" title="Orders by Category" legendSettings={{ visible: true, position: 'Right' }} tooltip={{ enable: true }} enableSmartLabels={true} pointRender={onPointRender} >
<Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={CategoryData} xName="Category" yName="Share" name="Share by Category" type="Pie" dataLabel={{ visible: true, name: 'DataLabel', position: 'Outside', connectorStyle: { length: '10px' }, font: { size: '12px' } }} border={{ color: '#FFFFFF', width: 2 }} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));