Gauge + Bullet (KPI panel)
Two-row KPI panel — speedometer gauge and progress bullet.
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}}
}