Search code examples
vega-lite

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%

Solution

  • 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