hi wanted to share this beautiful radial bar chart I created using ApexCharts documentations Gradient Gauge Chart in React.js – ApexCharts.js
type: custom:apexcharts-card
header:
show: false
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
startAngle: -135
endAngle: 225
hollow:
margin: 0
size: 70%
background: '#fff'
position: front
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
offsetY: -25
show: true
color: '#888'
fontSize: 17px
value:
color: '#111'
fontSize: 36px
show: true
offsetY: 0
track:
background: '#fff'
strokeWidth: 67%
margin: 0
dropShadow:
enabled: true
top: -3
left: 0
blur: 4
opacity: 0.35
background:
enabled: true
fill:
type: gradient
gradient:
shadeIntensity: 1
type: horizontal
opacityFrom: 1
opacityTo: 1
colorStops:
- offset: 0
color: '#2adea8'
opacity: 1
- offset: 50
color: '#4e8cd6'
opacity: 1
stroke:
lineCap: round
legend:
show: false
series:
- entity: sensor.bedroom_climate_humidity
name: Humidity
official vs mine