Vega-Lite: How to use a color field and have a legend?

Question

I would like to create a Vega-Lite / Deneb faceted bar chart with data where there is a need to a) have a specific color for each bar ie Brand and b) have the Brands in a specific order. Color and sort order are given as columns in the data: bColor & bSort. Is there a way to use the color field AND have a legend?

If I hard-code the colors as a range:

"scale": {"range": ["red", "orange", "green"]}

then I can see also the legend. So, is there a way to create a list of (unique) colors in the correct order to be used as the range? I have tried for example

"scale": {"range": {"op": "min", "field": "bColor"}},

but it gives me an error: Undefined data set name: "data_1"

Edit: This is how the end results should look like (this is done with hard-coded color range): chart with legend

It isn't clear what you're asking. Do you want your linked spec to use the color and sort fields from your data and show a legend? — Davide Bacci, Dec 20 '22 at 08:34
Yes! In Power BI the data can be filtered and that is why I cannot have the colors hard-coded. — Reija, Dec 20 '22 at 10:09
What needs to be sorted? The legend, the facets or the individual bars? — Davide Bacci, Dec 20 '22 at 10:12
Currently bars are sorted by bSort and that order should be visible in the legend too (C-A-B). Ideally the facets may need to be sorted too, but my example does not include a sort order for them. — Reija, Dec 20 '22 at 10:28
I think this is a bug. Here are some links to open issues. https://github.com/vega/vega-lite/issues/3933 — Davide Bacci, Dec 20 '22 at 11:28
Thanks for checking! How do you think it should work, should this work: `"scale": {"range": {"op": "min", "field": "bColor"}},` — Reija, Dec 20 '22 at 12:05
I'm not 100% sure. I would raise it on Github to see what they think. — Davide Bacci, Dec 20 '22 at 12:19

Davide Bacci · Answer 1 · 2022-12-20T12:39:59.340

Changing resolve from independent to shared breaks the chart.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "dedicated colors and sort order",
  "data": {
    "values": [
      {
        "Brand": "Brand A (orange)",
        "Statement": "S1",
        "Score": 0.6,
        "bSort": 2,
        "bColor": "orange"
      },
      {
        "Brand": "Brand B (green)",
        "Statement": "S1",
        "Score": 0.5,
        "bSort": 3,
        "bColor": "green"
      },
      {
        "Brand": "Brand C (red)",
        "Statement": "S1",
        "Score": 0.7,
        "bSort": 1,
        "bColor": "red"
      },
      {
        "Brand": "Brand A (orange)",
        "Statement": "S2",
        "Score": 0.6,
        "bSort": 2,
        "bColor": "orange"
      },
      {
        "Brand": "Brand B (green)",
        "Statement": "S2",
        "Score": 0.5,
        "bSort": 3,
        "bColor": "green"
      },
      {
        "Brand": "Brand C (red)",
        "Statement": "S2",
        "Score": 0.7,
        "bSort": 1,
        "bColor": "red"
      },
      {
        "Brand": "Brand A (orange)",
        "Statement": "S3",
        "Score": 0.6,
        "bSort": 2,
        "bColor": "orange"
      },
      {
        "Brand": "Brand B (green)",
        "Statement": "S3",
        "Score": 0.5,
        "bSort": 3,
        "bColor": "green"
      },
      {
        "Brand": "Brand C (red)",
        "Statement": "S3",
        "Score": 0.7,
        "bSort": 1,
        "bColor": "red"
      },
      {
        "Brand": "Brand A (orange)",
        "Statement": "S4",
        "Score": 0.6,
        "bSort": 2,
        "bColor": "orange"
      },
      {
        "Brand": "Brand B (green)",
        "Statement": "S4",
        "Score": 0.5,
        "bSort": 3,
        "bColor": "green"
      },
      {
        "Brand": "Brand C (red)",
        "Statement": "S4",
        "Score": 0.7,
        "bSort": 1,
        "bColor": "red"
      }
    ]
  },
  "resolve": { "scale": {"color": "independent"}},
  "facet": {"field": "Statement"},
  "columns": 2,
  "spec": {
    
    "encoding": {
      "x": {"field": "Score", "type": "quantitative"},
      "y": {"field": "Brand"},
      "color": {"field": "bColor", "scale": {"range": {"field": "bColor"}}}
    },
    "mark": {"type": "bar", "tooltip": true}
  }
}

It's a little disheartening to see this bug has been there since 2019. Any thoughts? — TheRizza, Dec 20 '22 at 15:05
I would just use Vega. Take the generated code from Vega-Lite and do a simple fix in Vega. — Davide Bacci, Dec 20 '22 at 16:57
I'm new to Vega, but my perception seems to be that some Vega-Lite bugs don't get fixed because fixing in Vega is too easy a work-around. Fair? — TheRizza, Dec 20 '22 at 17:37
Well the problem is that it is a very complicated library and there are not many people who help maintain it. The devs only have so much free time and there are other bugs which take priority for their own projects. I'd love it if more people contributed to the codebase to squash all these little bugs but the reality is that raw Vega is a lot more versatile. Vega-Lite was meant as shorthand so if you need flexibility, Vega is the way to go. — Davide Bacci, Dec 20 '22 at 17:47

Vega-Lite: How to use a color field and have a legend?

1 Answers1