## CompositeChart Composed chart with support for Area, Bar and Line charts Category: Charts ### Introduction ```python import dash_mantine_components as dmc from .data import data dmc.CompositeChart( h=300, data=data, dataKey="date", withLegend=True, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### Data Here is the data used in all the examples on this page: ```python data = [ { "date": "Mar 22", "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452, }, { "date": "Mar 23", "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402, }, { "date": "Mar 24", "Apples": 3322, "Oranges": 986, "Tomatoes": 1821, }, { "date": "Mar 25", "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809, }, { "date": "Mar 26", "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290, }, ] ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", withLegend=True, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", withLegend=True, maxBarWidth=30, legendProps={"verticalAlign": "bottom", "height": 50}, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", withLegend=True, legendProps={"verticalAlign": "bottom"}, maxBarWidth=30, series=[ { "name": "Tomatoes", "label": "Tomatoes sales", "color": "rgba(18, 120, 255, 0.2)", "type": "bar", }, { "name": "Apples", "label": "Apples sales", "color": "red.8", "type": "line", }, { "name": "Oranges", "label": "Oranges sales", "color": "yellow.8", "type": "area", }, ] ) ``` ### Points labels To display labels on data points, set `withPointLabels=True`. This feature is supported only for Line and Area charts: ```python import dash_mantine_components as dmc from .data import data component = dmc.CompositeChart( h=300, data=data, dataKey="date", withPointLabels=True, withLegend=True, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", tickLine="xy", yAxisProps={"tickMargin": 15, "orientation": "right"}, xAxisProps={"tickMargin": 15, "orientation": "top"}, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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"}, ], ) component = dmc.CompositeChart( h=300, data=data, dataKey="date", xAxisLabel="Date", yAxisLabel="Amount", maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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"}, ], ) component = dmc.CompositeChart( h=300, data=data, dataKey="date", xAxisProps={"padding": {"left": 30, "right": 30}}, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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 data = [ {"date": "Mar 22", "Apples": 50}, {"date": "Mar 23", "Apples": 60}, {"date": "Mar 24", "Apples": 40}, {"date": "Mar 25", "Apples": 30}, {"date": "Mar 26", "Apples": 0}, {"date": "Mar 27", "Apples": 20}, {"date": "Mar 28", "Apples": 20}, {"date": "Mar 29", "Apples": 10}, ] component = dmc.CompositeChart( h=300, data=data, dataKey="date", yAxisProps={"domain": [0, 100]}, withLegend=True, maxBarWidth=30, series=[ {"name": "Apples", "color": "red.8", "type": "line"}, ] ) ``` ### Chart 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 component = dmc.CompositeChart( h=300, data=data, dataKey="date", withLegend=True, maxBarWidth=30, series=[ {"name": "Apples", "color": "blue", "type": "line"}, ] ) ``` ### Change chart 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 line 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.CompositeChart( h=300, dataKey="date", data=data, series=[{"name": "Apples", "color": "var(--chart-color)", "type": "line" }], ) ``` ```css :root { --chart-color: var(--mantine-color-orange-8) } :root[data-mantine-color-scheme="dark"] { --chart-color: var(--mantine-color-lime-4); } ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", strokeDasharray="15 15", maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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.CompositeChart( h=300, dataKey="date", data=data, maxBarWidth=30, className="chart-grid-text-colors", series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ```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.CompositeChart( h=300, dataKey="date", data=data, maxBarWidth=30, gridColor="gray.5", textColor="gray.9", series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", tooltipAnimationDuration=200, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### Value formatter To format values in the tooltip and axis ticks, use `valueFormatter` 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.CompositeChart( h=300, data=data, dataKey="date", maxBarWidth=30, valueFormatter={"function": "formatNumberIntl"}, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; dmcfuncs.formatNumberIntl = (value) => { return new Intl.NumberFormat('en-US').format(value); }; ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", unit="$", maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", withTooltip=False, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", tooltipProps={"content": {"function": "chartTooltip"}}, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ```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}` ) ), ] ); }; ``` ### Customize dots Use `dotProps` to pass props down to recharts dot in regular state and `activeDotProps` to pass props down to recharts dot in active state (when cursor is over the current series). ```python import dash_mantine_components as dmc from .data import data component = dmc.CompositeChart( h=300, data=data, dataKey="date", dotProps={"r": 6, "strokeWidth": 2, "stroke": "#fff"}, activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"}, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ) ``` ### Stroke width Use `strokeWidth` prop to control the stroke width of all areas/lines: ### Sync multiple charts You can pass props down to recharts [ComposedChart](https://recharts.org/en-US/api/ComposedChart) component with `composedChartProps` prop. For example, setting the following will sync tooltip of multiple `CompositeChart` components with the same `syncId` prop. ```python composedChartProps={"syncId": "any-id"} ``` ```python import dash_mantine_components as dmc from .data import data component = dmc.Stack( [ dmc.Text("Apples sales:", mb="md", pl="md"), dmc.CompositeChart( h=180, data=data, dataKey="date", series=[{"name": "Apples", "color": "indigo.6", "type": "area"}], composedChartProps={"syncId": "groceries"} ), dmc.Text("Tomatoes sales:", mb="md", pl="md", mt="xl"), dmc.CompositeChart( h=180, data=data, dataKey="date", series=[{"name": "Tomatoes", "color": "cyan.6", "type": "bar"}], composedChartProps={"syncId": "groceries"} ) ] ) ``` ### Dashed lines Set `strokeDasharray` property in series to change line style to dashed: ```python import dash_mantine_components as dmc from .data import data component = dmc.CompositeChart( h=300, data=data, dataKey="date", strokeWidth=1, dotProps={"r": 2}, activeDotProps={"r": 3, "strokeWidth": 1}, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line", "strokeDasharray": "5 5"}, {"name": "Oranges", "color": "yellow.8", "type": "area", "strokeDasharray": "5 5"}, ] ) ``` ### 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.CompositeChart( h=300, data=data, dataKey="date", yAxisProps={"domain": [0, 100]}, referenceLines=[ {"y": 1200, "label": "Average sales", "color": "red.6"}, {"x": "Mar 25", "label": "Report out", "color": "blue.7"}, ], maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, ] ) ``` ### 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.CompositeChart( id="figure-compositechart", h=300, data=data, dataKey="date", withLegend=True, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ), dmc.Text(id="clickdata-compositechart1"), dmc.Text(id="clickdata-compositechart2"), ] ) @callback( Output("clickdata-compositechart1", "children"), Output("clickdata-compositechart2", "children"), Input("figure-compositechart", "clickData"), Input("figure-compositechart", "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.CompositeChart( id="figure-compositechart-hover", h=300, data=data, dataKey="date", withLegend=True, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ] ), dmc.Text(id="hoverdata-compositechart1"), dmc.Text(id="hoverdata-compositechart2"), ] ) @callback( Output("hoverdata-compositechart1", "children"), Output("hoverdata-compositechart2", "children"), Input("figure-compositechart-hover", "hoverData"), Input("figure-compositechart-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.CompositeChart( h=300, data=data, dataKey="date", withLegend=True, maxBarWidth=30, series=[ {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, {"name": "Apples", "color": "red.8", "type": "line"}, {"name": "Oranges", "color": "yellow.8", "type": "area"}, ], 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. #### CompositeChart selectors | Selector | Static selector | Description | |--------------------|-------------------------------------------|-----------------------------------------------| | root | .mantine-CompositeChart-root | Root element | | area | .mantine-CompositeChart-area | Area of the chart | | line | .mantine-CompositeChart-line | Line of the chart | | bar | .mantine-CompositeChart-bar | Bar of the chart | | axis | .mantine-CompositeChart-axis | X and Y axis of the chart | | container | .mantine-CompositeChart-container | Recharts ResponsiveContainer component | | grid | .mantine-CompositeChart-grid | Recharts CartesianGrid component | | legend | .mantine-CompositeChart-legend | Legend root element | | legendItem | .mantine-CompositeChart-legendItem | Legend item representing data series | | legendItemColor | .mantine-CompositeChart-legendItemColor | Legend item color | | legendItemName | .mantine-CompositeChart-legendItemName | Legend item name | | tooltip | .mantine-CompositeChart-tooltip | Tooltip root element | | tooltipBody | .mantine-CompositeChart-tooltipBody | Tooltip wrapper around all items | | tooltipItem | .mantine-CompositeChart-tooltipItem | Tooltip item representing data series | | tooltipItemBody | .mantine-CompositeChart-tooltipItemBody | Tooltip item wrapper around item color and name | | tooltipItemColor | .mantine-CompositeChart-tooltipItemColor | Tooltip item color | | tooltipItemName | .mantine-CompositeChart-tooltipItemName | Tooltip item name | | tooltipItemData | .mantine-CompositeChart-tooltipItemData | Tooltip item data | | tooltipLabel | .mantine-CompositeChart-tooltipLabel | Label of the tooltip | | referenceLine | .mantine-CompositeChart-referenceLine | Reference line | | axisLabel | .mantine-CompositeChart-axisLabel | X and Y axis labels | ### Composite 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 | ### Keyword Arguments #### CompositeChart - children (a list of or a singular dash component, string or number; optional): Additional components that are rendered inside `Composite` component. - id (string; optional): Unique ID to identify this component in Dash callbacks. - activeDotProps (boolean | number | string | dict | list; optional): Props passed down to all active dots. Ignored if `withDots={False}` is set. - areaProps (dict; optional): Props passed down to recharts `Area` component. - 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. - 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 for entire dataKey. - clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Name of the series that was clicked. - composedChartProps (dict; optional): Props passed down to recharts `Composite` component. - connectNulls (boolean; optional): Determines whether points with `None` values should be connected, `True` by default. - curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional): Controls how curve of lines and area series are displayed, `'montone'` by default. - 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. - dotProps (boolean | number | string | dict | list; optional): Props passed down to all dots. Ignored if `withDots={False}` is set. - 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 for entire dataKey. - 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`. - lineProps (dict; optional): Props passed down to recharts `Line` component. - 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. - 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`, `color` and `type` 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. - strokeWidth (number; optional): Stroke width for the chart lines, `2` 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. - 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. - 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, incompatible with `type="stacked"` and `type="percent"`, `False` by default. - withDots (boolean; optional): Determines whether dots should be displayed, `True` by default. - withLegend (boolean; optional): Determines whether chart legend should be displayed, `False` by default. - withPointLabels (boolean; optional): Determines whether a label with value should be displayed on top of a curve, This feature is supported only for Line and Area series. - 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.