## BarChart Use BarChart component without type prop to render a regular bar chart. In a regular bar chart, each data series is plotted on its own and does not interact with other series. Category: Charts ### Introduction ```python import dash_mantine_components as dmc from .data import data dmc.BarChart( h=300, dataKey="month", data=data, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"} ], tickLine="y", gridAxis="y", withXAxis=True, withYAxis=True ) ``` ### Data Here is the data used in all the examples on this page: ```python data = [ {"month": "January", "Smartphones": 1200, "Laptops": 900, "Tablets": 200}, {"month": "February", "Smartphones": 1900, "Laptops": 1200, "Tablets": 400}, {"month": "March", "Smartphones": 400, "Laptops": 1000, "Tablets": 200}, {"month": "April", "Smartphones": 1000, "Laptops": 200, "Tablets": 800}, {"month": "May", "Smartphones": 800, "Laptops": 1400, "Tablets": 1200}, {"month": "June", "Smartphones": 750, "Laptops": 600, "Tablets": 1000} ] ``` ### Stacked bar chart Set type="stacked" to render a stacked bar chart. In this type of bar chart stacking is applied along the vertical axis, allowing you to see the overall trend as well as the contribution of each individual series to the total. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Mixed stacked bar chart You can control how series are stacked by setting `stackId` property in `series` dictionary: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, series=[ {"name": "Smartphones", "color": "violet.6", "stackId": "a"}, {"name": "Laptops", "color": "blue.6", "stackId": "b"}, {"name": "Tablets", "color": "teal.6", "stackId": "b"}, ], ) ``` ### Percent bar chart Set type="percent" to render a percent bar chart. In this type of bar chart the y-axis scale is always normalized to 100%, making it easier to compare the contribution of each series in terms of percentages. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="percent", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Waterfall Set `type="waterfall"` to render a waterfall bar chart. This chart type illustrates how an initial value is influenced by subsequent positive or negative values, with each bar starting where the previous one ended. Use the `color` prop inside data to color each bar individually. Note that the series color gets overwritten for this specific bar. Use the `standalone` prop inside data to decouple the bar from the flow. ```python import dash_mantine_components as dmc data = [ {"item": "TaxRate", "Effective tax rate in %": 21, "color": "blue"}, {"item": "Foreign inc.", "Effective tax rate in %": -15.5, "color": "teal"}, {"item": "Perm. diff.", "Effective tax rate in %": -3, "color": "teal"}, {"item": "Credits", "Effective tax rate in %": -3, "color": "teal"}, {"item": "Loss carryf.", "Effective tax rate in %": -2, "color": "teal"}, {"item": "Law changes", "Effective tax rate in %": 2, "color": "red"}, {"item": "Reven. adj.", "Effective tax rate in %": 4, "color": "red"}, { "item": "ETR", "Effective tax rate in %": 3.5, "color": "blue", "standalone": True, }, ] component = dmc.BarChart( h=300, data=data, dataKey="item", type="waterfall", series=[{"name": "Effective tax rate in %", "color": "blue"}], withLegend=True, ) ``` ### SVG Pattern as bar fill You can use SVG patterns as bar fill. To do so, set `fill` property in series object to a url of the SVG pattern. Example of using diagonal stripes and crosshatch patterns as bar fill: ```python import dash_mantine_components as dmc from dash import html, dcc from .data import data # Define patterns for custom colors pattern_definitions = dcc.Markdown(''' ''', dangerously_allow_html=True) component = html.Div([ pattern_definitions, dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", series=[ {"name": "Smartphones", "color": "url(#crosshatch)"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "url(#diagonalStripes)"}, ], ) ]) ``` ### Bar color based on value Use `getBarColor` prop to assign color based on `value`. `getBarColor` function is called with two arguments: `value` and `series` object. It should return a color string (theme color reference or any valid CSS color value). Note that color returned by `getBarColor` does not impact colors of the legend and tooltip. Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document. ```python import dash_mantine_components as dmc data = [ {"month": "January", "Smartphones": 1200, "Laptops": 900, "Tablets": 200}, {"month": "February", "Smartphones": 1900, "Laptops": 1200, "Tablets": 400}, {"month": "March", "Smartphones": 400, "Laptops": 1000, "Tablets": 200}, {"month": "April", "Smartphones": 1000, "Laptops": 200, "Tablets": 800}, {"month": "May", "Smartphones": 800, "Laptops": 1400, "Tablets": 1200}, {"month": "June", "Smartphones": 750, "Laptops": 600, "Tablets": 1000}, ] component = dmc.BarChart( h=300, data=data, dataKey="month", series=[{"name": "Laptops", "color": "gray.6"}], getBarColor={"function": "barColor"} ) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; // Highlights bars with value > 700 in teal, others in red dmcfuncs.barColor = (value) => { return value > 700 ? 'teal.8' : 'red.8'; }; ``` ### Legend To display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data series is highlighted in the chart. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, withLegend=True, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Legend position You can pass props down to recharts `Legend` component with `legendProps` prop. For example, setting the following will render the legend at the bottom of the chart and set its height to 50px. ```python legendProps={"verticalAlign": "bottom", "height": 50} ``` ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, withLegend=True, legendProps={"verticalAlign": "bottom", "height": 50}, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Series labels By default, series `name` is used as a label. To change it, set `label` property in `series` object: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", withLegend=True, legendProps={"verticalAlign": "bottom"}, series=[ {"name": "Smartphones", "label": "Smartphones sales", "color": "violet.6"}, {"name": "Laptops", "label": "Laptops sales", "color": "blue.6"}, {"name": "Tablets", "label": "Tablets sales", "color": "teal.6"}, ], ) ``` ### X and Y axis props Use `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these props can be used to change orientation of axis: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", tickLine="xy", yAxisProps={"tickMargin": 15, "orientation": "right"}, xAxisProps={"tickMargin": 15, "orientation": "top"}, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Axis labels Use `xAxisLabel` and `yAxisLabel` props to display axis labels: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", xAxisLabel="Date", yAxisLabel="Amount", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### X axis offset Use `xAxisProps` to set padding between the charts ends and the x-axis: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", xAxisProps={"padding": {"left": 30, "right": 30}}, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Y axis scale Use `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range of 0 to 150, you can set domain to `[0, 150]`: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, yAxisProps={"domain": [0, 250]}, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Value formatter To format values in the tooltip and axis ticks, use `valueFormat` prop. It accepts a function that takes number `value` as an argument and returns formatted value: Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, data=data, dataKey="month", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], valueFormatter={"function": "formatNumberIntl"}, ) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; dmcfuncs.formatNumberIntl = (value) => { return new Intl.NumberFormat('en-US').format(value); }; ``` ### Area color You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted. ```python import dash_mantine_components as dmc from .data import data dmc.BarChart( h=300, dataKey="date", data=data, fillOpacity=0.5, series=[{"name": "Smartphones", "color": "orange.7"}], ) ``` ### Change area color depending on color scheme You can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode) Example of bar area color that is dark orange in light mode and lime in dark mode: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="date", data=data, series=[{"name": "Smartphones", "color": "var(--chart-color)"}], ) ``` ```css :root { --chart-color: var(--mantine-color-orange-8) } :root[data-mantine-color-scheme="dark"] { --chart-color: var(--mantine-color-lime-4); } ``` ### Bar props You can pass props down to recharts [Bar](https://recharts.org/en-US/api/Bar) component with `barProps` prop. `barProps` accepts an object with rechart props. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, orientation="vertical", yAxisProps={"width": 80}, barProps={"radius": 50}, series=[{"name": "Smartphones", "color": "violet.6"}], ) ``` ### Bar animation By default, the Recharts data animation is disabled. To enable and customize the animation, use `barProps` to pass properties to the Recharts `Bar` component. ```python from random import randint import dash import dash_mantine_components as dmc from dash import callback, Input, Output component = dmc.Box( [ dmc.Button("Update Chart", id="btn-barchart-animation"), dmc.BarChart( id="barchart-animation", h=300, dataKey="month", data=[{}], type="stacked", barProps={"isAnimationActive": True}, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ), ] ) @callback( Output("barchart-animation", "data"), Input("btn-barchart-animation", "n_clicks") ) def update(n): if n and n > 0: return [ { "month": month, "Smartphones": randint(50, 300), "Laptops": randint(30, 200), "Tablets": randint(20, 150), } for month in ["January", "February", "March", "April", "May", "June"] ] return dash.no_update ``` ### Stroke dash array Set `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the lengths of alternating dashes and gaps. For example, strokeDasharray="10 5" will render a dashed line with 10px dashes and 5px gaps. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", strokeDasharray="15 15", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Grid and text colors Use `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. With CSS , you can change colors depending on color scheme. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode) ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", className="chart-grid-text-colors", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ```css .chart-grid-text-colors { --chart-grid-color: var(--mantine-color-blue-5); --chart-text-color: var(--mantine-color-blue-8); } [data-mantine-color-scheme='dark'] .chart-grid-text-colors { --chart-grid-color: var(--mantine-color-blue-3); --chart-text-color: var(--mantine-color-blue-2); } ``` If your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables: ```python dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", gridColor="gray.5", textColor = "gray.9", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Tooltip animation By default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of milliseconds to animate the tooltip position change. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, tooltipAnimationDuration=200, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Units Set `unit` prop to render a unit label next to the y-axis ticks and tooltip values: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, unit="$", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Remove tooltip To remove tooltip, set `withTooltip=false`. It also removes the cursor line and disables interactions with the chart. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, withTooltip=False, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Custom tooltip Use the `tooltipProps` `content` prop to to pass custom tooltip renderer to recharts Tooltip component. For example: ```python tooltipProps={'content': {'functon': 'myFunction'}} ``` Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"} ], tickLine="y", gridAxis="y", withXAxis=True, withYAxis=True, tooltipProps={"content": {"function": "chartTooltip"}} ) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; var dmc = window.dash_mantine_components; dmcfuncs.chartTooltip = ({ label, payload }) => { if (!payload || payload.length === 0) return null; return React.createElement( dmc.Paper, { px: "md", py: "sm", withBorder: true, shadow: "md", radius: "md", }, [ React.createElement( dmc.Text, { key: "tooltip-label", fw: 500, mb: 5, }, label ), ...payload.map((item, index) => React.createElement( dmc.Text, { key: `item-${index}`, c: item.color, fz: "sm", }, `${item.name}: ${item.value}` ) ), ] ); }; ``` ### Sync multiple BarCharts You can pass props down to recharts [BarChart](https://recharts.org/en-US/api/BarChart) component with `barChartProps` prop. For example, setting will sync tooltip of multiple BarChart components with the same `syncId` prop. ```python barChartProps={"syncId": "any-id"} ``` ```python import dash_mantine_components as dmc from .data import data component = dmc.Stack( [ dmc.Text("Smartphone sales:"), dmc.BarChart( h=180, dataKey="month", data=data, series=[{"name": "Smartphones", "color": "violet.6"}], barChartProps={"syncId": "tech"}, ), dmc.Text("Laptop sales"), dmc.BarChart( h=180, dataKey="month", data=data, series=[{"name": "Laptops", "color": "teal.6"}], barChartProps={"syncId": "tech"}, ), ] ) ``` ### Vertical orientation Set orientation="vertical" to render a vertical bar chart: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", orientation="vertical", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Reference lines Use `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, withTooltip=False, referenceLines=[ { "y": 130, "color": "red.5", "label": "Profit reached", "labelPosition": "insideTopRight", } ], series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], ) ``` ### Bar value label To display value above each bar, set `withBarValueLabel=True`: ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, withBarValueLabel=True, withLegend=True, withTooltip=False, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], valueFormatter={"function": "formatNumberIntl"}, ) ``` ### Bar value label props You can pass props down to [recharts LabelList](https://recharts.org/en-US/api/LabelList) component with `valueLabelProps` prop. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, withBarValueLabel=True, valueLabelProps={"position": 'inside', "fill": 'white'}, withLegend=True, withTooltip=False, series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], valueFormatter={"function": "formatNumberIntl"}, ) ``` ### clickData Use the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the clicked series, use the `clickSeriesName` property. ```python from dash import callback, Input, Output import dash_mantine_components as dmc from .data import data component = dmc.Group( [ dmc.BarChart( id="figure-barchart", h=300, dataKey="month", data=data, type="stacked", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], withLegend=True, withTooltip=False, ), dmc.Text(id="clickdata-barchart1"), dmc.Text(id="clickdata-barchart2"), ] ) @callback( Output("clickdata-barchart1", "children"), Output("clickdata-barchart2", "children"), Input("figure-barchart", "clickData"), Input("figure-barchart", "clickSeriesName"), ) def update(data, name): return f"clickData: {data}", f"clickSeriesName: {name}" ``` ### hoverData Use the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the hovered series, use the `hoverSeriesName` property. ```python from dash import callback, Input, Output import dash_mantine_components as dmc from .data import data component = dmc.Group( [ dmc.BarChart( id="figure-barchart-hover", h=300, dataKey="month", data=data, type="stacked", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], withLegend=True, withTooltip=False, ), dmc.Text(id="hoverdata-barchart1"), dmc.Text(id="hoverdata-barchart2"), ] ) @callback( Output("hoverdata-barchart1", "children"), Output("hoverdata-barchart2", "children"), Input("figure-barchart-hover", "hoverData"), Input("figure-barchart-hover", "hoverSeriesName"), ) def update(data, name): return f"hoverData: {data}", f"hoverSeriesName: {name}" ``` ### highlightHover Set `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items. ```python import dash_mantine_components as dmc from .data import data component = dmc.BarChart( h=300, dataKey="month", data=data, type="stacked", series=[ {"name": "Smartphones", "color": "violet.6"}, {"name": "Laptops", "color": "blue.6"}, {"name": "Tablets", "color": "teal.6"}, ], withLegend=True, withTooltip=False, highlightHover=True ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### BarChart selectors | Selector | Static selector | Description | |:-------------------|:---------------------------------|:-------------------------------------------------| | root | .mantine-BarChart-root | Root element | | bar | .mantine-BarChart-bar | Bar of the chart | | axis | .mantine-BarChart-axis | X and Y axis of the chart | | container | .mantine-BarChart-container | Recharts ResponsiveContainer component | | grid | .mantine-BarChart-grid | Recharts CartesianGrid component | | legend | .mantine-BarChart-legend | Legend root element | | legendItem | .mantine-BarChart-legendItem | Legend item representing data series | | legendItemColor | .mantine-BarChart-legendItemColor| Legend item color | | legendItemName | .mantine-BarChart-legendItemName | Legend item name | | tooltip | .mantine-BarChart-tooltip | Tooltip root element | | tooltipBody | .mantine-BarChart-tooltipBody | Tooltip wrapper around all items | | tooltipItem | .mantine-BarChart-tooltipItem | Tooltip item representing data series | | tooltipItemBody | .mantine-BarChart-tooltipItemBody| Tooltip item wrapper around item color and name| | tooltipItemColor | .mantine-BarChart-tooltipItemColor| Tooltip item color | | tooltipItemName | .mantine-BarChart-tooltipItemName | Tooltip item name | | tooltipItemData | .mantine-BarChart-tooltipItemData | Tooltip item data | | tooltipLabel | .mantine-BarChart-tooltipLabel | Label of the tooltip | | referenceLine | .mantine-BarChart-referenceLine | Reference line | | axisLabel | .mantine-BarChart-axisLabel | X and Y axis labels | ### BarChart CSS variables | Selector | Variable | Description | |:-----------------|:---------------------|:-------------------------------------------------| | root | --chart-grid-color | Controls color of the grid and cursor lines | | | --chart-text-color | Controls color of the axis labels | | | --chart-cursor-fill | Controls fill color of the cursor line | ### Keyword Arguments #### BarChart - children (a list of or a singular dash component, string or number; optional): Additional components that are rendered inside recharts `BarChart` component. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - barChartProps (dict; optional): Props passed down to recharts `BarChart` component. - barLabelColor (optional): Controls color of the bar label, by default the value is determined by the chart orientation. - barProps (dict; optional): Props passed down to recharts `Bar` component. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Click data. - clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Name of the series that was clicked. - cursorFill (optional): Fill of hovered bar section, by default value is based on color scheme. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required): Data used to display chart. - data-* (string; optional): Wild card data attributes. - dataKey (string; required): Key of the `data` object for x-axis values. - fillOpacity (number; optional): Controls fill opacity of all bars, `1` by default. - getBarColor (boolean | number | string | dict | list; optional): A function to assign dynamic bar color based on its value. Accepts value and series returns MantineColor. See https://www.dash-mantine-components.com/functions-as-props. - gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional): Specifies which lines should be displayed in the grid, `'x'` by default. - gridColor (optional): Color of the grid and cursor lines, by default depends on color scheme. - gridProps (dict; optional): Props passed down to the `CartesianGrid` component. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - highlightHover (boolean; optional): Determines whether a hovered series is highlighted. False by default. Mirrors the behaviour when hovering about chart legend items. - hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Hover data. - hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Name of the series that is hovered. - legendProps (dict; optional): Props passed down to the `Legend` component. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - maxBarWidth (number; optional): Maximum bar width in px. - minBarSize (number; optional): Sets minimum height of the bar in px, `0` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - orientation (a value equal to: 'horizontal', 'vertical'; optional): Chart orientation, `'horizontal'` by default. - referenceLines (list of dicts; optional): Reference lines that should be displayed on the chart. - rightYAxisLabel (boolean | number | string | dict | list; optional): Props passed down to the YAxis recharts component rendered on the right side. - rightYAxisProps (boolean | number | string | dict | list; optional): Props passed down to the YAxis recharts component rendered on the right side. - series (list of dicts; required): An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. `series` is a list of dicts with keys: - strokeDasharray (string | number; optional): Dash array for the grid lines and cursor, `'5 5'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - textColor (optional): Color of the text displayed inside the chart, `'dimmed'` by default. - tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional): Specifies which axis should have tick line, `'y'` by default. - tooltipAnimationDuration (number; optional): Tooltip position animation duration in ms, `0` by default. - tooltipProps (dict; optional): Props passed down to the `Tooltip` component. - type (a value equal to: 'default', 'stacked', 'percent', 'waterfall'; optional): Controls how bars are positioned relative to each other, `'default'` by default. - unit (string; optional): Unit displayed next to each tick in y-axis. - valueFormatter (boolean | number | string | dict | list; optional): A function to format values on Y axis and inside the tooltip. See https://www.dash-mantine-components.com/functions-as-props. - valueLabelProps (dict; optional): Props passed down to recharts `LabelList` component. Can be an object with props like "position" for valueLabel formatting. Only relevant, if withBarValueLabel is True. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBarValueLabel (boolean; optional): Determines whether a label with bar value should be displayed on top of each bar. On type="stacked" or type="percent", additionally use withBarValueLabel to customize the label (e.g. use {position: 'inside'} to move the labels inside each bar). False by default. - withLegend (boolean; optional): Determines whether chart legend should be displayed, `False` by default. - withRightYAxis (boolean; optional): Determines whether additional y-axis should be displayed on the right side of the chart, False by default. - withTooltip (boolean; optional): Determines whether chart tooltip should be displayed, `True` by default. - withXAxis (boolean; optional): Determines whether x-axis should be hidden, `True` by default. - withYAxis (boolean; optional): Determines whether y-axis should be hidden, `True` by default. - xAxisLabel (string; optional): A label to display below the x-axis. - xAxisProps (dict; optional): Props passed down to the `XAxis` recharts component. - yAxisLabel (string; optional): A label to display next to the y-axis. - yAxisProps (dict; optional): Props passed down to the `YAxis` recharts component.