# Line chart (Vega-Lite)

A line chart needs three things: a temporal field, a quantitative field, and optionally a nominal field for the series.

---

## What this example shows

* A temporal field type, which produces a date axis.
* A colour channel, which splits the data into series.
* Points on the line, set on the mark.

---

## A worked example

Open it, edit it, or copy the source below.

![Line chart (Vega-Lite)](https://help.gocapable.com/images/att1423999087.svg)

The source, which you can paste into a new diagram and edit:

```
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Weekly active users by plan",
  "width": 380,
  "height": 220,
  "data": {"values": [
    {"week": "2026-07-06", "plan": "Free", "users": 1210},
    {"week": "2026-07-13", "plan": "Free", "users": 1305},
    {"week": "2026-07-20", "plan": "Free", "users": 1288},
    {"week": "2026-07-27", "plan": "Free", "users": 1402},
    {"week": "2026-07-06", "plan": "Team", "users": 420},
    {"week": "2026-07-13", "plan": "Team", "users": 468},
    {"week": "2026-07-20", "plan": "Team", "users": 515},
    {"week": "2026-07-27", "plan": "Team", "users": 559},
    {"week": "2026-07-06", "plan": "Enterprise", "users": 96},
    {"week": "2026-07-13", "plan": "Enterprise", "users": 104},
    {"week": "2026-07-20", "plan": "Enterprise", "users": 118},
    {"week": "2026-07-27", "plan": "Enterprise", "users": 131}
  ]},
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {"field": "week", "type": "temporal", "title": "Week"},
    "y": {"field": "users", "type": "quantitative", "title": "Active users"},
    "color": {"field": "plan", "type": "nominal", "title": "Plan"}
  }
}
```

---

## Making it your own

* Set the type to temporal or the dates become unordered categories.
* Series on very different scales are better as separate charts than one.
* point: true makes individual observations visible, which matters with few data points.

---

## Related

[Stacked bar (Vega-Lite)Totals and composition, with one extra line.](https://help.gocapable.com/diagrams/stacked-bar-vega-lite.html)

[Area chart (Vega-Lite)Stacked areas over time.](https://help.gocapable.com/diagrams/area-chart-vega-lite.html)

[Vega-Lite examplesBack to the rest of these examples.](https://help.gocapable.com/diagrams/vega-lite-examples.html)

---

_A real chart in about ten lines._