PieSeries API
Extended documentation for the PieSeries interface with detailed information on the module's properties and available APIs.
Demos
Import
import { PieSeries } from '@mui/x-charts-premium'
// or
import { PieSeries } from '@mui/x-charts-pro'
// or
import { PieSeries } from '@mui/x-charts'The label displayed into the arc.
Type:'formattedValue' | 'label' | 'value' | ((item: Omit<DefaultizedPieValueType, 'label'> & { label?: string }) => string)
The radius between circle center and the arc label.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the maximal radius that fit into the drawing area.
Type:number | string
Default:(innerRadius - outerRadius) / 2
Color to use when displaying the series.
If colorGetter is provided, it will be used to get the color for each data point instead.
Otherwise, this color will be used for all data points in the series.
Type:string
A function that returns a color based on the value and/or the data index of a point.
The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
When the color of the entire series is required, e.g., in legends, the color property is used instead.
Type:(data: ColorCallbackValue<TValue>) => string
The radius applied to arc corners (similar to border radius).
Type:number
Default:0
The x coordinate of the pie center.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the width the drawing area.
Type:number | string
Default:'50%'
The y coordinate of the pie center.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the height the drawing area.
Type:number | string
Default:'50%'
Override the arc attributes when it is faded.
Type:{
/**
* Value added to the default `outerRadius`.
* Can be negative. It is ignored if you provide a `faded.outerRadius` value.
*/
additionalRadius?: number
innerRadius?: number
outerRadius?: number
cornerRadius?: number
paddingAngle?: number
arcLabelRadius?: number
color?: string
}
Override the arc attributes when it is highlighted.
Type:{
/**
* Value added to the default `outerRadius`.
* Can be negative. It is ignored if you provide a `highlighted.outerRadius` value.
*/
additionalRadius?: number
innerRadius?: number
outerRadius?: number
cornerRadius?: number
paddingAngle?: number
arcLabelRadius?: number
color?: string
}
The scope to apply when the series is highlighted.
Type:HighlightScope<SeriesType>
The radius between circle center and the beginning of the arc.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the maximal radius that fit into the drawing area.
Type:number | string
Default:0
Defines the mark type for the series.
There is a default mark type for each series type.
Type:ChartsLabelMarkType
The radius between circle center and the end of the arc.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the maximal radius that fit into the drawing area.
Type:number | string
Default:'100%'
The sorting strategy used to order pie slices.
Can be 'none', 'asc', 'desc', or a sorting function.
Type:ChartsPieSorting
Default:'none'