Having black coloured labels for pie chart in vega lite

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"}
      }
    }
  ]
}
);

JavaScript
​x
 
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>

JavaScript
 
<!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"},

JavaScript
 
"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"}
  }
}

JavaScript
 
{
  "mark": {"type": "text", "radius": 120},
  "encoding": {
    "text": {"field": "label", "type": "nominal"},
    "color": {"value":"black"}
  }
}
​

But it rendered following:

What is going wrong here?

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

JavaScript
 
{
  "$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"}
      }
    }
  ]
}
​

Advertisement

Answer