INDICATION LINE ON PIE CHART IN VEGALITE

Question

i am trying to create a chart like this but not getting any idea how i make line between from pie to text in vegalite . any example or link that help share please

i am tryng to use vegalite internal data from in data viewer but not getting , any other way ??

i am using this chart and their data

Answer 1

This was a fun challenge. Here I have just added a text unichar mark "-" but you could easily change this for another text marks also. The challenge here was to rotate the text marks based on the position of the pie section.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4},
      {"category": "b", "value": 6},
      {"category": "c", "value": 10},
      {"category": "d", "value": 3},
      {"category": "e", "value": 7},
      {"category": "f", "value": 8}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [
    {
      "transform": [
        {"joinaggregate": [{"op": "sum", "field": "value", "as": "total"}]},
        {
          "sort": [{"field": "category"}],
          "window": [{"op": "sum", "field": "value", "as": "Cumulat"}],
          "frame": [null, 0]
        },
        {
          "calculate": "(360* ((datum.Cumulat-(datum.value*.5)) / datum.total))-90",
          "as": "percentage"
        }
      ],
      "mark": {
        "type": "text",
        "radius": 75,
        "angle": {"expr": "datum.percentage"}
      },
      "encoding": {
        "text": {"value": "————"},
        "color": {"field": "category", "type": "nominal", "legend": null}
      }
    },
    {"mark": {"type": "arc", "outerRadius": 80}},
    {
      "mark": {"type": "text", "radius": 105},
      "encoding": {
        "text": {"field": "category", "type": "nominal"},
        "color": {"value": "black"}
      }
    }
  ]
}