React Migration in Pie Chart

This section explains how to migrate the PieChart component from EJ2 React to React. It highlights the API differences where property names or usage patterns changed and shows how to enable those APIs in JSX.

Pie Chart Properties

EJ2 React	React	Description
Props: `enableSmartLabels` `<AccumulationChartComponent enableSmartLabels= {true} />`	Props: `smartLabels` `<PieChart smartLabels = {true} />`	When set to true, labels for the points will be placed smartly to avoid overlapping.
Props: `focusBorderWidth`, `focusBorderColor`, `focusBorderMargin` `<AccumulationChartComponent focusBorderWidth={1.5} focusBorderColor="#4C4C4C" focusBorderMargin={2}> </AccumulationChartComponent>`	Props: `focusOutline` `<PieChart focusOutline={{ width: 1.5, color: '#4C4C4C', offset: 2 }}> </PieChart>`	Specifies the visual outline style applied when the chart container receives focus.
Prop: `accessibility` `<AccumulationChartComponent accessibility={{ accessibilityDescription: 'Pie chart of sales by category', accessibilityRole: 'img', focusable: true, tabIndex: 0 }}> </AccumulationChartComponent>`	Prop: `accessibility` `<PieChart accessibility={{ ariaLabel: 'Pie chart of sales by category', role: 'img', focusable: true, tabIndex: 0 }}> </PieChart>`	Configuration options for enhancing the accessibility of chart elements.

Title and Subtitle

EJ2 React	React	Description
Prop: `title` `<AccumulationChartComponent title="COVID-19 Most Affected Countries" > </AccumulationChartComponent>`	Component: `<PieChartTitle />` `<PieChart> <PieChartTitle text="COVID-19 Most Affected Countries" /> </PieChart>`	Specifies the main title text of the chart. This text provides context or a label for the chart's data.
Prop: `textAlignment` `<AccumulationChartComponent titleStyle={{ textAlignment: 'Center' }}> </AccumulationChartComponent>`	props: `align` `<PieChart> <PieChartTitle align='Center'/> </PieChart>`	Determines the alignment of the title within its container.
Prop: `subTitle`, `subTitleStyle` `<AccumulationChartComponent subTitle="Source" subTitleStyle={{ size: '12px' }}> </AccumulationChartComponent>`	Component: `<PieChartSubtitle />` `<PieChart> <PieChartSubtitle text="Source" font={{ fontSize: '12px' }} /> </PieChart>`	Specifies the sub title text of the chart. This text provides context or a label for the chart's data.

Series

EJ2 React	React	Description
Props: `xName` `<AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective xName="country" /> </AccumulationSeriesCollectionDirective>`	Props: `xField` `<PieChartSeriesCollection> <PieChartSeries xField="country" /> </PieChartSeriesCollection>`	The field name in the data source that contains the x-value.
Props: `yName` `<AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective yName="value" /> </AccumulationSeriesCollectionDirective>`	Props: `yField` `<PieChartSeriesCollection> <PieChartSeries yField="value" /> </PieChartSeriesCollection>`	The field name in the data source that contains the y-value.
Prop: `pointColorMapping` `<AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective pointColorMapping="color" /> </AccumulationSeriesCollectionDirective>`	Prop: `colorField` `<PieChartSeriesCollection> <PieChartSeries colorField="color" /> </PieChartSeriesCollection>`	The field name in the data source that maps color values to individual points.
Prop: `tooltipMappingName` `<AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective tooltipMappingName="tip" /> </AccumulationSeriesCollectionDirective>`	Prop: `tooltipField` `<PieChartSeriesCollection> <PieChartSeries tooltipField="tip" /> </PieChartSeriesCollection>`	The field name in the data source that provides values for tooltips.
Prop: `enableBorderOnMouseMove` `(under pie chart component)` `<AccumulationChartComponent enableBorderOnMouseMove ={true}> </AccumulationChartComponent>`	Prop: `showBorderOnHover` `(under pie series component)` `<PieChartSeriesCollection> <PieChartSeries showBorderOnHover={true} /> </PieChartSeriesCollection>`	Shows the border for pie chart segments when the mouse hovers over a data point.

Data Label

EJ2 React	React	Description
Prop: `visible` `<AccumulationSeriesDirective dataLabel={{ visible: true }} />`	Component: `<PieChartDataLabel />` `<PieChartSeries> <PieChartDataLabel visible={} /> </PieChartSeries>`	When set to true, data labels for the series are rendered.
Props: `angle` `<AccumulationSeriesDirective dataLabel={{ angle: 45 }} />`	Props: `rotationAngle` `<PieChartSeries> <PieChartDataLabel rotationAngle={45} /> </PieChartSeries>`	Specifies the rotation angle of the data label in degrees.
Prop: `textRender` `<AccumulationChartComponent textRender={(args: IAccTextRenderEventArgs) => {}} />`	Prop: `formatter` <PieChartSeries> <PieChartDataLabel formatter={({ index, text }) => `${text}`} /> </PieChartSeries>	Optional function to customize the content of the data label. If provided, this callback will be invoked for each data label during rendering. It receives the following arguments: `index`: The index of the data point in the series. `text`: The current formatted text of the data label.
Prop: `maxWidth` `<AccumulationSeriesDirective dataLabel={{ maxWidth: 120 }} />`	Prop: `maxLabelWidth` `<PieChartSeries> <PieChartDataLabel maxLabelWidth={120} /> </PieChartSeries>`	Limits the maximum width of individual legend item labels in pixels. Prevents long text from extending beyond the desired width.

Legend

