How do you create a partial pie chart on vega-lite for single data point?

Question

I am using vega-lite to create a pie chart (on Airtable). I have a single data point, which is a target set by me, and the percentage complete for that target. For example, as below:

{
        "Target": "Get 10 customers",
        "Percentage complete": "60"
}

I would like to make a pie chart that is 60% complete, and the rest empty. Similar to the interactive single arc pie chart displayed https://vega.github.io/vega-lite/docs/arc.html.

My code currently looks like this

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Customer Acquired",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {
        "Target": "Get 10 customers",
        "Percentage complete": "60"
      }
  ]},
  "mark": {
    "type": "arc",
    "tooltip": true
  },
  "encoding": {
    "theta": {
      "field": "Percentage complete",
      "type": "quantitative"
    }
  }
}

And my pie chart currently just looks like this:

I realise I could force the pie chart to appear the way I want it by manually setting the theta2 property like so

"mark": {
    "type": "arc",
    "tooltip": true,
    "theta2": 3.5
}

However I don't know what the "Percentage complete" field will be and this value may change often, so I would rather not have to do it manually. Is this at all possible with vega-lite?

score 2 · Accepted Answer · answered Feb 11 '21 at 21:03

The domain for the theta encoding will automatically be set to the minimum and maximum of your input data. To show the correct portion of the chart, you need to set the domain to [0, 100]:

  "encoding": {
    "theta": {
      "field": "Percentage complete",
      "type": "quantitative",
      "scale": {"domain": [0, 100]}
    }
  }

You can view the resulting chart in the vega editor:

How do you create a partial pie chart on vega-lite for single data point?

1 Answers1