CODEWITHSUNDEEP
vega-lite
johnmdonich
johnmdonich

Reputation: 349

Labeled bar chart with fill encoding does not respect sorting

I am trying to make a sorted bar chart with labels and fill encoding. But when I add the the fill encoding it breaks the sort. Via the github issues it seems like there are ways to get around this, but I can seem find a solution.

Given the spec without using the fill encoding the sorting works as expected.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {
    "values": [
      {
        "a": "A",
        "b": 28,
        "color": "black"
      },
      {
        "a": "B",
        "b": 55,
        "color": "grey"
      },
      {
        "a": "C",
        "b": 43,
        "color": "red"
      }
    ]
  },
  "encoding": {
    "y": {
      "field": "a",
      "type": "ordinal",
      "sort": {
        "encoding": "x",
        "order": "descending"
      }
    },
    "x": {
      "field": "b",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": "bar"
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle",
        "dx": 3
      },
      "encoding": {
        "text": {
          "field": "b",
          "type": "quantitative"
        }
      }
    }
  ]
}

sorted baar

When you add the fill encoding to the top level encoding object it breaks the sort with the following warning

"fill": {
  "field": "color",
  "type": "ordinal",
  "scale": null
}

[Warning] Domains that should be unioned has conflicting sort properties. Sort will be set to true.

filled bar

Full vega-editor here

Is there a work around for this.

It appear to relate to the these issues (maybe) #2536, #5408

Upvotes: 0

Views: 464

Answers (1)

dominik
dominik

Reputation: 5935

Yep, the underlying issue is https://github.com/vega/vega-lite/issues/5048. In this particular case, adding color to once layer adds a stack transform to one part of the dataflow but not the other so we cannot merge it. This is a great test case. Can you add this example to a new github issue so we can try to resolve it?

You can manually fix this example by disabling stacking the x encoding.

"stack": null

See this spec.

enter image description here

Upvotes: 3

Related Questions