same issue here.
If it helps - try GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant
I used a radialBar chart type with semi circle gauge options as per Semi Circle Gauge Chart in React – ApexCharts.js
One downside is that it treats the values as a percentage of the max value (which can be set per data series)
Looks like:
1 Like
I’ll try, thanks. Seems pretty nice.
Any chance you could share the code for this?
Hi,
Installed Dual Gauge Card via HACS. Resourse is made by HACS, custom card is not visible on “+Add Card” list. I have re-installed card, cleared cache, reloaded page, but card does not become visible on list.
How can I add this card on dashboard? Does this card work with Chrome?
1 Like
I am not sure what you mean by this. Are you thinking the resource gets added automatically? If so, not according to the instructions GitHub - custom-cards/dual-gauge-card: Dual gauge custom card for Lovelace in Home Assistant
For those of you looking for example configs, I’ve created a few here to compare temperature, computer stats, Plex/Tautulli stats, phone battery levels, and power consumption:
3 Likes
HI All Im hoping for some help.
I know this is a user problem… and the answer is right in front of me but I just cant see it… How do I configure the card?
so done so far…
installed via HACS
read, reread, re-reread the instructions…
I know it says
In your ui-lovelace.yaml add this:
- url: /community_plugin/dual-gauge-card/dual-gauge-card.js
type: js
but um… I’ve looked, looked again… gone away, come back looked again… for the life of me I can’t see the ui-lovelace.yaml where is it??? I even searched the drive… no results found… I know the card has to work, people are using it! but I can’t for the life of me get past this small simple hurdle. please HELP 
I even thought… ok… maybe i missed something and its set by HACS on install… so, I copied the example setup, changed the sensors, min value and Max value… set a new custom card and pasted the info in… but nope… just a red/pink square with No Card Type Configured…
Edit:
in a last ditch attempt to sort this I went back, I looked at other working cards… and at this one. and I noticed something… I had copied
- type: custom:dual-gauge-card
title: Living room
min: 0
max: 300
outer:
entity: sensor.octoprint_tool_0_temperature
label: "Current"
unit: "°C"
inner:
entity: sensor.octoprint_tool_0_target
label: "Target"
unit: "°C"
colors:
- color: "var(--label-badge-red)"
value: 27.5
- color: "var(--label-badge-green)"
value: 25
- color: "var(--label-badge-yellow)"
value: 18
- color: "var(--label-badge-blue)"
value: 0
- color: "var(--paper-blue-400)"
value: -40
and it should have been
type: custom:dual-gauge-card
title: Living room
min: 0
max: 300
outer:
entity: sensor.octoprint_tool_0_temperature
label: Current
unit: °C
inner:
entity: sensor.octoprint_tool_0_target
label: Target
unit: °C
colors:
- color: var(--label-badge-red)
value: 225
- color: var(--label-badge-green)
value: 190
- color: var(--label-badge-yellow)
value: 50
- color: var(--label-badge-blue)
value: 0
it was the “-” and the indentation that was causing the problem…
hope that helps someone else
RDoull
3 Likes
Keep getting custom element doesn’t exist: dual-gauge-card.
Even though I got tons of other custom elements that work from that same folder. It’s the only one, so strange.
Just noticed in the js file it’s named: gauge-dual-card rather than dual-gauge-card
1 Like
It looks like, nobody found a solution for changing either the fond size or a possibility to „round“ a sensor value within the card.
The card is very nice but the possibility for a display therefore very limited.
Too bad.
I was having the same issue. The solution for me was actualy in the installation instruction 
. I went to settings-dashboards clicked the three dots in the top right corner and selected resources. Clicked ‘add resource’, pasted /community_plugin/dual-gauge-card/dual-gauge-card.js in the url box and selected JavaScript Module. The card now works.
I figured out how to display semi-circle gauge card. I did it by adding the following lines of code to the card’s configuration.
apex_config:
plotOptions:
radialBar:
startAngle: -90
endAngle: 90
This is how it looks after the changes.
1 Like
I think this is for ApexCharts, not dual gauge card?
Is there a way to show only one value?
Background: I have several similar dual gauges next to each other, however two out of many entities shown there have only one value so I would like to have them shown in the same way but only one value.
Thanks!
1 Like
Hi all
Found this is working to resize fonts:
- type: custom:dual-gauge-card
title: home
min: 0
max: 12000
card_mod:
style: |
ha-card {
.gauge-label-outer {
font-size: 0.9em !important;
}
.gauge-label-inner {
font-size: 0.9em !important;
}
.gauge-value {
font-size: 0.9em !important;
}
.gauge-value-outer {
font-size: 0.9em !important;
}
}
BUT this will be used to all dual-gauges on the page. how to use it only for 1 dual-gauge on the page…
Hello everyone,
I’m sure a lot of you have wanted to utilize this card in a Grid Card to put multiple Dual Gauges next to each other like so, I found a way to make them resize automatically using Card-Mod. Please let me know if anyone is interested in how I did it. 
1 Like
sure, alway want to learn smarter ways.
Yes please!
Sorry it took so long, I found that if you copy some of the code that’s for this dual-gauge-card and paste it in the grid card code editor, it allows you to adjust font and the size of everything.
Card mod is required and I’d also like to note that when you paste the code for one dual-gauge-card it automatically applies itself to every other dual gauge thats in that grid card.
square: false
type: grid
cards:
- type: custom:dual-gauge-card
title: Living Room
outer:
entity: sensor.living_room_temp_humidity_temperature
label: Temp
inner:
entity: sensor.living_room_temp_humidity_humidity
unit: null
label: RH
min: 0
max: 100
colors:
- color: rgb(0,185,255)
value: 1
- color: rgb(0,233,85)
value: 60
- color: rgb(255,145,0)
value: 80
- color: rgb(255,25,25)
value: 100
card_mod:
style: |
ha-card {
.gauge-dual-card {
--gauge-card-width:170px;
--outer-value: 10;
--inner-value: 30;
--outer-color: var(--primary-color);
--inner-color: var(--primary-color);
--gauge-background-color: var(--secondary-background-color);
width: var(--gauge-card-width);
padding: 1px;
box-sizing:border-box;
margin: 6px auto;
.gauge-title {
position: absolute;
bottom: 47%;
margin-bottom: 0.1em;
text-align: center;
width: 100%;
font-size: var(--title-font-size);
}
.gauge-label-outer {
font-size: 0.7em !important;
bottom: 47%;
}
.gauge-label-inner {
font-size: 0.7em !important;
bottom: 47%;
}
.gauge-value {
font-size: 0.7em !important;
bottom: 48%;
}
.gauge-value-outer {
font-size: 0.7em !important;
}
}
- type: custom:dual-gauge-card
square: false
columns: 1
rows: 1
title: Garage
outer:
entity: sensor.garage_temp_humidity_temperature
unit: F
label: Temp
inner:
entity: sensor.garage_temp_humidity_humidity
unit: null
label: RH
min: 0
max: 100
colors:
- color: rgb(0,185,255)
value: 1
- color: rgb(0,233,85)
value: 60
- color: rgb(255,145,0)
value: 80
- color: rgb(255,25,25)
value: 100
- type: custom:dual-gauge-card
title: Basement
outer:
entity: sensor.basement_temp_humidity_temperature
unit: F
label: Temp
inner:
entity: sensor.basement_temp_humidity_humidity
unit: null
label: RH
min: 0
max: 100
colors:
- color: rgb(0,185,255)
value: 1
- color: rgb(0,233,85)
value: 60
- color: rgb(255,145,0)
value: 80
- color: rgb(255,25,25)
value: 100
- type: custom:dual-gauge-card
title: Bedroom
outer:
entity: sensor.bedroom_temp_humidity_temperature
unit: F
label: Temp
inner:
entity: sensor.bedroom_temp_humidity_humidity
unit: null
label: RH
min: 0
max: 100
colors:
- color: rgb(0,185,255)
value: 1
- color: rgb(0,233,85)
value: 60
- color: rgb(255,145,0)
value: 80
- color: rgb(255,25,25)
value: 100
- type: custom:dual-gauge-card
title: Computer Room
outer:
entity: sensor.computer_room_temp_humidity_temperature
unit: F
label: Temp
inner:
entity: sensor.computer_room_temp_humidity_humidity
unit: null
label: RH
min: 0
max: 100
colors:
- color: rgb(0,185,255)
value: 1
- color: rgb(0,233,85)
value: 60
- color: rgb(255,145,0)
value: 80
- color: rgb(255,25,25)
value: 100
- type: custom:dual-gauge-card
title: Network
outer:
entity: sensor.network_temp_humidity_temperature
unit: F
label: Temp
inner:
entity: sensor.network_temp_humidity_humidity
unit: null
label: RH
min: 0
max: 100
colors:
- color: rgb(0,185,255)
value: 1
- color: rgb(0,233,85)
value: 60
- color: rgb(255,145,0)
value: 80
- color: rgb(255,25,25)
value: 100
columns: 2