LineChart

LineChart connects data points with lines, making it ideal for showing trends over time. Each ChartSeries becomes a separate line, and x_axis labels the horizontal axis. See Charts for the shared data, series, and formatting model.

Basic Usage

Reactive Series

Bind series to a list in app state to choose which lines appear. The expression must resolve to a list of dictionaries using wire names such as dataKey.

Reactive Series

from prefab_ui.app import PrefabApp
from prefab_ui.components.charts import LineChart
from prefab_ui.rx import Rx

data = [
    {"month": "Jan", "desktop": 186, "mobile": 80},
    {"month": "Feb", "desktop": 305, "mobile": 200},
]

app = PrefabApp(
    state={
        "chart_series": [
            {
                "dataKey": "desktop",
                "label": "Desktop",
                "color": "var(--chart-1)",
                "visible": True,
            },
            {
                "dataKey": "mobile",
                "label": "Mobile",
                "color": "var(--chart-2)",
                "visible": False,
            },
        ]
    },
    view=LineChart(
        data=data,
        series=Rx("chart_series").selectattr("visible"),
        x_axis="month",
    ),
)

Changing a series’ visible value updates the chart. A sole template such as "{{ chart_series | selectattr:'visible' }}" is equivalent. Automatic palette colors follow the order of the resolved series list. Set color on each series, as above, to keep its color when filtering or reordering that list.

Axis Labels

Use x_axis_label for the category axis and y_axis_label for the value axis. show_y_axis=False hides the value-axis title along with that axis.

Axis Labels

from prefab_ui.components.charts import LineChart, ChartSeries

LineChart(
    data=[{"month": "Jan", "users": 10}, {"month": "Feb", "users": 20}],
    series=[ChartSeries(data_key="users")],
    x_axis="month",
    x_axis_label="Month",
    y_axis_label="Users",
)

Minimal

Set show_grid=False to remove the background gridlines. The line then reads as pure motion — useful in dense dashboards or inline trend callouts where direction matters more than precise values.

Smooth

Set curve="smooth" for gently curved lines between data points.

Step

Set curve="step" to connect points with step-shaped lines. This is useful for data that changes in discrete jumps.

With Dots

Set show_dots=True to render a dot at each data point along the lines.

Value Formatting

Use value_format to format numeric values on the value axis and in tooltips. It accepts the same pipe strings as Prefab expressions and data table columns, including currency, currency:EUR, percent:1, and compact:0.

API Reference

LineChart Parameters

list[dict] | str

required

Data as a list of dicts, or a {{ field }} interpolation reference.

list[ChartSeries] | RxStr

required

Series definitions, or an Rx / sole template resolving to a list of series dictionaries. Each series becomes a line on the chart.

str | None

default:"None"

Data key for x-axis labels.

RxStr | None

default:"None"

Human-readable category-axis title.

RxStr | None

default:"None"

Human-readable value-axis title. Hidden when show_y_axis=False.

int

default:"300"

Chart height in pixels.

Literal["linear", "smooth", "step"]

default:"\"linear\""

Interpolation curve between data points.

bool

default:"False"

Show a dot at each data point.

bool

default:"False"

Show a legend below the chart.

Show tooltips on hover.

bool

default:"True"

Show horizontal grid lines.

bool

default:"True"

Show the y-axis with its tick labels. Set to False for a compact, axis-free reading where the shape matters more than exact values.

str

default:"\"auto\""

Format value-axis ticks and tooltip values with an expression pipe such as currency, currency:EUR, percent:1, or compact:0.

str | None

default:"None"

Additional Tailwind CSS classes.

ChartSeries Parameters

str

required

Data field to plot — must match a key in the data dicts.

str | None

default:"None"

Display label for legends and tooltips. Defaults to the data_key value.

str | None

default:"None"

CSS color override. By default, colors cycle through the theme’s chart palette (--chart-1 through --chart-5).

Protocol Reference

LineChart

{
  "type": "LineChart",
  "id?": "string",
  "onMount?": "any",
  "data": "object[] | string (required)",
  "series": "[ChartSeries] | string (required)",
  "xAxis?": "string",
  "xAxisLabel?": "string",
  "yAxisLabel?": "string",
  "height?": "300",
  "curve?": "linear | smooth | step",
  "showDots?": false,
  "showLegend?": true,
  "showTooltip?": true,
  "animate?": true,
  "showGrid?": true,
  "showYAxis?": true,
  "valueFormat?": "string",
  "cssClass?": "string"
}

ChartSeries

{
  "dataKey": "string (required)",
  "label?": "string",
  "color?": "string"
}

For the complete protocol schema, see LineChart, ChartSeries.

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Basic Usage

Reactive Series

Axis Labels

Minimal

Smooth

Step

With Dots

Value Formatting

API Reference

LineChart Parameters

ChartSeries Parameters

Protocol Reference

​Basic Usage

​Reactive Series

​Axis Labels

​Minimal

​Smooth

​Step

​With Dots

​Value Formatting

​API Reference

LineChart Parameters

ChartSeries Parameters

​Protocol Reference

Basic Usage

Reactive Series

Axis Labels

Minimal

Smooth

Step

With Dots

Value Formatting

API Reference

Protocol Reference