Skip to content
Vega templates

Bullet chart

KPI vs target with comparative ranges.

Template previewVega
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}}}}
  ]
}