Search code examples
visualizationvega-lite

Vega-lite customize colors in grouped bar chart with multiple measures

I started with this vega-lite example from the gallery and now I'd like to customize this chart by changing the default blue and orange colors to custom color by RGB value. Is that possible with vega-lite?

Solution

  • Yes, just set a scale.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/movies.json"
  },
  "repeat": {"layer": ["Worldwide Gross", "US Gross"]},
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "Major Genre",
        "type": "nominal"
      },
      "y": {
        "aggregate": "sum",
        "field": {"repeat": "layer"},
        "type": "quantitative",
        "title": "Total Gross"
      },
      "color": {"datum": {"repeat": "layer"}, "title": "Gross",
      "scale": {"range": ["#2a9d8f", "#e76f51"]}},
      "xOffset": {"datum": {"repeat": "layer"}}
    }
  },
  "config": {
    "mark": {"invalid": null}
  }
}