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';
// or
import { PieSeries } from '@mui/x-charts-pro';
// or
import { PieSeries } from '@mui/x-charts-premium';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: { value: MakeOptional<PieValueType, 'id'>, dataIndex: number }) => 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:{ additionalRadius?: number, innerRadius?: number, outerRadius?: number, cornerRadius?: number, paddingAngle?: number, arcLabelRadius?: number, color?: string }
Override the arc attributes when it is highlighted.
Type:{ additionalRadius?: number, innerRadius?: number, outerRadius?: number, cornerRadius?: number, paddingAngle?: number, arcLabelRadius?: number, color?: string }
The scope to apply when the series is highlighted.
Type:{ highlight?: 'item' | 'none' | 'series', fade?: 'global' | 'none' | 'series' }
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:'circle' | 'line' | 'line+mark' | 'square' | ComponentClass<ChartsLabelCustomMarkProps, any> | FunctionComponent<ChartsLabelCustomMarkProps>
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:'asc' | 'desc' | 'none' | (a: number, b: number) => number
Default:'none'