Search code examples
javascriptchartsvega-litevegaairtable

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

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: enter image description here

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?

Solution

  • 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: enter image description here