Reflex | LineChart

LineChart

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.

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.

rx.recharts.line_chart(
    rx.recharts.line(
        data_key="pv",
        stroke="#8884d8",
    ),
    rx.recharts.line(
        data_key="uv",
        stroke="#82ca9d",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=data,
)

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},
]

Chart Features

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.

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,
)

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},
]

Dynamic Data and Style

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.

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,
    ),
    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,
    ),
    height="15em",
    width="100%",
)

initial_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},
]


class LineChartState(rx.State):
    data: list[dict[str, Any]] = initial_data
    pv_type: str = "monotone"
    uv_type: str = "monotone"

    def munge_data(self):
        for row in self.data:
            row["uv"] += random.randint(-500, 500)
            row["pv"] += random.randint(-1000, 1000)

LineChart

A Line chart component in Recharts.

Props

Prop	Type	Description
`data`	List	The source data, in which each element is an object.
`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	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
`width`	Union	The width of chart container. String or Integer
`height`	Union	The height of chart container.
`layout`	Literal	The layout of area in the chart. 'horizontal' \| 'vertical'
`margin`	Dict	The sizes of whitespace around the chart.
`stack_offset`	Literal	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'

Base Event Triggers

Line

A Line component in Recharts.

Props

Prop	Type	Description
`type_`	Literal	The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
`stroke`	str	The color of the line stroke.
`stoke_width`	int	The width of the line stroke.
`dot`	bool	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`	bool	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.
`label`	bool	If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
`hide`	bool	Hides the line when true, useful when toggling visibility state via legend.
`connect_nulls`	bool	Whether to connect a graph line across null points.
`layout`	Literal	The layout of bar in the chart, usually inherited from parent. 'horizontal' \| 'vertical'
`data_key`	Union	The key of a group of data which should be unique in an area chart.
`x_axis_id`	Union	The id of x-axis which is corresponding to the data.
`y_axis_id`	Union	The id of y-axis which is corresponding to the data.

Base Event Triggers

[ Learn ]

[ Concepts ]

[ Reference ]

[ Core Charts ]

[ Core Helpers ]

[ Other Graphing ]

LineChart

Chart Features

Dynamic Data and Style

LineChart

Props

Base Event Triggers

Line

Props

Base Event Triggers

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

[ Core Charts ]

[ Core Helpers ]

[ Other Graphing ]

LineChart

Chart Features

Dynamic Data and Style

LineChart

Props

Base Event Triggers

Line

Props

Base Event Triggers

[ Learn ]