---
title: LineChart
description: Visualize trends with connected data points.
icon: chart-line
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

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

<ComponentPreview json={{"view":{"type":"LineChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"desktop","label":"Desktop"},{"dataKey":"mobile","label":"Mobile"}],"xAxis":"month","height":300,"curve":"linear","showDots":false,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components.charts import LineChart, ChartSeries

data = [
    {"month": "Jan", "desktop": 186, "mobile": 80},
    {"month": "Feb", "desktop": 305, "mobile": 200},
    {"month": "Mar", "desktop": 237, "mobile": 120},
    {"month": "Apr", "desktop": 73, "mobile": 190},
    {"month": "May", "desktop": 209, "mobile": 130},
    {"month": "Jun", "desktop": 214, "mobile": 140},
]

LineChart(
    data=data,
    series=[
        ChartSeries(data_key="desktop", label="Desktop"),
        ChartSeries(data_key="mobile", label="Mobile"),
    ],
    x_axis="month",
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "LineChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [
      {"dataKey": "desktop", "label": "Desktop"},
      {"dataKey": "mobile", "label": "Mobile"}
    ],
    "xAxis": "month",
    "height": 300,
    "curve": "linear",
    "showDots": false,
    "showLegend": true,
    "showTooltip": true,
    "showGrid": true,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## Minimal

Turn off the grid for a cleaner look.

<ComponentPreview json={{"view":{"type":"LineChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"value","label":"Requests"}],"xAxis":"month","height":300,"curve":"linear","showDots":false,"showLegend":false,"showTooltip":true,"showGrid":false,"showYAxis":true,"yAxisFormat":"auto"}}} playground="TGluZUNoYXJ0KAogICAgZGF0YT1kYXRhLAogICAgc2VyaWVzPVtDaGFydFNlcmllcyhkYXRhX2tleT0idmFsdWUiLCBsYWJlbD0iUmVxdWVzdHMiKV0sCiAgICB4X2F4aXM9Im1vbnRoIiwKICAgIHNob3dfZ3JpZD1GYWxzZSwKKQo=">
<CodeGroup>
```python Python {5} icon="python"
LineChart(
    data=data,
    series=[ChartSeries(data_key="value", label="Requests")],
    x_axis="month",
    show_grid=False,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "LineChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [{"dataKey": "value", "label": "Requests"}],
    "xAxis": "month",
    "height": 300,
    "curve": "linear",
    "showDots": false,
    "showLegend": false,
    "showTooltip": true,
    "showGrid": false,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## Smooth

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

<ComponentPreview json={{"view":{"type":"LineChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"desktop","label":"Desktop"},{"dataKey":"mobile","label":"Mobile"}],"xAxis":"month","height":300,"curve":"smooth","showDots":false,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}}} playground="TGluZUNoYXJ0KAogICAgZGF0YT1kYXRhLAogICAgc2VyaWVzPVsKICAgICAgICBDaGFydFNlcmllcyhkYXRhX2tleT0iZGVza3RvcCIsIGxhYmVsPSJEZXNrdG9wIiksCiAgICAgICAgQ2hhcnRTZXJpZXMoZGF0YV9rZXk9Im1vYmlsZSIsIGxhYmVsPSJNb2JpbGUiKSwKICAgIF0sCiAgICB4X2F4aXM9Im1vbnRoIiwKICAgIGN1cnZlPSJzbW9vdGgiLAogICAgc2hvd19sZWdlbmQ9VHJ1ZSwKKQo=">
<CodeGroup>
```python Python {8} icon="python"
LineChart(
    data=data,
    series=[
        ChartSeries(data_key="desktop", label="Desktop"),
        ChartSeries(data_key="mobile", label="Mobile"),
    ],
    x_axis="month",
    curve="smooth",
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "LineChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [
      {"dataKey": "desktop", "label": "Desktop"},
      {"dataKey": "mobile", "label": "Mobile"}
    ],
    "xAxis": "month",
    "height": 300,
    "curve": "smooth",
    "showDots": false,
    "showLegend": true,
    "showTooltip": true,
    "showGrid": true,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## Step

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

<ComponentPreview json={{"view":{"type":"LineChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"desktop","label":"Desktop"},{"dataKey":"mobile","label":"Mobile"}],"xAxis":"month","height":300,"curve":"step","showDots":false,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}}} playground="TGluZUNoYXJ0KAogICAgZGF0YT1kYXRhLAogICAgc2VyaWVzPVsKICAgICAgICBDaGFydFNlcmllcyhkYXRhX2tleT0iZGVza3RvcCIsIGxhYmVsPSJEZXNrdG9wIiksCiAgICAgICAgQ2hhcnRTZXJpZXMoZGF0YV9rZXk9Im1vYmlsZSIsIGxhYmVsPSJNb2JpbGUiKSwKICAgIF0sCiAgICB4X2F4aXM9Im1vbnRoIiwKICAgIGN1cnZlPSJzdGVwIiwKICAgIHNob3dfbGVnZW5kPVRydWUsCikK">
<CodeGroup>
```python Python {8} icon="python"
LineChart(
    data=data,
    series=[
        ChartSeries(data_key="desktop", label="Desktop"),
        ChartSeries(data_key="mobile", label="Mobile"),
    ],
    x_axis="month",
    curve="step",
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "LineChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [
      {"dataKey": "desktop", "label": "Desktop"},
      {"dataKey": "mobile", "label": "Mobile"}
    ],
    "xAxis": "month",
    "height": 300,
    "curve": "step",
    "showDots": false,
    "showLegend": true,
    "showTooltip": true,
    "showGrid": true,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## With Dots

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

<ComponentPreview json={{"view":{"type":"LineChart","data":[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":73,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":214,"mobile":140}],"series":[{"dataKey":"desktop","label":"Desktop"},{"dataKey":"mobile","label":"Mobile"}],"xAxis":"month","height":300,"curve":"linear","showDots":true,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}}} playground="TGluZUNoYXJ0KAogICAgZGF0YT1kYXRhLAogICAgc2VyaWVzPVsKICAgICAgICBDaGFydFNlcmllcyhkYXRhX2tleT0iZGVza3RvcCIsIGxhYmVsPSJEZXNrdG9wIiksCiAgICAgICAgQ2hhcnRTZXJpZXMoZGF0YV9rZXk9Im1vYmlsZSIsIGxhYmVsPSJNb2JpbGUiKSwKICAgIF0sCiAgICB4X2F4aXM9Im1vbnRoIiwKICAgIHNob3dfZG90cz1UcnVlLAogICAgc2hvd19sZWdlbmQ9VHJ1ZSwKKQo=">
<CodeGroup>
```python Python {8} icon="python"
LineChart(
    data=data,
    series=[
        ChartSeries(data_key="desktop", label="Desktop"),
        ChartSeries(data_key="mobile", label="Mobile"),
    ],
    x_axis="month",
    show_dots=True,
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "LineChart",
    "data": [
      {"month": "Jan", "desktop": 186, "mobile": 80},
      {"month": "Feb", "desktop": 305, "mobile": 200},
      {"month": "Mar", "desktop": 237, "mobile": 120},
      {"month": "Apr", "desktop": 73, "mobile": 190},
      {"month": "May", "desktop": 209, "mobile": 130},
      {"month": "Jun", "desktop": 214, "mobile": 140}
    ],
    "series": [
      {"dataKey": "desktop", "label": "Desktop"},
      {"dataKey": "mobile", "label": "Mobile"}
    ],
    "xAxis": "month",
    "height": 300,
    "curve": "linear",
    "showDots": true,
    "showLegend": true,
    "showTooltip": true,
    "showGrid": true,
    "showYAxis": true,
    "yAxisFormat": "auto"
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="LineChart Parameters">
<ParamField body="data" type="list[dict] | str" required>
  Data as a list of dicts, or a `{{ field }}` interpolation reference.
</ParamField>

<ParamField body="series" type="list[ChartSeries]" required>
  Series definitions — each becomes a line on the chart.
</ParamField>

<ParamField body="x_axis" type="str | None" default="None">
  Data key for x-axis labels.
</ParamField>

<ParamField body="height" type="int" default="300">
  Chart height in pixels.
</ParamField>

<ParamField body="curve" type='Literal["linear", "smooth", "step"]' default='"linear"'>
  Interpolation curve between data points.
</ParamField>

<ParamField body="show_dots" type="bool" default="False">
  Show a dot at each data point.
</ParamField>

<ParamField body="show_legend" type="bool" default="False">
  Show a legend below the chart.
</ParamField>

<ParamField body="show_tooltip" type="bool" default="True">
  Show tooltips on hover.
</ParamField>

<ParamField body="show_grid" type="bool" default="True">
  Show horizontal grid lines.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

<Card icon="code" title="ChartSeries Parameters">
<ParamField body="data_key" type="str" required>
  Data field to plot — must match a key in the data dicts.
</ParamField>

<ParamField body="label" type="str | None" default="None">
  Display label for legends and tooltips. Defaults to the `data_key` value.
</ParamField>

<ParamField body="color" type="str | None" default="None">
  CSS color override. By default, colors cycle through the theme's chart palette (`--chart-1` through `--chart-5`).
</ParamField>
</Card>

## Protocol Reference

```json 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"
}
```

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

For the complete protocol schema, see [LineChart](/protocol/line-chart), [ChartSeries](/protocol/chart-series).
