## AreaChart Area chart component with stacked, percent and split variants. Category: Charts ### Introduction Use `AreaChart` component without `type` prop to render a regular area chart. In a regular area chart, each data series is plotted on its own and does not interact with other series. ```python import dash_mantine_components as dmc from .data import data dmc.AreaChart( h=300, dataKey="date", data=data, series = [ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"} ], curveType="linear", tickLine="xy", withGradient=False, withXAxis=False, withDots=False, ) ``` ### Data Here is the data imported for 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} ] ``` ### Stacked area chart Set type="stacked" to render a stacked area chart. In this type of area 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.AreaChart( h=300, dataKey="date", data=data, type="stacked", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### Percent area chart Set type="percent" to render a percent area chart. In this type of area 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.AreaChart( h=300, dataKey="date", data=data, type="percent", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### Split area chart Set type="split" to render a split area chart. In this type of area chart fill color is split into two colors, one for positive values and one for negative values. Split area chart supports only one data series. ```python import dash_mantine_components as dmc data = [ {"date": "Mar 22", "Apples": 110}, {"date": "Mar 23", "Apples": 60}, {"date": "Mar 24", "Apples": -80}, {"date": "Mar 25", "Apples": 40}, {"date": "Mar 26", "Apples": -40}, {"date": "Mar 27", "Apples": 80}, ] component = dmc.AreaChart( h=300, dataKey="date", data=data, type="split", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### Split colors Set `splitColors` prop to an array of two colors to customize the fill color of split area chart. The first color is used for positive values and the second color for negative values. `splitColors` prop is ignored in other types of area charts. ```python import dash_mantine_components as dmc data = [ {"date": "Mar 22", "Apples": 110}, {"date": "Mar 23", "Apples": 60}, {"date": "Mar 24", "Apples": -80}, {"date": "Mar 25", "Apples": 40}, {"date": "Mar 26", "Apples": -40}, {"date": "Mar 27", "Apples": 80}, ] component = dmc.AreaChart( h=300, dataKey="date", data=data, type="split", strokeWidth=1, activeDotProps={"r": 2, "strokeWidth": 1}, series=[{"name": "Apples", "color": "bright"}], splitColors=["violet", "orange"], ) ``` ### 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.Tooltip ```python import dash_mantine_components as dmc from .data import data component = dmc.AreaChart( h=300, dataKey="date", data=data, type="stacked", withLegend=True, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.AreaChart( h=300, dataKey="date", data=data, type="stacked", withLegend=True, legendProps={"verticalAlign": "bottom", "height": 50}, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.AreaChart( h=300, dataKey="date", data=data, type="stacked", withLegend=True, legendProps={"verticalAlign": "bottom"}, series=[ {"name": "Apples", "label": "Apples sales", "color": "indigo.6"}, {"name": "Oranges", "label": "Oranges sales", "color": "blue.6"}, {"name": "Tomatoes", "label": "Tomatoes sales", "color": "teal.6"}, ], ) ``` ### Connect nulls Use `connectNulls` prop to specify whether to connect a data point across null points. By default, `connectNulls` is true. ```python import dash_mantine_components as dmc data = [ {"date": "Mar 22", "Apples": 110}, {"date": "Mar 23", "Apples": 60}, {"date": "Mar 24", "Apples": -80}, {"date": "Mar 25", "Apples": 40}, {"date": "Mar 26", "Apples": None}, {"date": "Mar 27", "Apples": 80} ] dmc.AreaChart( h=300, dataKey="date", data=data, connectNulls=True, series=[{"name": "Apples", "color": "indigo.6"}], curveType="linear", ) ``` ### 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.AreaChart( h=300, dataKey="date", data=data, type="stacked", tickLine="xy", yAxisProps={"tickMargin": 15, "orientation": "right"}, xAxisProps={"tickMargin": 15, "orientation": "top"}, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.AreaChart( h=300, dataKey="date", data=data, type="stacked", xAxisLabel="Date", yAxisLabel="Amount", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.AreaChart( h=300, dataKey="date", data=data, type="stacked", xAxisProps={"padding": {"left": 30, "right": 30}}, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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 100, you can set domain to [0, 100]: ```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.AreaChart( h=300, dataKey="date", yAxisProps={"domain": [0, 100]}, data=data, connectNulls=True, series=[{"name": "Apples", "color": "indigo.6"}], ) ``` ### Right Y axis To display additional Y axis on the right side of the chart, set `withRightYAxis` prop. You can pass props down to recharts `YAxis` component with `rightYAxisProps` prop and assign a label to the right Y axis with `rightYAxisLabel` prop. Note that you need to bind data series to the right Y axis by setting `yAxisId` in the series object. ```python import dash_mantine_components as dmc data = biaxial_data = [ {"name": "Page A", "uv": 4000, "pv": 2400}, {"name": "Page B", "uv": 3000, "pv": 1398}, {"name": "Page C", "uv": 2000, "pv": 9800}, {"name": "Page D", "uv": 2780, "pv": 3908}, {"name": "Page E", "uv": 1890, "pv": 4800}, {"name": "Page F", "uv": 2390, "pv": 3800}, {"name": "Page G", "uv": 3490, "pv": 4300}, ] component = dmc.AreaChart( h=300, data=data, dataKey="name", withRightYAxis=True, yAxisLabel="uv", rightYAxisLabel="pv", series=[ {"name": "uv", "color": "pink.6"}, {"name": "pv", "color": "cyan.6", "yAxisId": "right"}, ], ) ``` ### Rotate x-axis labels To rotate x-axis labels, set `xAxisProps.angle` to a number of degrees to rotate: ```python import dash_mantine_components as dmc from .data import data component = dmc.AreaChart( h=300, dataKey="date", data=data, type="stacked", tickLine="xy", xAxisProps={"angle": -20}, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### 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.AreaChart( h=300, dataKey="date", data=data, type="stacked", tickLine="xy", valueFormatter={"function": "formatNumberIntl"}, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ```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 data = [ {"date": "Mar 22", "Apples": 110}, {"date": "Mar 23", "Apples": 60}, {"date": "Mar 24", "Apples": -80}, {"date": "Mar 25", "Apples": 40}, {"date": "Mar 26", "Apples": 60}, {"date": "Mar 27", "Apples": 80} ] dmc.AreaChart( h=300, dataKey="date", data=data, withGradient=True, series=[{"name": "Apples", "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 area 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.AreaChart( h=300, dataKey="date", data=data, withGradient=True, series=[{"name": "Apples", "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); } ``` ### 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.AreaChart( h=300, dataKey="date", data=data, type="stacked", strokeDasharray="15 15", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.AreaChart( h=300, dataKey="date", data=data, type="stacked", className="chart-grid-text-colors", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.AreaChart( h=300, dataKey="date", data=data, type="stacked", gridColor="gray.5", textColor = "gray.9", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.AreaChart( h=300, dataKey="date", data=data, type="stacked", tooltipAnimationDuration=200, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### Area animation By default, the Recharts data animation is disabled. To enable and customize the animation, use `areaProps` to pass properties to the Recharts `Area` component. ```python from random import randint import dash_mantine_components as dmc from dash import callback, Input, Output component = dmc.Box( [ dmc.Button("Update Chart", id="btn-areachart-animation"), dmc.AreaChart( id="areachart-animation", h=300, dataKey="date", data=[{}], tooltipAnimationDuration=500, areaProps={ "isAnimationActive": True, "animationDuration": 500, "animationEasing": "ease-in-out", "animationBegin": 500, }, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ), ] ) @callback( Output("areachart-animation", "data"), Input("btn-areachart-animation", "n_clicks") ) def update(n): return [ { "date": "Mar 22", "Apples": 2890, "Oranges": 2338, "Tomatoes": randint(1000, 4000), }, { "date": "Mar 23", "Apples": 2756, "Oranges": 2103, "Tomatoes": randint(1000, 4000), }, { "date": "Mar 24", "Apples": 3322, "Oranges": 986, "Tomatoes": randint(1000, 4000), }, { "date": "Mar 25", "Apples": 3470, "Oranges": 2108, "Tomatoes": randint(1000, 4000), }, { "date": "Mar 26", "Apples": 3129, "Oranges": 1726, "Tomatoes": randint(1000, 4000), }, ] ``` ### 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.AreaChart( h=300, dataKey="date", data=data, type="stacked", unit="$", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.AreaChart( h=300, dataKey="date", data=data, type="stacked", withTooltip=False, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### 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.AreaChart( h=300, dataKey="date", data=data, type="stacked", dotProps={"r": 6, "strokeWidth": 2, "stroke": "#fff"}, activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"}, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### Stroke width Use `strokeWidth` prop to control the stroke width of all areas: ```python import dash_mantine_components as dmc from .data import data dmc.AreaChart( h=300, dataKey="date", data=data, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"} ], strokeWidth=2, ) ``` ### Fill opacity Use `fillOpacity` prop to control the fill opacity of all areas: ```python import dash_mantine_components as dmc from .data import data dmc.AreaChart( h=300, dataKey="date", data=data, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"} ], fillOpacity="0.2", withGradient=False, ) ``` ### Sync multiple AreaCharts You can pass props down to recharts AreaChart component with `areaChartProps` prop. For example, setting the following will sync tooltip of multiple `AreaChart` components with the same `syncId` prop. ```python areaChartProps={"syncId": "any-id"} ``` ```python import dash_mantine_components as dmc from .data import data component = dmc.Stack( [ dmc.Text("Apples sales:"), dmc.AreaChart( h=180, dataKey="date", data=data, series=[{"name": "Apples", "color": "indigo.6"}], areaChartProps={"syncId": "groceries"}, ), dmc.Text("Tomatoes sales"), dmc.AreaChart( h=180, dataKey="date", data=data, series=[{"name": "Tomatoes", "color": "teal.6"}], areaChartProps={"syncId": "groceries"}, ), ] ) ``` ### Vertical orientation Set orientation="vertical" to render a vertical area chart: ```python import dash_mantine_components as dmc from .data import data component = dmc.AreaChart( h=300, dataKey="date", data=data, type="stacked", orientation="vertical", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### Dashed area line Set `strokeDasharray` property in series to change line style to dashed: ```python import dash_mantine_components as dmc from .data import data component = dmc.AreaChart( h=300, dataKey="date", data=data, type="stacked", strokeWidth=1, dotProps={"r": 2}, activeDotProps={"r": 3, "strokeWidth": 1}, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6", "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 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.AreaChart( h=300, dataKey="date", data=data, yAxisProps={"domain": [0, 100]}, referenceLines=[ {"y": 40, "label": "Average sales", "color": "red.6"}, {"x": "Mar 25", "label": "Report out"}, ], series=[{"name": "Apples", "color": "indigo.6"}], ) ``` ### 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.AreaChart( id="figure-areachart", h=300, dataKey="date", data=data, type="stacked", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ), dmc.Text(id="clickdata-areachart1"), dmc.Text(id="clickdata-areachart2"), ] ) @callback( Output("clickdata-areachart1", "children"), Output("clickdata-areachart2", "children"), Input("figure-areachart", "clickData"), Input("figure-areachart", "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.AreaChart( id="figure-areachart-hover", h=300, dataKey="date", data=data, type="stacked", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ), dmc.Text(id="hoverdata-areachart1"), dmc.Text(id="hoverdata-areachart2"), ] ) @callback( Output("hoverdata-areachart1", "children"), Output("hoverdata-areachart2", "children"), Input("figure-areachart-hover", "hoverData"), Input("figure-areachart-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.AreaChart( h=300, dataKey="date", data=data, type="stacked", series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], 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. #### AreaChart selectors | Name | Static selector | Description | |:----------------|:----------------------------------|:----------------------------------------------| | root | .mantine-AreaChart-root | Root element | | area | .mantine-AreaChart-area | Area of the chart | | axis | .mantine-AreaChart-axis | X and Y axis of the chart | | container | .mantine-AreaChart-container | Recharts ResponsiveContainer component | | grid | .mantine-AreaChart-grid | Recharts CartesianGrid component | | legend | .mantine-AreaChart-legend | Legend root element | | legendItem | .mantine-AreaChart-legendItem | Legend item representing data series | | legendItemColor | .mantine-AreaChart-legendItemColor | Legend item color | | legendItemName | .mantine-AreaChart-legendItemName | Legend item name | | tooltip | .mantine-AreaChart-tooltip | Tooltip root element | | tooltipBody | .mantine-AreaChart-tooltipBody | Tooltip wrapper around all items | | tooltipItem | .mantine-AreaChart-tooltipItem | Tooltip item representing data series | | tooltipItemBody | .mantine-AreaChart-tooltipItemBody | Tooltip item wrapper around item color and name| | tooltipItemColor| .mantine-AreaChart-tooltipItemColor| Tooltip item color | | tooltipItemName | .mantine-AreaChart-tooltipItemName | Tooltip item name | | tooltipItemData | .mantine-AreaChart-tooltipItemData | Tooltip item data | | tooltipLabel | .mantine-AreaChart-tooltipLabel | Label of the tooltip | | referenceLine | .mantine-AreaChart-referenceLine | Reference line | | axisLabel | .mantine-AreaChart-axisLabel | X and Y axis labels | #### AreaChart 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 #### AreaChart - children (a list of or a singular dash component, string or number; optional): Additional components that are rendered inside recharts `AreaChart` component. - id (string; optional): Unique ID to identify this component in Dash callbacks. - activeDotProps (dict; optional): Props passed down to all active dots. Ignored if `withDots={False}` is set. - areaChartProps (dict; optional): Props passed down to recharts `AreaChart` component. - 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. - 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. - 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): Type of the curve, `'monotone'` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data (list of dicts; required): Data used to display chart. `data` is a list of dicts with keys: - data-* (string; optional): Wild card data attributes. - dataKey (string; required): Key of the `data` object for x-axis values. - dotProps (dict; optional): Props passed down to all dots. Ignored if `withDots={False}` is set. - fillOpacity (number; optional): Controls fill opacity of all areas, `0.2` by default. - 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: - 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: - splitColors (list of 2 elements: [, ]; optional): A tuple of colors used when `type="split"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors `['green.7', 'red.7']` by default. - splitOffset (number; optional): Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function. - strokeDasharray (string | number; optional): Dash array for the grid lines and cursor, `'5 5'` by default. - strokeWidth (number; optional): Stroke width for the chart areas, `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. - type (a value equal to: 'default', 'stacked', 'percent', 'split'; optional): Controls how chart areas 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. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withDots (boolean; optional): Determines whether dots should be displayed, `True` by default. - withGradient (boolean; optional): Determines whether the chart area should be represented with a gradient instead of the solid color, `False` by default. - withLegend (boolean; optional): Determines whether chart legend should be displayed, `False` by default. - withPointLabels (boolean; optional): Determines whether each point should have associated label, 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.