Bullet Chart

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220,270],"markers":[250]},
      {"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21,23],"markers":[26]},
      {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100,320],"markers":[550]},
      {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
      {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
    ]
  },
  "facet": {
    "row": {
      "field": "title", "type": "ordinal",
      "header": {"labelAngle": 0, "title": ""}
    }
  },
  "spec": {
    "layer": [{
      "mark": {"type": "bar", "color": "#eee"},
      "encoding": {
        "x": {
          "field": "ranges[2]", "type": "quantitative", "scale": {"nice": false},
          "title": null
        }
      }
    },{
      "mark": {"type": "bar", "color": "#ddd"},
      "encoding": {
        "x": {"field": "ranges[1]", "type": "quantitative"}
      }
    },{
      "mark": {"type": "bar", "color": "#ccc"},
      "encoding": {
        "x": {"field": "ranges[0]", "type": "quantitative"}
      }
    },{
      "mark": {"type": "bar", "color": "lightsteelblue", "size": 10},
      "encoding": {
        "x": {"field": "measures[1]", "type": "quantitative"}
      }
    },{
      "mark": {"type": "bar", "color": "steelblue", "size": 10},
      "encoding": {
        "x": {"field": "measures[0]", "type": "quantitative"}
      }
    },{
      "mark": {"type": "tick", "color": "black"},
      "encoding": {
        "x": {"field": "markers[0]", "type": "quantitative"}
      }
    }]
  },
  "resolve": {
    "scale": {
      "x": "independent"
    }
  },
  "config": {
    "tick": {"thickness": 2}
  }
}