Why I can't add legend to my chart in vega? - vega

Question

this is my vega code, and I do write code to add legend to my pie chart, but it can't work. Could you please help me?
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 300,
"height": 300,
"autosize": "none", //put in my data
"signals": [
{
"name": "startAngle",
"value": 0,
"bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
"name": "endAngle",
"value": 6.29,
"bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
"name": "padAngle",
"value": 0,
"bind": {"input": "range", "min": 0, "max": 0.1}
},
{
"name": "innerRadius",
"value": 0,
"bind": {"input": "range", "min": 0, "max": 90, "step": 1}
},
{
"name": "cornerRadius",
"value": 0,
"bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
},
{"name": "sort", "value": false, "bind": {"input": "checkbox"}}
], //set the control bar
"data": [
{
"name": "table",
"values": [
{"id": "BenCarsonNumber", "field": 564553},
{"id": "BernieSanders", "field": 11958297},
{"id": "CarlyFiorina", "field": 15191},
{"id": "ChrisChristie", "field": 24353},
{"id": "DonaldTrump", "field": 13301237},
{"id": "HillaryClinton", "field": 15691617},
{"id": "JebBush", "field": 94411},
{"id": "JohnKasich", "field": 4159528},
{"id": "MarcoRubio", "field": 3320810},
{"id": "Malley", "field": 752},
{"id": "MikeHuckabee", "field": 3345},
{"id": "NoPreference", "field": 8152},
{"id": "RandPaul", "field": 8479},
{"id": "RickSantorum", "field": 1782},
{"id": "TedCruz", "field": 7602299},
{"id": "Uncommitted", "field": 43} //this is my data
],
"transform": [ //try to make a pie chart
{
"type": "pie",
"field": "field",
"startAngle": {"signal": "startAngle"},
"endAngle": {"signal": "endAngle"},
"sort": {"signal": "sort"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "id"},
"range": {"scheme": "category20"}
}
],
"legends": [ //there is my legend code
{
"stroke": "color",
"title": "Origin",
"encode": {
"symbols": {
"update": {
"fill": {"value": ""},
"strokeWidth": {"value": 2},
"size": {"value": 64}
}
}
}
}
],
"marks": [
{
"type": "arc",
"from": {"data": "table"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "id"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"padAngle": {"signal": "padAngle"},
"innerRadius": {"signal": "innerRadius"},
"outerRadius": {"signal": "width / 2"},
"cornerRadius": {"signal": "cornerRadius"}
}
}
}
]
}
everything works fine, expect there is no legend for the chart.
or If there is a better way to write a pie chart like this? but I can't come out with anything new. Please help me!
Thank you so much for helping!

Answer 1

You would need to update your legends section with "orient": "top-right".
Here's vega editor full spec
...
"legends": [
{ ....
"orient": "top-right",
....
}
],
...