or you can use apache echarts grafana plugin
const onOffStatus = data.series[0].fields[0].values.buffer[0]
let dasImage = onOffStatus === 'True' ?
'data:image/svg+xml;base64,YOUR_BASE64_SVG_TOKEN_FOR_OPEN' :
'data:image/svg+xml;base64,YOUR_BASE64_SVG_TOKEN_FOR_CLOSED'
return {
xAxis: { show: false },
yAxis: { show: false },
series: [
{
type: 'image',
startAngle: 200,
endAngle: -20,
center: ['50%', '70%'],
axisLine: {
lineStyle: {
width: 8,
color: [
[0.3, 'red'],
[0.7, 'orange'],
[1, '#96BE0F']
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -15,
length: 5,
lineStyle: {
color: '#fff',
width: 1
}
},
splitLine: {
distance: -15,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {
color: 'auto',
distance: -20,
fontSize: 12
},
detail: {
valueAnimation: true,
formatter: '{value} %',
color: 'auto'
},
data: [50]
}
],
graphic: {
type: 'image',
left: 'center',
bottom: 350,
offsetCenter: [0, '-60%'],
style: {
image: dasImage,
width: 480
}
}
};