Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

BarChart API

API reference docs for the React BarChart 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 { BarChart } from '@mui/x-charts';
    You can learn about the difference by reading this guide on minimizing bundle size.

    Component name

    The name MuiBarChart can be used when providing default props or style overrides in the theme.

    Props

    NameTypeDefaultDescription
    bottomAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
    | 'top', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		xAxisIds[0] The id of the first provided axis
    Indicate which axis to display the the bottom of the charts. Can be a string (the id of the axis) or an object XAxisProps
    leftAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
    | 'right', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		yAxisIds[0] The id of the first provided axis
    Indicate which axis to display the the left of the charts. Can be a string (the id of the axis) or an object YAxisProps
    rightAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
    | 'right', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		null
    Indicate which axis to display the the right of the charts. Can be a string (the id of the axis) or an object YAxisProps
    topAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
    | 'top', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		null
    Indicate which axis to display the the top of the charts. Can be a string (the id of the axis) or an object XAxisProps

    The component cannot hold a ref.