# Area Chart (Vega-Lite)

![Area Chart](https://help.gocapable.com/images/att1227685971.svg)

```
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "Area and Line",
  "width": 300,
  "height": 160,
  "data": {
    "values": [
      {"x": 0, "y": 4}, {"x": 1, "y": 6}, {"x": 2, "y": 7}, {"x": 3, "y": 8},
      {"x": 4, "y": 5}, {"x": 5, "y": 9}, {"x": 6, "y": 11}, {"x": 7, "y": 10},
      {"x": 8, "y": 12}, {"x": 9, "y": 14}
    ]
  },
  "layer": [
    {
      "mark": {"type": "area", "opacity": 0.4},
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y", "type": "quantitative"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y", "type": "quantitative"}
      }
    }
  ]
}
```