PieChartSeriesProps

Defines the configuration options for a series in a Pie chart.

Props

The following table outlines the props for the PieChartSeriesProps:

NameTypeDefaultDescription
accessibility
PieChartAccessibilityProps
{ ariaLabel: null, focusable: true, role: null, tabIndex: 0 }

Provides accessibility options for the pie chart series elements.

animation
Animation
{ enable: true, duration: 1000, delay: 0 }

Specifies animation settings for the series, including options to enable or disable animation, and configure its duration and delay for smoother visual transitions.

border
PieChartBorderProps
{ color: '', width: 1, dashArray: '' }

Defines customization options for the border of the series points.

borderRadius
number
0

Specifies the rounded corner radius for the series. When set, the series will render with rounded corners based on the provided radius value.

colorField
string
''

The field name in the data source that maps color values to individual points.

dataSource
Object | DataManager
''

Specifies the data source for the series. It can be an array of JSON objects, or an instance of DataManager.

emptyPointSettings
PieEmptyPointSettings
{ border: {color: 'gray', width: 1 }, mode: 'Drop', fill: 'gray' }

Customization options for the appearance of empty points in the series, where null or undefined values are considered as empty points.

endAngle
number
null

Specifies the ending angle of the series in degree.

explode
boolean
false

When set to true, enables exploding points on click or touch interaction.

explodeAll
boolean
false

When set to true, explodes all points in the series on initial load.

explodeIndex
number
null

Specifies the index of the point to be exploded on initial load.

explodeOffset
string
15%

Specifies the distance of exploded points from the center, in pixels or percentage.

groupMode
GroupModes
Value

Defines the grouping mode for points with smaller values. Available Options are:

  • Value: Groups points based on their y-value.
  • Point: Groups points based on their index.
groupTo
string | null
null

Groups points with y-values less than the specified value into a single slice named 'Others'.

innerRadius
string
0%

Defines the inner radius of the pie series as a percentage, creating a donut chart when greater than 0%.

name
string
''

Specifies the name of the series.

opacity
number
1

Sets the opacity of the series, with a value between 0 and 1 where 0 is fully transparent and 1 is fully opaque.

palettes
string[]
[ ]

Specifies an array of colors used to render the points in the series.

query
Query | string
''

Specifies a query to select data from the data source. This property is applicable only when the data source is an ej.DataManager.

radius
string
null

Defines the radius of the pie series as a percentage of the chart size.

showBorderOnHover
boolean
true

Shows the border for pie chart segments when the mouse hovers over a data point.

startAngle
number
0

Specifies the starting angle of the series in degrees.

tooltipField
string
''

The field name in the data source that provides values for tooltips.

visible
boolean
true

Toggles the visibility of the series. Set true to show and false to hide.

xField
string
''

The field name in the data source that contains the x-value.

yField
string
''

The field name in the data source that contains the y-value.