vega-litevegavega-embedvega-lite-api

INDICATION LINE ON PIE CHART IN VEGALITE


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

enter image description here 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

enter image description here


Solution

  • 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.

    enter image description here

    {
      "$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"}
          }
        }
      ]
    }