How to sort "legend" of pie chart created in vega-lite?

Question

I'm trying to sort a legend of a pie chart by the doc_count (the same way as the slices are sorted), but I can't find a way how to do this.

The desired order of the items in legend is:

c
f
e
b
a
d

(so sorted by doc_count)

Can someone help me, please? Thanks

Online vega editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with embedded data.",
  "width": "600",
  "data": {
    "values": [
      {"key": "a", "doc_count": 4},
      {"key": "b", "doc_count": 6},
      {"key": "c", "doc_count": 20},
      {"key": "d", "doc_count": 3},
      {"key": "e", "doc_count": 7},
      {"key": "f", "doc_count": 8}
    ]
  },
  "transform": [
    {
      "calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
      "as": "maybeLabel"
    },
    {
      "calculate": "datum.maybeLabel ? datum.maybeLabel + ' (' + datum.key + ')' : datum.key",
      "as": "label"
    },
    {
      "window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
      "frame": [null, null]
    },
    {
      "calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100) + ' %'",
      "as": "percents"
    }
  ],
  "layer": [
    {
      "mark": {"type": "arc", "outerRadius": 200},
      "encoding": {
        "color": {
          "field": "label",
          "type": "nominal",
          "legend": {"labelFontSize": 14},
          "sort": {"field": "doc_count"} // <- this does not work
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "fontWeight": "bold",
        "radius": 240
      },
      "encoding": {
        "text": {"field": "label", "type": "nominal"},
        "color": {"field": "label", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "text", "radius": 150, "fontSize": 13},
      "encoding": {
        "text": {"field": "percents", "type": "nominal"},
        "color": {"value": "white"}
      }
    }
  ],
  "encoding": {
    "theta": {"field": "doc_count", "type": "quantitative", "stack": true},
    "order": {
      "field": "doc_count",
      "type": "quantitative",
      "sort": "descending"
    },
    "tooltip": [
      {"field": "label", "type": "nominal"},
      {"field": "doc_count", "type": "quantitative"},
      {"field": "percents", "type": "nominal"}
    ]
  },
  "view": {"stroke": null}
}

Answer 1

Your changes were almost correct, you just missed to add sort order in color. Also repeat the sort in other layers as well which will resolve the sorting for you. Below is the snippet and editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with embedded data.",
  "width": "600",
  "data": {
    "values": [
      {"key": "a", "doc_count": 4},
      {"key": "b", "doc_count": 6},
      {"key": "c", "doc_count": 20},
      {"key": "d", "doc_count": 3},
      {"key": "e", "doc_count": 7},
      {"key": "f", "doc_count": 8}
    ]
  },
  "transform": [
    {
      "calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
      "as": "maybeLabel"
    },
    {
      "calculate": "datum.maybeLabel ? datum.maybeLabel + ' (' + datum.key + ')' : datum.key",
      "as": "label"
    },
    {
      "window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
      "frame": [null, null]
    },
    {
      "calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100) + ' %'",
      "as": "percents"
    }
  ],
  "layer": [
    {
      "mark": {"type": "arc", "outerRadius": 200},
      "encoding": {
        "color": {
          "field": "label",
          "type": "nominal",
          "legend": {"labelFontSize": 14},
          "sort": {"field": "doc_count", "order": "descending"}
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "fontWeight": "bold",
        "radius": 240
      },
      "encoding": {
        "text": {"field": "label", "type": "nominal"},
        "color": {
          "field": "label",
          "type": "nominal",
          "sort": {"field": "doc_count", "order": "descending"}
        }
      }
    },
    {
      "mark": {"type": "text", "color": "white", "radius": 150, "fontSize": 13},
      "encoding": {"text": {"field": "percents", "type": "nominal"}}
    }
  ],
  "encoding": {
    "theta": {"field": "doc_count", "type": "quantitative", "stack": true},
    "order": {
      "field": "doc_count",
      "type": "quantitative",
      "sort": "descending"
    },
    "tooltip": [
      {"field": "label", "type": "nominal"},
      {"field": "doc_count", "type": "quantitative"},
      {"field": "percents", "type": "nominal"}
    ]
  },
  "view": {"stroke": null}
}