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"
        }
      }
    }
  ]
}

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"
        }
      }
    }
  ]
}

• visualization
• vega-lite
• deneb

• Can you share a .pbix with sample data? – davidebacci Commented Jan 30 at 8:34
• Yes, here is the link drive.google/file/d/1Riv-PIjtE5lPSMMOFKtvVFtQ_sE9mtr0/… – M R Commented Jan 30 at 13:02

1 Answer 1

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.