Have you ever wanted to display multiple values in the same gauge card in Home Assistant? With the Dual Gauge card, you can! This is a great way to compare similar stats between two entities within the same card.
During my testing I was only able to get g
reen, blue, white, grey, and yellow to work whenever you specify a color in the yaml ( color: var(–label-badge-blue). However, if you use RGB colors you can customize these to your liking (
color: rgb(85,190,233) ) The easiest site I’ve found to choose custom RGB colors for this card is htmlcolorcodes.com.
I’ll show examples of dual gauge cards using both methods below.
Let’s get started!
How To Setup & Install Dual Gauge Card in Home Assistant
This is another HACS Lovelace integration, and can be installed just like any others you’ve setup. Just click HACS in your Home Assistant sidebar > Frontend > search for “Dual Gauge Card“.
Once installed, you won’t be able to add a card from the frontend UI. You will have to paste the code examples into a Manual Card. (Add Card > Manual). Then, just replace the entities.
unit: code specifies what is shown next to the number. You can use things like watts, percentage signs, symbols, etc.
label: block is the identifying name that goes below the number. This is where you’d add device name, room, person, CPU/RAM/GPU, etc.
If you just look at the yaml below you can see a few different ways I’ve utilized these. Note: Use shorter words and abbreviations so things don’t overlap.
Energy Usage (Watts)
If you are having fun with the new Energy Dashboard, you aren’t limited to just monitoring power there. You can use the Dual Gauge card to display the current power consumption of individual devices as well. I am monitoring two Peanut Plugs for this one which have their firmware updated OTA from within Home Assistant. Since my plugs rarely go over 10w of power usage, I set my max value to 20.
If you haven’t set up your Energy Dashboard yet, I highly recommend following my Energy Dashboard in Home Assistant guide.
type: custom:dual-gauge-card title: Power outer: entity: sensor.wife_nightstand_power unit: w label: Lamp inner: entity: sensor.danny_nightstand_power unit: w label: Plug min: 0 max: 20 colors: - color: rgb(85,190,233) value: 1 - color: rgb(143,233,85) value: 5 - color: rgb(85,233,199) value: 9 - color: rgb(157,233,85) value: 9.6
If you would like to display your Plex bandwidth stats in a dual gauge card, here’s the YAML you would use. If you would like to do the same, you can follow my Add Tautulli to Home Assistant guide to pull in these stats.
The “outer” ring displays the number of concurrent streams. At most, I have 3 people watching Plex at any given time so I’ve customized my
max: to 5, and also set different colors for each value.
The “inner” ring displays the total bandwidth used. Total bandwidth is usually no more than 15mbps, so I set the inner ring
max: to 20.
type: custom:dual-gauge-card title: Plex outer: entity: sensor.tautulli label: streams min: 0 max: 5 colors: - color: var(--label-badge-blue) value: 1 - color: var(--label-badge-green) value: 2 - color: var(--label-badge-red) value: 3 inner: entity: sensor.tautulli_total_bandwidth label: mbps min: 0 max: 15 colors: - color: var(--label-badge-blue) value: 1 - color: var(--label-badge-green) value: 9 - color: var(--label-badge-red) value: 12
Dual Gauge Card for Thermostat + Room Sensor
For this card, I am using my Ecobee Thermostat plus a separate sensor I have in my kitchen. Rather than specifying different colors for each sensor, I’m using the same min/max values
type: custom:dual-gauge-card title: Temp (°F) outer: entity: climate.my_ecobee attribute: current_temperature label: Main inner: entity: sensor.lil_bee_temperature label: Lil' Bee min: 65 max: 75 colors: - color: rgb(85,190,233) value: 65 - color: rgb(143,233,85) value: 70 - color: rgb(85,233,110) value: 72 - color: rgb(157,233,85) value: 74
Battery Level Dual Gauge Card
If you would like to compare the battery level of two devices such as cell phone batteries, you can also make use of the dual gauge card. I prefer using a Battery State Card to display batteries of everything in one collapsible card, but if you want to monitoring battery levels of just a couple devices, this is a really cool way to display it.
Since phone battery levels operate in percentages of 0-100%, that’s what I set my min/max values to. I am using the htmlcolorcodes.com website to specify RGB colors.
type: custom:dual-gauge-card title: Phone Battery outer: entity: sensor.pixel_3_wife_battery_level unit: '%' label: Wife inner: entity: sensor.pixel_5_danny_battery_level unit: '%' label: Danny min: 0 max: 100 colors: - color: 'rgb(233,103,85)' value: 25 - color: 'rgb(233,177,85 )' value: 50 - color: 'rgb(231,233,85)' value: 75 - color: 'rgb(157,233,85)' value: 90
Computer Hardware Utilization
If you would like to display your vrious computer stats, such as RAM, CPU usage, GPU usage, etc, you can also display that is a dual gauge card. I’m using HASS Workstation Service to pull in this data.
type: custom:dual-gauge-card title: PC (%) outer: entity: sensor.cpuload label: CPU inner: entity: sensor.memory label: RAM min: 0 max: 80 colors: - color: rgb(85,190,233) value: 1 - color: rgb(143,233,85) value: 25 - color: rgb(85,233,110) value: 50 - color: rgb(157,233,85) value: 70
Hopefully you guys found this tutorial useful with all of the included examples I’ve given!
Rather than using standard gauge cards (which can take up a lot of Lovelace dashboard real estate), this is a great way to view common values in a single card.
My Favorite Home Assistant Devices
Below are some of the Home Assistant-compatible devices I personally use in my home. I highly recommend each of them.
- Zwave/Zigbee hub: Nortek GoControl HUSBZB-1
- Smart Plugs: Sonoff S31 Lite Zigbee
- Motion Sensors: Hue Indoor Motion
- Outdoor Camera: Amcrest IP5M Turret
- Robot Vacuum: Roborock S7
The full list of all Home Assistant compatible & recommended devices I use can be found on my Equipment List page.