Bullet chart
KPI vs target with comparative ranges.
Rendering…
Make it your own.
{
"$schema":"https://vega.github.io/schema/vega/v5.json",
"width":380,"height":100,"padding":10,
"data":[{"name":"d","values":[
{"label":"Q1 ARR","value":72,"target":80,"ranges":[40,60,90]}
]}],
"scales":[{"name":"x","type":"linear","range":"width","domain":[0,100]}],
"axes":[{"orient":"bottom","scale":"x"}],
"marks":[
{"type":"rect","from":{"data":"d"},
"encode":{"enter":{"x":{"value":0},"x2":{"scale":"x","field":"ranges[0]"},"y":{"value":20},"y2":{"value":70},"fill":{"value":"#cbd5e1"}}}},
{"type":"rect","from":{"data":"d"},
"encode":{"enter":{"x":{"scale":"x","field":"ranges[0]"},"x2":{"scale":"x","field":"ranges[1]"},"y":{"value":20},"y2":{"value":70},"fill":{"value":"#94a3b8"}}}},
{"type":"rect","from":{"data":"d"},
"encode":{"enter":{"x":{"scale":"x","field":"ranges[1]"},"x2":{"scale":"x","field":"ranges[2]"},"y":{"value":20},"y2":{"value":70},"fill":{"value":"#64748b"}}}},
{"type":"rect","from":{"data":"d"},
"encode":{"enter":{"x":{"value":0},"x2":{"scale":"x","field":"value"},"y":{"value":36},"y2":{"value":54},"fill":{"value":"#0ea5e9"}}}},
{"type":"rule","from":{"data":"d"},
"encode":{"enter":{"x":{"scale":"x","field":"target"},"x2":{"scale":"x","field":"target"},"y":{"value":18},"y2":{"value":72},"stroke":{"value":"#ef4444"},"strokeWidth":{"value":2}}}}
]
}