json - Add gradient to bar chart in vega lite - Stack Overflow

admin管理员组

文章数量:1201558

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.

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.

• json
• bar-chart
• vega-lite

Share Improve this question Follow asked Jan 21 at 15:58 SeannyyboyyyyySeannyyboyyyyy 3533 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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"}
      }
    }
  ]
}

本文标签： jsonAdd gradient to bar chart in vega liteStack Overflow