Skip to main content
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.

​
Basic Usage

​
Minimal

Turn off the grid for a cleaner look.

​
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.

​
API Reference

LineChart Parameters

​
data
list[dict] | str
required
Data as a list of dicts, or a {{ field }} interpolation reference.
​
series
list[ChartSeries]
required
Series definitions — each becomes a line on the chart.
​
x_axis
str | None
default:"None"
Data key for x-axis labels.
​
height
int
default:"300"
Chart height in pixels.
​
curve
Literal["linear", "smooth", "step"]
default:"\"linear\""
Interpolation curve between data points.
​
show_dots
bool
default:"False"
Show a dot at each data point.
​
show_legend
bool
default:"False"
Show a legend below the chart.
​
show_tooltip
bool
default:"True"
Show tooltips on hover.
​
show_grid
bool
default:"True"
Show horizontal grid lines.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

ChartSeries Parameters

​
data_key
str
required
Data field to plot — must match a key in the data dicts.
​
label
str | None
default:"None"
Display label for legends and tooltips. Defaults to the data_key value.
​
color
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",
  "data": "Action[] | string (required)",
  "series": "[ChartSeries] (required)",
  "xAxis?": "string",
  "height?": "300",
  "curve?": "linear | smooth | step",
  "showDots?": false,
  "showLegend?": false,
  "showTooltip?": true,
  "showGrid?": true,
  "cssClass?": "string"
}
ChartSeries
{
  "dataKey": "string (required)",
  "label?": "string",
  "color?": "string"
}
For the complete protocol schema, see LineChart, ChartSeries.