Line_Area2

Line_Area2.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A cumulative line chart with highlighted area above the maximum cumulative value on a monthly axis.",
  "data": {
    "values": [
      {"Date": "2023-01-01", "value": 10},
      {"Date": "2023-02-01", "value": 20},
      {"Date": "2023-03-01", "value": 30},
      {"Date": "2023-04-01", "value": 25},
      {"Date": "2023-05-01", "value": 40},
      {"Date": "2023-06-01", "value": 35},
      {"Date": "2023-07-01", "value": 50},
      {"Date": "2023-08-01", "value": 45},
      {"Date": "2023-09-01", "value": 55},
      {"Date": "2023-10-01", "value": 60},
      {"Date": "2023-11-01", "value": 65},
      {"Date": "2023-12-01", "value": 90}
    ]
  },
  "transform": [
    {"timeUnit": "month", "field": "Date", "as": "month"},
    {
      "window": [{"op": "sum", "field": "value", "as": "cumulative_value"}],
      "sort": [{"field": "Date"}]
    }
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "month",
          "type": "ordinal",
          "timeUnit": "month",
          "title": "Month"
        },
        "y": {"field": "cumulative_value", "type": "quantitative"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {
          "aggregate": "max",
          "field": "cumulative_value",
          "type": "quantitative"
        },
        "color": {"value": "red"},
        "size": {"value": 2}
      }
    },
    {
      "transform": [
        {
          "joinaggregate": [
            {
              "op": "max",
              "field": "cumulative_value",
              "as": "maxCumulativeValue"
            }
          ]
        },
        {"calculate": "datum.maxCumulativeValue", "as": "baseCumulativeValue"}
      ],
      "mark": "area",
      "encoding": {
        "x": {"field": "month", "type": "ordinal", "timeUnit": "month"},
        "y": {"field": "baseCumulativeValue", "type": "quantitative"},
        "y2": {"field": "cumulative_value", "type": "quantitative"},
        "color": {"value": "red"},
        "opacity": {"value": 0.3}
      }
    }
  ],
  "title": {
    "text": "Cumulative Line Chart with Highlighted Area",
    "subtitle": "Area above the maximum cumulative value is highlighted",
    "subtitlePadding": 10,
    "anchor": "start",
    "baseline": "top"
  }
}