BarChart API

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

Component demos

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

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

axisHighlight

Object { x, y } that defines how the charts highlight the mouse position along the x- and y-axes. The two properties accept the following values: - 'none': display nothing. - 'line': display a line at the current mouse position. - 'band': display a band at the current mouse position. Only available with band scale.

Type:{ x?: 'band' | 'line' | 'none', y?: 'band' | 'line' | 'none' }

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?: number | 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

Default:blueberryTwilightPalette

dataset

An array of objects that can be used to populate series and axes data using their dataKey property.

Type:Array<object>

disableAxisListener

If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.

Type:bool

Default:false

height

The height of the chart in px. If not defined, it takes the height of the parent element.

Type:number

Default:undefined

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?: number | 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

margin

The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: top, bottom, left, and right.

Type:{ bottom?: number, left?: number, right?: number, top?: number }

Default:object Depends on the charts type.

onAxisClick

The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.

Type:func

Signature:

function(event: MouseEvent, data: null | AxisData) => void

event The mouse event recorded on the <svg/> element.
data The data about the clicked axis and items associated with it.

onItemClick

Callback fired when a bar item is clicked.

Type:func

Signature:

function(event: React.MouseEvent, barItemIdentifier: BarItemIdentifier) => void

event The event source of the callback.
barItemIdentifier The bar item identifier.

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?: number | 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 skipped.

Type:bool

Default:false

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

See Slots API below for more details.

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.

Default:null

width

The width of the chart in px. If not defined, it takes the width of the parent element.

Type:number

Default:undefined

xAxis

The configuration of the x-axes. If not provided, a default axis config is used with id set to DEFAULT_X_AXIS_KEY.

Type:Array<{ axisId?: number | string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number | string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date | number, min?: Date | number, position?: 'bottom' | 'left' | 'right' | 'top', reverse?: bool, scaleType?: 'band' | 'linear' | 'log' | 'point' | 'pow' | 'sqrt' | 'time' | 'utc', 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, valueFormatter?: func }>

yAxis

The configuration of the y-axes. If not provided, a default axis config is used with id set to DEFAULT_Y_AXIS_KEY.

The component cannot hold a ref.

Slots

axisLine

axisTick

axisTickLabel

axisLabel

bar

The component that renders the bar.

Default component: BarElementPath

legend

Custom rendering of the legend.

Default component: DefaultChartsLegend

popper

axisContent

itemContent