I have this little graph representing a certain data set. As you can see in the code snippet, the text labels are currently displayed in the same color as the pie chart components themselves and are thus invisible when located within the pie chart (you can see this if you change
mark: {type: "text", radius: 70},
to
mark: {type: "text", radius: 120},
as the text labels will then be outside the area of the pie chart arc. Since I want the text labels to appear inside the arcs, I would like them to be black or white. Does anyone happen to know how I may achieve that?
vegaEmbed("#graph", {
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: {
values: [{
event: "a",
occurances: 28,
},
{
event: "b",
occurances: 3,
},
{
event: "c",
occurances: 1,
},
{
event: "d",
occurances: 3,
},
{
event: "e",
occurances: 1,
},
{
event: "f",
occurances: 10,
},
{
event: "g",
occurances: 2,
},
{
event: "h",
occurances: 1,
},
{
event: "k",
occurances: 1,
},
],
},
layer: [{
mark: {
type: "arc",
innerRadius: 50,
outerRadius: 100
},
},
{
mark: {
type: "text",
radius: 70
},
encoding: {
text: {
field: "occurances",
type: "quantitive"
},
},
},
],
mark: {
type: "arc",
innerRadius: 50,
outerRadius: 100
},
encoding: {
color: {
field: "event",
type: "nominal",
},
theta: {
field: "occurances",
type: "quantitative",
stack: true,
},
},
});<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>
<div id="graph"></div>Bring the entire encoding outside to keep it common for both layers and provide fill in mark text to apply some color.
Refer below code or editor link:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"event": "a", "occurances": 28},
{"event": "b", "occurances": 3},
{"event": "c", "occurances": 1},
{"event": "d", "occurances": 3},
{"event": "e", "occurances": 1},
{"event": "f", "occurances": 10},
{"event": "g", "occurances": 2},
{"event": "h", "occurances": 1},
{"event": "k", "occurances": 1}
]
},
"encoding": {
"color": {"field": "event", "type": "nominal"},
"theta": {"field": "occurances", "type": "quantitative", "stack": true}
},
"layer": [
{"mark": {"type": "arc", "innerRadius": 50, "outerRadius": 100}},
{
"mark": {"type": "text", "radius": 70, "fill": "black"},
"encoding": {"text": {"field": "occurances", "type": "quantitative"}}
}
]
}