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.

Demos

Import

import { BarChart } from '@mui/x-charts/BarChart';
// or
import { BarChart } from '@mui/x-charts';
// or
import { BarChart } from '@mui/x-charts-pro';

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

Props

Props of the native component are also available.

NameTypeDefaultDescription
series*Array<object>-

The series to display in the bar chart. An array of BarSeriesType objects.

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 highlighting docs for more details.

barLabel'value'
| func
-

If provided, the function will be used to format the label of the bar. It can be set to 'value' to display the current value.

borderRadiusnumber-

Defines the border radius of the bar element.

bottomAxisobject
| 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.

colorsArray<string>
| func
blueberryTwilightPalette

Color palette used to colorize multiple series.

datasetArray<object>-

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

disableAxisListenerboolfalse

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.

heightnumber-

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

highlightedItem{ dataIndex?: number, seriesId?: number
| string }
-

The item currently highlighted. Turns highlighting into a controlled prop.

layout'horizontal'
| 'vertical'
'vertical'

The direction of the bar elements.

leftAxisobject
| 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.

loadingboolfalse

If true, a loading overlay is displayed.

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.

onAxisClickfunc-

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.
onHighlightChangefunc-

The callback fired when the highlighted item changes.

Signature:function(highlightedItem: HighlightItemData | null) => void
  • highlightedItem The newly highlighted item.
onItemClickfunc-

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.
resolveSizeBeforeRenderboolfalse

The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid.

rightAxisobject
| 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.

skipAnimationbool-

If true, animations are skipped. If unset or false, the animations respects the user's prefers-reduced-motion setting.

slotPropsobject{}

The props used for each component slot.

slotsobject{}

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.

topAxisobject
| 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.

widthnumber-

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

xAxisArray<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, 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'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, 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. An array of AxisConfig objects.

yAxisArray<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, 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?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, 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. An array of AxisConfig objects.

The ref is forwarded to the root element.

Theme default props

You can use MuiBarChart to change the default props of this component with the theme.

Slots

Slot nameClass nameDefault componentDescription
axisContentDefaultChartsAxisTooltipContentCustom component for displaying tooltip content when triggered by axis event.
axisLabelChartsTextCustom component for axis label.
axisLine'line'Custom component for the axis main line.
axisTick'line'Custom component for the axis tick.
axisTickLabelChartsTextCustom component for tick label.
barBarElementPathThe component that renders the bar.
barLabelBarLabelThe component that renders the bar label.
itemContentDefaultChartsItemTooltipContentCustom component for displaying tooltip content when triggered by item event.
legendDefaultChartsLegendCustom rendering of the legend.
loadingOverlayChartsLoadingOverlayOverlay component rendered when the chart is in a loading state.
noDataOverlayChartsNoDataOverlayOverlay component rendered when the chart has no data to display.
popperChartsTooltipRootCustom component for the tooltip popper.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.