Skip to content
Vega-Lite templates

Math — Chart: Area Chart

A filled area chart of a series over time.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Area chart",
  "data": {"values": [
    {"t": 0, "y": 5}, {"t": 1, "y": 9}, {"t": 2, "y": 14},
    {"t": 3, "y": 12}, {"t": 4, "y": 18}, {"t": 5, "y": 25},
    {"t": 6, "y": 22}, {"t": 7, "y": 30}
  ]},
  "mark": {"type": "area", "line": true, "opacity": 0.6},
  "encoding": {
    "x": {"field": "t", "type": "quantitative", "title": "time"},
    "y": {"field": "y", "type": "quantitative", "title": "value"}
  }
}