## LineChart Line chart component Category: Charts ### Introduction ```python import dash_mantine_components as dmc from .data import data dmc.LineChart( 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", 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} ] ``` ### Gradient type Set `type="gradient"` to render a line chart with gradient fill. To customize gradient colors, use `gradientStops` prop. It accepts an array of objects with `offset` and `color` properties. `offset` is a number between 0 and 100 that defines the position of the color in the gradient, `color` is a reference to `theme.colors` or any valid CSS color. ```python import dash_mantine_components as dmc data = [ {"date": "Jan", "temperature": -25}, {"date": "Feb", "temperature": -10}, {"date": "Mar", "temperature": 5}, {"date": "Apr", "temperature": 15}, {"date": "May", "temperature": 30}, {"date": "Jun", "temperature": 15}, {"date": "Jul", "temperature": 30}, {"date": "Aug", "temperature": 40}, {"date": "Sep", "temperature": 15}, {"date": "Oct", "temperature": 20}, {"date": "Nov", "temperature": 0}, {"date": "Dec", "temperature": -10}, ] component = dmc.LineChart( h=300, data=data, series=[{"name": "temperature", "label": "Avg. Temperature"}], dataKey="date", type="gradient", valueFormatter={"function": "celsiusLabel"}, gradientStops=[ {"offset": 0, "color": "red.6"}, {"offset": 20, "color": "orange.6"}, {"offset": 40, "color": "yellow.5"}, {"offset": 70, "color": "lime.5"}, {"offset": 80, "color": "cyan.5"}, {"offset": 100, "color": "blue.5"}, ], strokeWidth=5, curveType="natural", yAxisProps={"domain": [-25, 40]}, p="lg" ) ``` ### 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.LineChart( h=300, dataKey="date", data=data, 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); }; ``` ### 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( 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.LineChart( 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.LineChart( h=300, dataKey="date", data=data, tickLine="xy", xAxisProps={"angle": -20}, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### Line 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.LineChart( h=300, dataKey="date", data=data, series=[{"name": "Apples", "color": "orange.7"}], ) ``` ### Change line 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, tooltipAnimationDuration=200, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], ) ``` ### Line animation By default, the Recharts data animation is disabled. To enable and customize the animation, use `lineProps` to pass properties to the Recharts `Line` 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-linechart-animation"), dmc.LineChart( id="linechart-animation", h=300, dataKey="date", data=[{}], tooltipAnimationDuration=500, lineProps={ "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("linechart-animation", "data"), Input("btn-linechart-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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, withTooltip=False, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "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.LineChart( h=300, dataKey="date", data=data, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], 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}` ) ), ] ); }; ``` ### 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"} ], strokeWidth=2, ) ``` ### Sync multiple LineCharts You can pass props down to recharts LineChart component with `lineChartProps` prop. For example, setting the following will sync tooltip of multiple `LineChart` components with the same `syncId` prop. ```python lineChartProps={"syncId": "any-id"} ``` ```python import dash_mantine_components as dmc from .data import data component = dmc.Stack( [ dmc.Text("Apples sales:"), dmc.LineChart( h=180, dataKey="date", data=data, series=[{"name": "Apples", "color": "indigo.6"}], lineChartProps={"syncId": "groceries"}, ), dmc.Text("Tomatoes sales"), dmc.LineChart( h=180, dataKey="date", data=data, series=[{"name": "Tomatoes", "color": "teal.6"}], lineChartProps={"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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( h=300, dataKey="date", data=data, 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.LineChart( 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. Note: To enable `clickSeriesName` when clicking on the dots, set `withTooltip=True`. ```python from dash import callback, Input, Output import dash_mantine_components as dmc from .data import data component = dmc.Group( [ dmc.LineChart( id="figure-linechart", h=300, dataKey="date", data=data, withLegend=True, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"}, strokeWidth=4 ), dmc.Text(id="clickdata-linechart1"), dmc.Text(id="clickdata-linechart2"), ] ) @callback( Output("clickdata-linechart1", "children"), Output("clickdata-linechart2", "children"), Input("figure-linechart", "clickData"), Input("figure-linechart", "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. Note: To enable `hoverSeriesName` when hovering on the dots, set `withTooltip=True`. ```python from dash import callback, Input, Output import dash_mantine_components as dmc from .data import data import dash_mantine_components as dmc from .data import data component = dmc.Group( [ dmc.LineChart( id="figure-linechart-hover", h=300, dataKey="date", data=data, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"}, strokeWidth=4 ), dmc.Text(id="hoverdata-linechart1"), dmc.Text(id="hoverdata-linechart2"), ] ) @callback( Output("hoverdata-linechart1", "children"), Output("hoverdata-linechart2", "children"), Input("figure-linechart-hover", "hoverData"), Input("figure-linechart-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.LineChart( h=300, dataKey="date", data=data, series=[ {"name": "Apples", "color": "indigo.6"}, {"name": "Oranges", "color": "blue.6"}, {"name": "Tomatoes", "color": "teal.6"}, ], withLegend=True, highlightHover=True, withTooltip=False, strokeWidth=4 ) ``` ### 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. #### LineChart selectors | Selector | Static selector | Description | |:-----------------|:----------------------------------|:-------------------------------------------------| | root | .mantine-LineChart-root | Root element | | line | .mantine-LineChart-line | Line of the chart | | axis | .mantine-LineChart-axis | X and Y axis of the chart | | container | .mantine-LineChart-container | Recharts ResponsiveContainer component | | grid | .mantine-LineChart-grid | Recharts CartesianGrid component | | legend | .mantine-LineChart-legend | Legend root element | | legendItem | .mantine-LineChart-legendItem | Legend item representing data series | | legendItemColor | .mantine-LineChart-legendItemColor| Legend item color | | legendItemName | .mantine-LineChart-legendItemName | Legend item name | | tooltip | .mantine-LineChart-tooltip | Tooltip root element | | tooltipBody | .mantine-LineChart-tooltipBody | Tooltip wrapper around all items | | tooltipItem | .mantine-LineChart-tooltipItem | Tooltip item representing data series | | tooltipItemBody | .mantine-LineChart-tooltipItemBody| Tooltip item wrapper around item color and name| | tooltipItemColor | .mantine-LineChart-tooltipItemColor| Tooltip item color | | tooltipItemName | .mantine-LineChart-tooltipItemName | Tooltip item name | | tooltipItemData | .mantine-LineChart-tooltipItemData | Tooltip item data | | tooltipLabel | .mantine-LineChart-tooltipLabel | Label of the tooltip | | referenceLine | .mantine-LineChart-referenceLine | Reference line | | axisLabel | .mantine-LineChart-axisLabel | X and Y axis labels | #### LineChart 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 #### LineChart - 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 (boolean | number | string | dict | list; optional): Props passed down to all active dots. Ignored if `withDots={False}` is set. - 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 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. - fillOpacity (number; optional): Controls fill opacity of all lines, `1` by default. - gradientStops (list of dicts; optional): Data used to generate gradient stops, [{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }] by default. `gradientStops` is a list of dicts with keys: - 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`. - lineChartProps (boolean | number | string | dict | list; optional): Props passed down to recharts `LineChart` component. - lineProps (boolean | number | string | dict | list; 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: - 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. - 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. - type (a value equal to: 'default', 'gradient'; optional): Controls styles of the line 'default' | 'gradient'. '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. - 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.