visualizationvega-litevegavega-embedvega-lite-api

Sort Order of Stacked Bars in VegaLite

i have created a aggregate sum stacked bar chart in vegalite and i want the sequence of inside small bar(small blocks) in stack ascending order

for example in this chart -> editor link i have sorted the sum in descending order and by default the order of each value in it comes as alphabetically ascending(aaa then ccc then ggg then lll) but i want that also on the basis of ascending order of values in it (i.e. by the VALUE column present in data by which we have find the sum)

Solution

  • You mean like this? You need an order encoding.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "bharat": "N5113A",
        "color": "#71A4DD",
        "india": "mmm",
        "value": 14,
        "idd": 3
      },
      {
        "bharat": "N5153A",
        "color": "#71A4DD",
        "india": "mmm",
        "value": 13,
        "idd": 7
      },
      {
        "bharat": "N5153A",
        "color": "#65D4EF",
        "india": "ppp",
        "value": 11,
        "idd": 11
      },
      {
        "bharat": "N5113A",
        "color": "#65D4EF",
        "india": "ppp",
        "value": 10,
        "idd": 13
      },
      {
        "bharat": "N5153A",
        "color": "#B2AA9C",
        "india": "nnn",
        "value": 10,
        "idd": 14
      },
      {
        "bharat": "N5113A",
        "color": "#96F1E2",
        "india": "rrr",
        "value": 9,
        "idd": 17
      },
      {
        "bharat": "N5153A",
        "color": "#736BA7",
        "india": "ttt",
        "value": 9,
        "idd": 19
      },
      {
        "bharat": "N5153A",
        "color": "#C1AAF7",
        "india": "aaa",
        "value": 8,
        "idd": 21
      },
      {
        "bharat": "N5113A",
        "color": "#B2AA9C",
        "india": "nnn",
        "value": 8,
        "idd": 22
      },
      {
        "bharat": "N5113A",
        "color": "#736BA7",
        "india": "ttt",
        "value": 8,
        "idd": 24
      },
      {
        "bharat": "N5113A",
        "color": "#C1AAF7",
        "india": "aaa",
        "value": 8,
        "idd": 25
      },
      {
        "bharat": "N5153A",
        "color": "#A3E3F8",
        "india": "www",
        "value": 7,
        "idd": 28
      },
      {
        "bharat": "N5153A",
        "color": "#9FEFF2",
        "india": "ggg",
        "value": 4,
        "idd": 42
      },
      {
        "bharat": "N5113A",
        "color": "#66E27B",
        "india": "ccc",
        "value": 3,
        "idd": 53
      },
      {
        "bharat": "N5113A",
        "color": "#EAD3D8",
        "india": "nnn",
        "value": 2,
        "idd": 63
      },
      {
        "bharat": "N5153A",
        "color": "#7667DD",
        "india": "lll",
        "value": 2,
        "idd": 65
      },
      {
        "bharat": "N5153A",
        "color": "#66E27B",
        "india": "ccc",
        "value": 2,
        "idd": 70
      },
      {
        "bharat": "N5113A",
        "color": "#DAC3D2",
        "india": "llll",
        "value": 2,
        "idd": 79
      },
      {
        "bharat": "N5113A",
        "color": "#A3E3F8",
        "india": "www",
        "value": 2,
        "idd": 80
      },
      {
        "bharat": "N5113A",
        "color": "#9FEFF2",
        "india": "ggg",
        "value": 2,
        "idd": 83
      }
    ]
  },
  "width": 700,
  "height": 350,
  "mark": {"type": "bar", "stroke": "black"},
  "encoding": {
    "tooltip": [{"field": "bharat"}, {"field": "india"}, {"field": "value"}],
    "x": {"aggregate": "sum", "field": "value"},
    "order": {"sort": "descending", "field": "value"},
    "y": {"field": "bharat", "type": "nominal"},
    "color": {"field": "india", "scale": {"range": {"field": "color"}}}
  }
}