Unit Chart Progess Bar

Question

Does anyone know how I can change a Progress Bar chart to a Unit Chart Progress Bar (ideally with units of 10). Similar to the pic show below:

{
  "width": 300,
  "height": {"step": 30},
  "data": {
    "values": [
      {"region": "Central", "achieved": 0.218, "remaining": 0.782},
      {"region": "East", "achieved": 0.295, "remaining": 0.705},
      {"region": "West", "achieved": 0.171, "remaining": 0.829},
      {"region": "South", "achieved": 0.316, "remaining": 0.684}
    ]

  },
  "transform": [
    {"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
  ],
  "mark": "bar",
  "encoding": {
    "y": {"field": "region", "type": "nominal"},
    "x": {
      "field": "percentage",
      "type": "quantitative",
      "axis": null
    },
    "color": {"field": "label", "type": "nominal", 
    "scale": {"range": ["blue", "lightgrey"]}
}
  }
}

Hi David, Thanks for the comment. I was unaware that this was the recommended process for this forum. I have marked as solved, and upvoted where possible on all of my previous questions. — steve257, Dec 26 '22 at 10:51

score 3 · Accepted Answer · answered Dec 26 '22 at 11:23

The following should get you most of the way there.

{
  "width": 300,
  "height": 180,
  "view": {"strokeWidth": 0},
  "data": {
    "values": [
      {"region": "Central", "achieved": 0.218, "remaining": 0.782},
      {"region": "East", "achieved": 0.295, "remaining": 0.705},
      {"region": "West", "achieved": 0.171, "remaining": 0.829},
      {"region": "South", "achieved": 0.316, "remaining": 0.684}
    ]
  },
  "transform": [
    {"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
  ],
  "encoding": {
    "y": {
      "field": "region",
      "type": "nominal",
      "title": null,
      "axis": {
        "domain": false,
        "ticks": false,
        "labelPadding": 60,
        "labelColor": "grey"
      }
    },
    "x": {"field": "percentage", "type": "quantitative", "axis": null},
    "color": {
      "legend": null,
      "field": "label",
      "type": "nominal",
      "scale": {"range": ["#b5adaa", "#d9d9d9"]}
    }
  },
  "layer": [
    {"mark": {"type": "bar", "height": {"band": 0.3}}},
    {
      "mark": {"type": "text", "xOffset": -25},
      "encoding": {
        "x": {"value": 0},
        "text": {"field": "percentage", "format": ".2%"},
        "color": {
          "condition": {
            "test": "datum.label == 'remaining'",
            "value": "transparent"
          },
          "value": "grey"
        }
      }
    },
    {
      "mark": {"type": "rule", "strokeWidth": 5},
      "data": {
        "values": [
          {"x": 0.1},
          {"x": 0.2},
          {"x": 0.3},
          {"x": 0.4},
          {"x": 0.5},
          {"x": 0.6},
          {"x": 0.7},
          {"x": 0.8},
          {"x": 0.9}
        ]
      },
      "encoding": {
        "x": {"field": "x", "type": "quantitative", "axis": null},
        "y": {},
        "color": {"value": "white"}
      }
    }
  ]
}

Unit Chart Progess Bar

1 Answers1