visualizationvega-litedeneb

How to conditionally format an area chart in Deneb


I am trying to conditionally format an area chart. This works perfectly with a bar chart. So I'm stuck trying to figure what is wrong. I assume issue likely comes from how Vega-Lite handles color encoding in area charts versus bar charts.

{
  "layer": [
    {
      "mark": {
        "type": "area",
        "filled": true,
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "Date Dt",
          "type": "temporal",
          "axis": {
            "format": "%d-%b"
          }
        },
        "y": {
          "field": "Amount",
          "type": "quantitative",
          "axis": {
            "format": "~s"
          }
        },
        "color": {
          "condition": {
            "test": "datum['Amount'] > datum['Max $'] || datum['Amount'] < datum['Min $']",
            "value": "rgb(255, 110, 100)"
          },
          "value": "green"
        }
      }
    }
  ]
}

Solution

  • Are you trying to shade a portion of the area based on a threshold? If so, this is likely because an area is a single rendered element, unlike bars, which are separate and, therefore, more straightforward to encode conditionally.

    I've solved this challenge previously using three different areas (positive, negative, and intersection) to mask the parts of the chart and give the effect I think you're looking for, and I've written this up in detail here.