EJ2 React	React	Description
Prop: `alignment` `<AccumulationChartComponent legendSettings={{ alignment: 'Left' }} />`	Prop: `align` `<PieChart> <PieChartLegend align="Left" /> </PieChart>`	Specifies the alignment of the legend within its container. For horizontal positions (`Top`, `Bottom`, `Auto`): `Left`, `Center`, `Right`. For vertical positions (`Left`, `Right`): `Top`, `Center`, `Bottom`.
Prop: `titlePosition` `<AccumulationChartComponent legendSettings={{ titlePosition: 'Center' }} />`	Prop: `titleAlign` `<PieChart> <PieChartLegend titleAlign="Center" /> </PieChart>`	Determines the alignment of the legend title. Options: `Left`, `Center`, `Right`. Default: `Center`.
Prop: `maximumTitleWidth` `<AccumulationChartComponent legendSettings={{ maximumTitleWidth: 120 }} />`	Prop: `maxTitleWidth` `<PieChart> <PieChartLegend maxTitleWidth={120} /> </PieChart>`	Limits the legend title width in pixels; excess text wraps based on wrapping behavior. Default: `100`.
Prop: `maximumLabelWidth` `<AccumulationChartComponent legendSettings={{ maximumLabelWidth: 100 }} />`	Prop: `maxLabelWidth` `<PieChart> <PieChartLegend maxLabelWidth={100} /> </PieChart>`	Limits the maximum width of individual legend item labels (pixels). Prevents long text from overflowing. Default: `null`.
Prop: `isInversed` `<AccumulationChartComponent legendSettings={{ isInversed: true }} />`	Prop: `inversed` `<PieChart> <PieChartLegend inversed={true} /> </PieChart>`	Reverses the order within legend items (text before symbol). Default: `false`.
Prop: `legendImageUrl` `(under pie series component)` `<AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective legendImageUrl="https://example.com/icon.png" /> </AccumulationSeriesCollectionDirective>`	Prop: `imageUrl` `(under pie legend component)` `<PieChart> <PieChartLegend imageUrl="https://example.com/icon.png" /> </PieChart>`	Specifies the image URL for the legend icon. Requires the legend icon `shape` to be set to `Image`.
Prop: `legendShape` `(under pie series component)` `<AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective legendShape="Circle" /> </AccumulationSeriesCollectionDirective>`	Prop: `shape` `(under pie legend component)` `<PieChart> <PieChartLegend shape="Circle" /> </PieChart>`	Specifies the shape of the legend icon for each data point.

EJ2 React	React	Description
Prop: `enable` `<AccumulationChartComponent tooltip={{ enable: true }} />`	Prop: `enable` `<PieChart> <PieChartTooltip enable={true} /> </PieChart>`	Shows or hides the tooltip. EJ2 uses `enable`; the React API uses `enable`.
Prop: `enableMarker` `<AccumulationChartComponent tooltip={{ enableMarker: true }} />`	Prop: `showMarker` `<PieChart> <PieChartTooltip showMarker={true} /> </PieChart>`	Displays colored markers inside the tooltip to indicate the corresponding series for each data point.
Prop: `tooltipRender` `<AccumulationChartComponent tooltipRender={(args: ITooltipRenderEventArgs) => { }} />`	Prop: `formatter` `<PieChart> <PieChartTooltip formatter={(text: string \| string[]): string \| boolean \| string[] => { return text; }} /> </PieChart>`	A callback function that allows for custom rendering of chart tooltips. This function is invoked for each tooltip and receives its properties as an argument. Available arguments: `text`: The content of the tooltip, which can be a string or an array of strings.

Center Label

EJ2 React	React	Description
Prop: `centerLabel` `<AccumulationChartComponent centerLabel={{, text: 'Total', font: { size: '12px' }, hoverTextFormat: "" }} />`	Component: `<PieChartCenterLabel />` `<PieChart> <PieChartCenterLabel label={[ { text: 'Total', textStyle: { fontSize: '12px' } } ]} hoverTextFormat="" /> </PieChart>`	Represents the configuration options for the center label displayed in Pie charts. Specifies the collection of label configurations to be displayed at the center of the pie chart.

Events

EJ2 React	React	Description
Event: `legendClick` `<AccumulationChartComponent legendClick={handleLegendClick} />`	Event: `onLegendClick` `<PieChart onLegendClick={handleLegendClick} />`	Triggered after a legend item is clicked. Provides details about the clicked legend item, including its associated series and data points.
Event: `resized` `<AccumulationChartComponent resized={onResize} />`	Event: `onResize` `<PieChart onResize={onResize} />`	Triggered after the chart is resized. Provides details about the chart's size before and after the resize.
Event: `pointClick` `<AccumulationChartComponent pointClick={handlePointClick} />`	Event: `onPointClick` `<PieChart onPointClick={handlePointClick} />`	Triggered when a data point in the chart is clicked. Provides details about the clicked point, including its position, series index, and mouse coordinates.
Event: `chartMouseClick` `<AccumulationChartComponent chartMouseClick={onChartClick} />`	Event: `onClick` `<PieChart onClick={onChartClick} />`	Triggered when the chart is clicked. Provides information about the mouse event, including the target element and pointer coordinates.
Event: `chartMouseMove` `<AccumulationChartComponent chartMouseMove={onChartMouseMove} />`	Event: `onMouseMove` `<PieChart onMouseMove={onChartMouseMove} />`	Triggered when the mouse moves over the chart. Provides information about the mouse event, including the target element and pointer coordinates relative to the chart.
Event: `chartMouseLeave` `<AccumulationChartComponent chartMouseLeave={onChartMouseLeave} />`	Event: `onMouseLeave` `<PieChart onMouseLeave={onChartMouseLeave} />`	Triggered when the mouse leaves the chart. Provides information about the mouse event, including the target element and pointer coordinates relative to the chart.