Skip to content
Plotly templates

Gauge + Bullet (KPI panel)

Two-row KPI panel — speedometer gauge and progress bullet.

Template previewPlotly
Rendering…

Make it your own.

{
  "data": [
    { "type":"indicator","mode":"gauge+number","value":78,
      "title":{"text":"Service uptime SLA","font":{"size":14}},
      "gauge":{
        "axis":{"range":[0,100]},
        "bar":{"color":"#3666ff"},
        "steps":[{"range":[0,90],"color":"#fee2e2"},{"range":[90,99],"color":"#fef3c7"},{"range":[99,100],"color":"#dcfce7"}],
        "threshold":{"line":{"color":"#16a34a","width":3},"value":99}
      },
      "domain":{"row":0,"column":0}
    },
    { "type":"indicator","mode":"number+delta+gauge","value":1.2,
      "title":{"text":"Quarterly revenue ($M)","font":{"size":14}},
      "delta":{"reference":1.0,"relative":true,"valueformat":".1%"},
      "gauge":{"shape":"bullet","axis":{"range":[0,1.5]},"bar":{"color":"#16a34a"},
        "threshold":{"line":{"color":"#dc2626","width":2},"value":1.0}},
      "domain":{"row":1,"column":0}
    }
  ],
  "layout":{"grid":{"rows":2,"columns":1,"pattern":"independent"},"height":360,"margin":{"t":40}}
}