BarSeries API
Extended documentation for the BarSeries interface with detailed information on the module's properties and available APIs.
Demos
Import
import { BarSeries } from '@mui/x-charts-premium'
// or
import { BarSeries } from '@mui/x-charts-pro'
// or
import { BarSeries } from '@mui/x-charts'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.
Type:'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined)
The placement of the bar label. It accepts the following values:
- 'center': the label is centered on the bar
- 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
Type:'center' | 'outside'
Default:'center'
Color to use when displaying the series.
If colorGetter is provided, it will be used to get the color for each data point instead.
Otherwise, this color will be used for all data points in the series.
Type:string
A function that returns a color based on the value and/or the data index of a point.
The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
When the color of the entire series is required, e.g., in legends, the color property is used instead.
Type:(data: ColorCallbackValue<TValue>) => string
The scope to apply when the series is highlighted.
Type:HighlightScope<SeriesType>
The label to display on the tooltip or the legend. It can be a string or a function.
Type:string | ((location: 'tooltip' | 'legend') => string)
Defines the mark type for the series.
There is a default mark type for each series type.
Type:ChartsLabelMarkType
Layout of the bars. All bar should have the same layout.
Type:'horizontal' | 'vertical'
Default:'vertical'
If provided, the value will be used as the minimum size of the bar in pixels.
This is useful to avoid bars with a size of 0.
The property is ignored if the series value is null or 0.
It also doesn't work with stacked series.
Type:number
Default:0px
The key that identifies the stacking group.
Series with the same stack property will be stacked together.
Type:string
Defines how stacked series handle negative values.
Type:StackOffsetType
Default:'diverging'
The order in which series' of the same group are stacked together.
Type:StackOrderType
Default:'none'
Formatter used to render values in tooltip or other data display.
Type:SeriesValueFormatter<ChartsSeriesConfig[SeriesType]['valueType']>
A function to extract and transform the value from the dataset item.
It receives the full dataset item and should return the series value.
Can be used as an alternative to dataKey.
Type:(item: DatasetElementType<unknown>) => BarValueType | null