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

Share Improve this question Follow edited Jan 29 at 18:29 M R asked Jan 29 at 17:56 M RM R 6255 bronze badges 2

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.