CODEWITHSUNDEEP
vega-lite
steve257
steve257

Reputation: 77

How do I create a Progress Bar in vega-lite?

Could someone please show me how to create a simple Progress Bar in vega-lite using the following data? Thanks in advance.

SEGMENT ACHIEVED REMAINING
Enterprise 73.1% 26.9%

Upvotes: 1

Views: 412

Answers (1)

jakevdp
jakevdp

Reputation: 86310

If I'm understanding your question correctly, you can do something like this (view in editor):

{
  "data": {
    "values": [{"segment": "Enterprise", "achieved": 0.731, "remaining": 0.269}]
  },
  "transform": [
    {"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
  ],
  "mark": "bar",
  "encoding": {
    "y": {"field": "segment", "type": "nominal"},
    "x": {
      "field": "percentage",
      "type": "quantitative",
      "axis": {"format": ".0%"}
    },
    "color": {"field": "label", "type": "nominal"}
  }
}

enter image description here

Upvotes: 2

Related Questions