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 ??
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"}
}
}
]
}