Data label for aggregated data in Donut chart using Deneb Vega-lite - Power BI

Question

Good morning everybody, I am here asking for the problem that I could not solve for days. I draw 2 Donut charts that one is inside other using Deneb Vega-lite. The donut portion parts looks good, but the data label for outer donut. It is not showing that I wanted. I want to show 2 data labels for aggregated data, but it is showing 7 data labels for 7 data rows, respectively.

1/ My data is like:

Categories	Subcategpries	Values
A	Z1	100
A	Z3	10
A	Z4	70
B	Z1	70
B	Z2	80
B	Z3	250
B	Z4	10

2/ I have created 2 Donut charts that one is inside other using Deneb, show as below:

Multil-layer Donut

3/ There is my code:

{
  "data": {"name": "dataset"},
  "transform": [
    {
      "joinaggregate": [
        {
          "op": "sum",
          "field": "Values",
          "as": "Sum1"
        }
      ],
      "groupby": ["Categories"]
    }
  ],
  "encoding": {
    "theta": {
      "field": "Values",
      "type": "quantitative",
      "stack": true
    },
    "color": {
      "field": "Subcategories",
      "type": "nominal",
      "scale": {
        "range": [
          "#2E4374",
          "#4B527E",
          "#7C81AD",
          "#E5C3A6",
          "#496E87"
        ]
      },
      "legend": null
    },
    "order": {
      "field": "Categories",
      "type": "nominal",
      "sort": "ascending"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "arc",
        "innerRadius": 130,
        "outerRadius": 70,
        "strokeWidth": 0
      }
    },
    {
      "mark": {
        "type": "arc",
        "innerRadius": 200,
        "outerRadius": 140
      },
      "encoding": {
        "theta": {
          "field": "Values",
          "type": "quantitative",
          "stack": true,
          "aggregate": "sum"
        },
        "color": {
          "field": "Categories",
          "type": "nominal",
          "scale": {
            "range": [
              "#B4BDFF",
              "#83A2FF"
            ]
          },
          "legend": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": {
          "expr": "130 + (70 - 130) / 2"
        }
      },
      "encoding": {
        "text": {
          "field": "Values__formatted",
          "type": "quantitative"
        },
        "color": {"value": "white"}
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": {"expr": "170"}
      },
      "encoding": {
        "text": {
          "field": "Sum1",
          "type": "quantitative",
          "format": ".0f"

        },
        "color": {"value": "white"}
      }
    }
  ],
  "resolve": {
    "scale": {"color": "independent"}
  }
}

As you can see, data labels of outer Donut is also being partition by single Subcategories. But I want showing it as 2 data labels for aggregated values.

Answer 1

Try something like this:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple donut chart with aggregate labels",
  "data": {
    "values": [
      {"Categories": "A", "Subcategories": "Z1", "Values": 100},
      {"Categories": "A", "Subcategories": "Z3", "Values": 10},
      {"Categories": "A", "Subcategories": "Z4", "Values": 70},
      {"Categories": "B", "Subcategories": "Z1", "Values": 70},
      {"Categories": "B", "Subcategories": "Z2", "Values": 80},
      {"Categories": "B", "Subcategories": "Z3", "Values": 250},
      {"Categories": "B", "Subcategories": "Z4", "Values": 10}
    ]
  },
  "encoding": {
    "order": {"field": "Categories", "type": "nominal", "sort": "ascending"}
  },
  "layer": [
    {
      "transform": [
        {
          "aggregate": [{"op": "sum", "field": "Values", "as": "TotalValues"}],
          "groupby": ["Categories"]
        }
      ],
      "layer": [
        {
          "mark": {"type": "arc", "innerRadius": 200, "outerRadius": 140},
          "encoding": {
            "theta": {"field": "TotalValues", "type": "quantitative"},
            "color": {
              "field": "Categories",
              "type": "nominal",
              "scale": {"range": ["#B4BDFF", "#83A2FF"]},
              "legend": null
            }
          }
        },
        {
          "mark": {"type": "text", "radius": 165},
          "encoding": {
            "color": {
              "condition": {
                "test": {"field": "Categories", "equal": "A"},
                "value": "#000"
              },
              "value": "#FFF"
            },
            "text": {
              "field": "TotalValues",
              "type": "quantitative",
              "format": ".0f"
            },
            "theta": {
              "field": "TotalValues",
              "type": "quantitative",
              "stack": true
            }
          }
        }
      ]
    },
    {
      "layer": [
        {
          "mark": {"type": "arc", "innerRadius": 130, "outerRadius": 70},
          "encoding": {
            "theta": {"field": "Values", "type": "quantitative"},
            "color": {
              "field": "Subcategories",
              "type": "nominal",
              "scale": {
                "range": ["#2E4374", "#4B527E", "#7C81AD", "#E5C3A6", "#496E87"]
              },
              "legend": null
            }
          }
        },
        {
          "mark": {"type": "text", "radius": 95},
          "encoding": {
            "color": {
              "condition": {
                "test": {"field": "Subcategories", "equal": "Z4"},
                "value": "#000"
              },
              "value": "#FFF"
            },
            "text": {
              "field": "Values",
              "type": "quantitative",
              "format": ".0f"
            },
            "theta": {"field": "Values", "type": "quantitative", "stack": true}
          }
        }
      ]
    }
  ],
  "resolve": {"scale": {"color": "independent"}},
  "config": {"view": {"stroke": "transparent"}}
}

Answer 2

I fixed it myself. I added theta encoding with sum on text mark of Categories's Values

    {
  "data": {"name": "dataset"},
  "transform": [
    {
      "joinaggregate": [
        {
          "op": "sum",
          "field": "Values",
          "as": "Sum1"
        },
        {
          "op": "count",
          "as": "CategoryCount"
        }
      ],
      "groupby": ["Categories"]
    }
  ],
  "encoding": {
    "theta": {
      "field": "Values",
      "type": "quantitative",
      "stack": true
    },
    "color": {
      "field": "Subcategories",
      "type": "nominal",
      "scale": {
        "range": [
          "#2E4374",
          "#4B527E",
          "#7C81AD",
          "#E5C3A6",
          "#496E87"
        ]
      },
      "legend": null
    },
    "order": {
      "field": "Categories",
      "type": "nominal",
      "sort": "ascending"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "arc",
        "innerRadius": 130,
        "outerRadius": 70,
        "strokeWidth": 0
      }
    },
    {
      "mark": {
        "type": "arc",
        "innerRadius": 200,
        "outerRadius": 140
      },
      "encoding": {
        "theta": {
          "field": "Values",
          "type": "quantitative",
          "stack": true,
          "aggregate": "sum"
        },
        "color": {
          "field": "Categories",
          "type": "nominal",
          "scale": {
            "range": [
              "#B4BDFF",
              "#83A2FF"
            ]
          },
          "legend": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": {
          "expr": "130 + (70 - 130) / 2"
        }
      },
      "encoding": {
        "text": {
          "field": "Values__formatted",
          "type": "quantitative"
        },
        "color": {"value": "white"}
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": {"expr": "170"}
      },
      "encoding": {
        "text": {
          "field": "Sum1",
          "type": "quantitative",
          "format": ".0f"
        },
// Adding this part to aggregate the values of Categories to show
        "theta": {
          "field": "Values",
          "type": "quantitative",
          "stack": true,
          "aggregate": "sum"
        },
        "color": {"value": "white"}
      }
    }
  ],
  "resolve": {
    "scale": {"color": "independent"}
  }
}