Search code examples
powerbivisualizationvega-litevegadeneb

Vega Lite - problem with value labels in Pie chart

I'm in the process of creating an interactive pie/donut chart using Vega Lite. I'm nearly finished, except for an issue with the placement of value labels around the pie chart's slices. They seem to be scattered randomly, and I'm struggling to determine the correct setup for the {"mark": "text"} section of my code.

Here is a shortened version of my code:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data.",
  "data": {
    "values": [
      {"category": "b", "value": 4},
      {"category": "a", "value": 6},
      {"category": "f", "value": 10},
      {"category": "e", "value": 3},
      {"category": "c", "value": 7},
      {"category": "d", "value": 8}
    ]
  },
  "layer": [
    {
      "params": [
        {
          "name": "highlight",
          "select": {
            "type": "point",
            "on": "mouseover"
          }
        }
      ],
      "mark": {
        "type": "arc",
        "stroke": "white",
        "cursor": "pointer"
      },
      "encoding": {
        "theta": {
          "field": "value",
          "type": "quantitative"
        },
        "tooltip": [
          {
            "field": "value",
            "title": "Participation %"
          }
        ],
        "color": {
          "field": "category",
          "type": "nominal",
          "scale": {
            "range": [
              "orange",
              "brown",
              "red",
              "gray",
              "lightgray",
              "azure"
            ]
          },
          "sort": {
            "field": "value",
            "order": "descending"
          }
        },
        "order": {
          "field": "value",
          "type": "quantitative",
          "sort": "descending"
        },
        "fillOpacity": {
          "condition": [
            {
              "param": "highlight",
              "value": 1
            }
          ],
          "value": 0.3
        },
        "strokeWidth": {
          "condition": [
            {
              "param": "highlight",
              "empty": false,
              "value": 5
            }
          ],
          "value": 0
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": 90
      },
      "encoding": {
        "theta": {
          "field": "value",
          "type": "quantitative"
        },
        "text": {
          "field": "category",
          "type": "quantitative"
        }
      }
    }
  ]
}

Has anyone else encountered a similar problem and discovered a workaround? Your assistance is greatly appreciated. Thank you!

Solution

  • Like this?

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data.",
  "data": {
    "values": [
      {"category": "b", "value": 4},
      {"category": "a", "value": 6},
      {"category": "f", "value": 10},
      {"category": "e", "value": 3},
      {"category": "c", "value": 7},
      {"category": "d", "value": 8}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "order": {"field": "value", "type": "quantitative", "sort": "descending"}
  },
  "layer": [
    {
      "params": [
        {"name": "highlight", "select": {"type": "point", "on": "mouseover"}}
      ],
      "mark": {"type": "arc", "stroke": "white", "cursor": "pointer"},
      "encoding": {
        "tooltip": [{"field": "value", "title": "Participation %"}],
        "color": {
          "field": "category",
          "type": "nominal",
          "scale": {
            "range": ["orange", "brown", "red", "gray", "lightgray", "azure"]
          },
          "sort": {"field": "value", "order": "descending"}
        },
        "fillOpacity": {
          "condition": [{"param": "highlight", "value": 1}],
          "value": 0.3
        },
        "strokeWidth": {
          "condition": [{"param": "highlight", "empty": false, "value": 5}],
          "value": 0
        }
      }
    },
    {
      "mark": {"type": "text", "radius": 90},
      "encoding": {"text": {"field": "value", "type": "quantitative"}}
    }
  ]
}