Nice card, I’m using the following config
type: custom:modern-circular-gauge
entity: sensor.alfen_monthly_energy
name: EV Energy
height: 200
header_position: bottom
min: 0
max: 650
decimals: 0
unit: kWh
needle: false
show_icon: true
show_unit: true
show_header: true
show_state: true
smooth_segments: true
adaptive_state_color: true
adaptive_icon_color: true
icon: |-
{% if is_state('sensor.alfen_active_power_total_socket_1', '0') %}
mdi:car-off
{% else %}
mdi:car-electric
{% endif %}
gauge_foreground_style:
color: adaptive
width: 6
gauge_background_style:
width: 8
color: rgba(200,200,200,0.3)
segments:
- from: 0
color:
- 18
- 147
- 94
- from: 200
color:
- 244
- 228
- 0
- from: 400
color:
- 255
- 117
- 20
- from: 500
color:
- 222
- 49
- 99
secondary:
entity: sensor.alfen_yearly_energy
unit: kWh
min: 0
max: 3500
show_gauge: inner
state_size: small
needle: false
segments:
- from: 0
color:
- 18
- 147
- 94
- from: 1000
color:
- 244
- 228
- 0
- from: 2000
color:
- 255
- 117
- 20
- from: 2800
color:
- 222
- 49
- 99
adaptive_state_color: true
animation_speed: 500
style: |
ha-card {
margin: 5px;
border-radius: 12px;
background: var(--card-background-color);
}