I was referring to pie chart examples of vega-lite.
I modified one of them to show percentage values as follows:
vegaEmbed("#pie-chart", {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with embedded data.",
"data": {
"values": [
{"category": 1, "value": 4},
{"category": 2, "value": 6},
{"category": 3, "value": 10},
{"category": 4, "value": 3},
{"category": 5, "value": 7},
{"category": 6, "value": 8}
]
},
"transform": [{"calculate": "datum.value + ' %'", "as": "label"}],
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal", "legend": null}
},
"layer": [
{
"mark": {"type": "arc"}
},
{
"mark": {"type": "text", "radius": 120},
"encoding": {
"text": {"field": "label", "type": "nominal"}
}
}
]
}
);<!DOCTYPE html> <html> <head> <title>Data visualizer</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/vega@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> </head> <body> <span id="pie-chart"></span> </body> </html>
This works perfectly and renders following:
However, I wanted those percentage labels in black color. So I referred text mark and tried following:
"mark": {"type": "text", "radius": 120, "color":"black"},
But this does not makes any changes to above output.
I also tried putting color as encoding:
{
"mark": {"type": "text", "radius": 120},
"encoding": {
"text": {"field": "label", "type": "nominal"},
"color": {"value":"black"}
}
}
But it rendered following:
What is going wrong here?
Advertisement
Answer
Try this.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with embedded data.",
"data": {
"values": [
{"category": 1, "value": 4},
{"category": 2, "value": 6},
{"category": 3, "value": 10},
{"category": 4, "value": 3},
{"category": 5, "value": 7},
{"category": 6, "value": 8}
]
},
"transform": [{"calculate": "datum.value + ' %'", "as": "label"}],
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal", "legend": null}
},
"layer": [
{
"mark": {"type": "arc"}
},
{
"mark": {"type": "text", "radius": 120, "fill":"black"},
"encoding": {
"text": {"field": "label", "type": "nominal"}
}
}
]
}