> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.recharts.LineChart - rx.recharts.Line --- # Line Chart ```python exec import random from typing import Any import reflex as rx ``` A line chart is a type of chart used to show information that changes over time. Line charts are created by plotting a series of several points and connecting them with a straight line. ## Simple Example For a line chart we must define an `rx.recharts.line()` component for each set of values we wish to plot. Each `rx.recharts.line()` component has a `data_key` which clearly states which variable in our data we are tracking. In this simple example we plot `pv` and `uv` as separate lines against the `name` column which we set as the `data_key` in `rx.recharts.x_axis`. ```python demo graphing data = [ {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400}, {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210}, {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290}, {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000}, {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181}, {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500}, {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100}, ] def line_simple(): return rx.recharts.line_chart( rx.recharts.line( data_key="pv", ), rx.recharts.line( data_key="uv", ), rx.recharts.x_axis(data_key="name"), rx.recharts.y_axis(), data=data, width="100%", height=300, ) ``` ## Example with Props Our second example uses exactly the same data as our first example, except now we add some extra features to our line graphs. We add a `type_` prop to `rx.recharts.line` to style the lines differently. In addition, we add an `rx.recharts.cartesian_grid` to get a grid in the background, an `rx.recharts.legend` to give us a legend for our graphs and an `rx.recharts.graphing_tooltip` to add a box with text that appears when you pause the mouse pointer on an element in the graph. ```python demo graphing data = [ {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400}, {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210}, {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290}, {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000}, {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181}, {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500}, {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100}, ] def line_features(): return rx.recharts.line_chart( rx.recharts.line( data_key="pv", type_="monotone", stroke="#8884d8", ), rx.recharts.line( data_key="uv", type_="monotone", stroke="#82ca9d", ), rx.recharts.x_axis(data_key="name"), rx.recharts.y_axis(), rx.recharts.cartesian_grid(stroke_dasharray="3 3"), rx.recharts.graphing_tooltip(), rx.recharts.legend(), data=data, width="100%", height=300, ) ``` ## Layout The `layout` prop allows you to set the orientation of the graph to be vertical or horizontal. The `margin` prop defines the spacing around the graph, ```md alert info # Include margins around your graph to ensure proper spacing and enhance readability. By default, provide margins on all sides of the chart to create a visually appealing and functional representation of your data. ``` ```python demo graphing data = [ {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400}, {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210}, {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290}, {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000}, {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181}, {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500}, {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100}, ] def line_vertical(): return rx.recharts.line_chart( rx.recharts.line( data_key="pv", stroke=rx.color("accent", 9), ), rx.recharts.line( data_key="uv", stroke=rx.color("green", 9), ), rx.recharts.x_axis(type_="number"), rx.recharts.y_axis(data_key="name", type_="category"), layout="vertical", margin={"top": 20, "right": 20, "left": 20, "bottom": 20}, data=data, height=300, width="100%", ) ``` ## Dynamic Data Chart data can be modified by tying the `data` prop to a State var. Most other props, such as `type_`, can be controlled dynamically as well. In the following example the "Munge Data" button can be used to randomly modify the data, and the two `select` elements change the line `type_`. Since the data and style is saved in the per-browser-tab State, the changes will not be visible to other visitors. ```python demo exec initial_data = data class LineChartState(rx.State): data: list[dict[str, Any]] = initial_data pv_type: str = "monotone" uv_type: str = "monotone" @rx.event def set_pv_type(self, pv_type: str): self.pv_type = pv_type @rx.event def set_uv_type(self, uv_type: str): self.uv_type = uv_type @rx.event def munge_data(self): for row in self.data: row["uv"] += random.randint(-500, 500) row["pv"] += random.randint(-1000, 1000) def line_dynamic(): return rx.vstack( rx.recharts.line_chart( rx.recharts.line( data_key="pv", type_=LineChartState.pv_type, stroke="#8884d8", ), rx.recharts.line( data_key="uv", type_=LineChartState.uv_type, stroke="#82ca9d", ), rx.recharts.x_axis(data_key="name"), rx.recharts.y_axis(), data=LineChartState.data, margin={"top": 20, "right": 20, "left": 20, "bottom": 20}, width="100%", height=300, ), rx.hstack( rx.button("Munge Data", on_click=LineChartState.munge_data), rx.select( ["monotone", "linear", "step", "stepBefore", "stepAfter"], value=LineChartState.pv_type, on_change=LineChartState.set_pv_type, ), rx.select( ["monotone", "linear", "step", "stepBefore", "stepAfter"], value=LineChartState.uv_type, on_change=LineChartState.set_uv_type, ), ), width="100%", ) ``` To learn how to use the `sync_id`, `x_axis_id` and `y_axis_id` props check out the of the area chart [documentation](/docs/library/graphing/charts/areachart), where these props are all described with examples. ## API Reference ### rx.recharts.LineChart A Line chart component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `width` | str, int | - | The width of chart container. String or Integer. | | `height` | str, int | - | The height of chart container. | | `data` | Sequence[dict[str, Any]] | - | The source data, in which each element is an object. | | `margin` | dict[str, Any] | - | The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}. | | `sync_id` | str | - | If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush. | | `sync_method` | Literal["index", "value"] | `"index"` | When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index', 'value', function. | | `layout` | Literal["vertical", "horizontal"] | `"horizontal"` | The layout of area in the chart. 'horizontal', 'vertical'. | | `stack_offset` | Literal["expand", "none", "wiggle", "silhouette"] | - | The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand', 'none', 'wiggle', 'silhouette'. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.recharts.Line A Line component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `layout` | Literal["vertical", "horizontal"] | - | The layout of bar in the chart, usually inherited from parent. 'horizontal', 'vertical'. | | `data_key` | str, int | - | The key of a group of data which should be unique in an area chart. | | `x_axis_id` | str, int | `0` | The id of x-axis which is corresponding to the data. | | `y_axis_id` | str, int | `0` | The id of y-axis which is corresponding to the data. | | `legend_type` | Literal["circle", "cross", "diamond", "line", "plainline", "rect", "square", "star", "triangle", "wye", "none"] | - | The type of icon in legend. If set to 'none', no legend item will be rendered. 'line', 'plainline', 'square', 'rect'\| 'circle', 'cross', 'diamond', 'star', 'triangle', 'wye', 'none' optional. | | `label` | dict[str, Any], bool | `False` | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. | | `is_animation_active` | bool | `True` | If set false, animation of bar will be disabled. | | `animation_begin` | int | `0` | Specifies when the animation should begin, the unit of this option is ms. | | `animation_duration` | int | `1500` | Specifies the duration of animation, the unit of this option is ms. | | `animation_easing` | Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"] | `"ease"` | The type of easing function. | | `unit` | str, int | - | The unit of data. This option will be used in tooltip. | | `name` | str, int | - | The name of data. This option will be used in tooltip and legend to represent the component. If no value was set to this option, the value of dataKey will be used alternatively. | | `type_` | Literal["basis", "basisClosed", "basisOpen", "bumpX", "bumpY", "bump", "linear", "linearClosed", "natural", "monotoneX", "monotoneY", "monotone", "step", "stepBefore", "stepAfter"] | - | The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area. | | `stroke` | str, Color | `rx.color("accent", 9)` | The color of the line stroke. | | `stroke_width` | str, int, float | `1` | The width of the line stroke. | | `dot` | dict[str, Any], bool | `{"stroke": rx.color("accent", 10), "fill": rx.color("accent", 4)}` | The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. | | `active_dot` | dict[str, Any], bool | `{"stroke": rx.color("accent", 2), "fill": rx.color("accent", 10)}` | The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. | | `hide` | bool | `False` | Hides the line when true, useful when toggling visibility state via legend. | | `connect_nulls` | bool | - | Whether to connect a graph line across null points. | | `points` | Sequence[dict[str, Any]] | - | The coordinates of all the points in the line, usually calculated internally. | | `stroke_dasharray` | str | - | The pattern of dashes and gaps used to paint the line. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ Component-specific event triggers: | Event Trigger | Description | | --- | --- | | `on_animation_start` | The customized event handler of animation start. | | `on_animation_end` | The customized event handler of animation end. |