Add gradient to bar chart in vega lite

Question

I am trying to add a gradient to a bar chart in vega lite. I've managed to plot everything else okay, but after having tried a few things, I've just not been able to add a gradient. The gradient should be white to red for not booked The gradient should be white to green for booked

This is what I have currently:

{
    "data": {
        "name": "dataset"
    },
    "transform": [
        {
            "fold": ["Booked", "Not Booked"],
            "as": ["Booking Status", "Value"]
        }
    ],
    "mark": {
        "type": "bar",
        "cornerRadiusEnd": 10
    },
    "encoding": {
        "x": {
            "field": "Event Due Date",
            "type": "ordinal",
            "timeUnit": "month",
            "title": "",
            "sort": "x"
        },
        "y": {
            "field": "Value",
            "aggregate": "sum",
            "type": "quantitative",
            "title": ""
        },
        "color": {
            "field": "Booking Status",
            "type": "nominal",
            "scale": {
                "domain": ["Booked", "Not Booked"],
                "range": ["green", "red"]
            },
            "title": "Booking Status"
        },
        "xOffset": {
            "field": "Booking Status"
        }
    }
}

I've tried to add a gradient with stops in the range, related to the scale in the colour block. It seems this is not possible. I've tried to add a layer over the top, but this does not seem to work either.

Answer 1

I would generally be opposed to using gradients in a bar chart instead of just using solid colors for the bars. But if you must, the code below will do so (Open the Chart in the Vega Editor). The idea is you want two layers, filtered to show opposite parts of the data, each of which uses the correct gradient for that filtered data. (I am using the Vega editor’s sample data here; you can easily adapt this to your own.)

Result:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/seattle-weather.csv"},
  "layer": [
    {
      "transform": [{"filter": "month(datum.date) % 2 == 0"}],
      "mark": {
        "type": "bar",
        "color": {
          "x1": 1,
          "y1": 1,
          "x2": 1,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "white"},
            {"offset": 1, "color": "red"}
          ]
        }
      },
      "encoding": {
        "x": {"timeUnit": "month", "field": "date", "type": "temporal"},
        "y": {"aggregate": "mean", "field": "precipitation"}
      }
    },
    {
      "transform": [{"filter": "month(datum.date) % 2 == 1"}],
      "mark": {
        "type": "bar",
        "color": {
          "x1": 1,
          "y1": 1,
          "x2": 1,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "green"},
            {"offset": 1, "color": "red"}
          ]
        }
      },
      "encoding": {
        "x": {"timeUnit": "month", "field": "date", "type": "temporal"},
        "y": {"aggregate": "mean", "field": "precipitation"}
      }
    }
  ]
}