Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

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.

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

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.

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

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,

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.

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

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.

initial_data = data


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)


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, where these props are all described with examples.

A Line chart component in Recharts.

PropTypeDescriptionValues
dataList

The source data, in which each element is an object.

marginDict

The sizes of whitespace around the chart.

sync_idstr

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_methodLiteral

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

layoutLiteral

The layout of area in the chart. 'horizontal' | 'vertical'

stack_offsetLiteral

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'

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

Valid Children

  • XAxis
  • YAxis
  • ReferenceArea
  • ReferenceDot
  • ReferenceLine
  • Brush
  • CartesianGrid
  • Legend
  • GraphingTooltip
  • Line

A Line component in Recharts.

PropTypeDescriptionValues
type_Literal

The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.

strokeUnion

The color of the line stroke.

stoke_widthint

The width of the line stroke.

dotbool

If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.

active_dotbool

The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.

labelbool

If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.

hidebool

Hides the line when true, useful when toggling visibility state via legend.

connect_nullsbool

Whether to connect a graph line across null points.

unitUnion

The unit of data. This option will be used in tooltip.

nameUnion

The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.

layoutLiteral

The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'

data_keyUnion

The key of a group of data which should be unique in an area chart.

x_axis_idUnion

The id of x-axis which is corresponding to the data.

y_axis_idUnion

The id of y-axis which is corresponding to the data.

legend_typeLiteral

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

Valid Children

  • LabelList
  • ErrorBar

Did you find this useful?

HomeGalleryChangelogIntroductionHosting