CODEWITHSUNDEEP
vega-lite
henryw374
henryw374

Reputation: 387

how to control the order of groups in a vega-lite stacked bar chart

Given a stacked bar chart such as in this example: https://vega.github.io/editor/?#/examples/vega-lite/stacked_bar_weather

I want to control the order of the items in the aggregation so that, for example, 'fog' comes at the bottom, with 'sun' next etc. Is that possible?

The reason for this is I have one type that is much larger than the others. I want this to appear at the bottom, then control the domain to 'cut off' most of that section.

Thanks

Upvotes: 3

Views: 1738

Answers (1)

jakevdp
jakevdp

Reputation: 86443

You can control the stack order via the order encoding: see https://vega.github.io/vega-lite/docs/stack.html#sorting-stack-order

Unfortunately, this only allows sorting by field value, rather than by an explicit order as you want here. The workaround is to use a calculate transform to turn your explicit order into a field (view in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/seattle-weather.csv"},
  "transform": [
    {
      "calculate": "indexof(['sun', 'fog', 'drizzle', 'rain', 'snow'], datum.weather)",
      "as": "order"
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {
      "timeUnit": "month",
      "field": "date",
      "type": "ordinal",
      "axis": {"title": "Month of the year"}
    },
    "y": {"aggregate": "count", "type": "quantitative"},
    "color": {
      "field": "weather",
      "type": "nominal",
      "scale": {
        "domain": ["sun", "fog", "drizzle", "rain", "snow"],
        "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
      },
      "legend": {"title": "Weather type"}
    },
    "order": {"field": "order", "type": "ordinal"}
  }
}

enter image description here

Upvotes: 4

Related Questions