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/BarChart';
// or
import { BarChart } from '@mui/x-charts';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Name	Type	Default	Description
series*	Array<object>	-	The series to display in the bar chart.
axisHighlight	{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }	-	The configuration of axes highlight. Default is set to 'band' in the bar direction. Depends on `layout` prop. See highlight docs for more details.
bottomAxis	{ 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, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number } \| string	xAxisIds[0] The id of the first provided axis	Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
colors	Array<string> \| func	blueberryTwilightPalette	Color palette used to colorize multiple series.
dataset	Array<object>	-	An array of objects that can be used to populate series and axes data using their `dataKey` property.
disableAxisListener	bool	false	If `true`, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.
grid	{ horizontal?: bool, vertical?: bool }	-	Option to display a cartesian grid in the background.
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
layout	'horizontal' \| 'vertical'	'vertical'	The direction of the bar elements.
leftAxis	{ 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, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number } \| string	yAxisIds[0] The id of the first provided axis	Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
margin	{ bottom?: number, left?: number, right?: number, top?: number }	object Depends on the charts type.	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`.
onAxisClick	func	-	The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position. 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	func	-	Callback fired when a bar item is clicked. Signature:`function(event: React.MouseEvent, barItemIdentifier: BarItemIdentifier) => void` `event` The event source of the callback. `barItemIdentifier` The bar item identifier.
rightAxis	{ 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, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number } \| string	null	Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
skipAnimation	bool	false	If `true`, animations are skipped.
slotProps	object	{}	The props used for each component slot.
slots	object	{}	Overridable component slots. See Slots API below for more details.
tooltip	{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis' \| 'item' \| 'none' }	-	The configuration of the tooltip. See tooltip docs for more details.
topAxis	{ 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, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number } \| string	null	Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.
xAxis	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, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, valueFormatter?: func }>	-	The configuration of the x-axes. If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
yAxis	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, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, valueFormatter?: func }>	-	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

Slot name	Default component	Description
axisLine	`'line'`	Custom component for the axis main line.
axisTick	`'line'`	Custom component for the axis tick.
axisTickLabel	`ChartsText`	Custom component for tick label.
axisLabel	`ChartsText`	Custom component for axis label.
bar	`BarElementPath`	The component that renders the bar.
legend	`DefaultChartsLegend`	Custom rendering of the legend.
popper	`ChartsTooltipRoot`	Custom component for the tooltip popper.
axisContent	`DefaultChartsAxisTooltipContent`	Custom component for displaying tooltip content when triggered by axis event.
itemContent	`DefaultChartsItemTooltipContent`	Custom component for displaying tooltip content when triggered by item event.