Skip to content

PieChart API

API reference docs for the React PieChart component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

    Import

    import PieChart from '/packages/x-charts/src/PieChart';
    // or
    import { PieChart } from '/packages/x-charts/src';
    Learn about the difference by reading this guide on minimizing bundle size.

    Props

    bottomAxis

    Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps.

    Type:

    { axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom' | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number } | string

    Default:

    xAxisIds[0] The id of the first provided axis

    colors

    Color palette used to colorize multiple series.

    Type:

    Array<string> | func

    leftAxis

    Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps.

    Type:

    { axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left' | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number } | string

    Default:

    yAxisIds[0] The id of the first provided axis

    rightAxis

    Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps.

    Type:

    { axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left' | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number } | string

    Default:

    null

    slotProps

    The props used for each component slot.

    Type:

    object

    Default:

    {}

    topAxis

    Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps.

    Type:

    { axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom' | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number } | string

    Default:

    null

    The component cannot hold a ref.