Skip to content

BarChart API

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

Component demos

Import

import { BarChart } from '@mui/x-charts/BarChart';
// or
import { BarChart } from '@mui/x-charts';
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, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, 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, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, 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, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string

Default:null

skipAnimation

If true, animations are skiped.

Type:bool

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

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, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string

Default:null

The component cannot hold a ref.

Slots

axisContent
axisLabel
axisLine
axisTick
axisTickLabel
bar
itemContent
legend
popper