Line_Area1

Line_Area1.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A line chart with highlighted area above the maximum value.",
  "data": {
    "values": [
      {"x": 2015, "y": 33},
      {"x": 2016, "y": 45},
      {"x": 2017, "y": 35},
      {"x": 2018, "y": 34.5},
      {"x": 2019, "y": 34},
      {"x": 2020, "y": 33.5},
      {"x": 2021, "y": 25},
      {"x": 2022, "y": 36},
      {"x": 2023, "y": 36.5},
      {"x": 2024, "y": 37}
    ]
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y", "type": "quantitative"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {"aggregate": "max", "field": "y", "type": "quantitative"},
        "color": {"value": "red"},
        "size": {"value": 2}
      }
    },
    {
      "transform": [
        {"joinaggregate": [{"op": "max", "field": "y", "as": "maxY"}]},
        {"calculate": "datum.maxY", "as": "baseY"}
      ],
      "mark": "area",
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "baseY", "type": "quantitative"},
        "y2": {"field": "y", "type": "quantitative"},
        "color": {"value": "red"},
        "opacity": {"value": 0.3}
      }
    }
  ]
}