Skip to content

PieSeriesType API

Demos

Import

import { PieSeriesType } from '@mui/x-charts'

Properties

data

Type:TData[]

type

Type:'pie'

arcLabelOptional

The label displayed into the arc.

Type:'formattedValue' | 'label' | 'value' | ((item: Omit<DefaultizedPieValueType, 'label'> & { label?: string }) => string)

arcLabelMinAngleOptional

The minimal angle required to display the arc label.

Type:number

Default:0

arcLabelRadiusOptional

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

colorOptional

Type:string

cornerRadiusOptional

The radius applied to arc corners (similar to border radius).

Type:number

Default:0

cxOptional

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%'

cyOptional

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%'

endAngleOptional

The end angle (deg) of the last item.

Type:number

Default:360

fadedOptional

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
}

highlightedOptional

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
}

highlightScopeOptional

The scope to apply when the series is highlighted.

Type:Partial<HighlightScope>

idOptional

Type:SeriesId

innerRadiusOptional

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

outerRadiusOptional

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%'

paddingAngleOptional

The padding angle (deg) between two arcs.

Type:number

Default:0

sortingValuesOptional

The sorting strategy used to order pie slices.
Can be 'none', 'asc', 'desc', or a sorting function.

Type:ChartsPieSorting

Default:'none'

startAngleOptional

The start angle (deg) of the first item.

Type:number

Default:0

valueFormatterOptional

Formatter used to render values in tooltip or other data display.

Type:SeriesValueFormatter<TValue>