I don’t see why config-template-card wouldn’t work, or if you only need it to change between a few hours_to_show, a couple conditional cards could work I guess?
I had get a quote issue, now it s work great
1 Like
Hi! Thank you for the awesome plugin! These graphs look gorgeous and very easy to setup.
I just have a small doubt.
Is it possible to force them to be square (1:1)?
Here’s my problem:
Thanks in advance 
1 Like
Thanks, great setup!
No that’s not possible, the gap between the state and the graph looks vey big in your screenshot, are you on the latest version of the card?
Thanks Karl for the reply!
Yes, I’m using version 0.9.2.
I stil couldn’t figure what was wrong but I did some small adjustments and replaced the graph for a button:
It still looks good!
1 Like
Hi,
I’m using the mini-graph-cards in combination with swiper cards to be able to swipe them to the sides and make better use of the available screen space on phones.
But I’m seeing a strange graphic/render glitch when I click on them to show the ‘points’ in the graph, the points do not align with the line graph, instead the graph seems to move to the side…
Example of the issue i see: https://youtu.be/3Z3QjD85HqU
card code:
cards:
- cards:
- elements:
- entity: device_tracker.yellowghost
hold_action: toggle
state_image:
01: /local/images/picture_card/location/01.png
02: /local/images/picture_card/location/02.png
03: /local/images/picture_card/location/03.png
04: /local/images/picture_card/location/04.png
05: /local/images/picture_card/location/05.png
06: /local/images/picture_card/location/06.png
07: /local/images/picture_card/location/07.png
08: /local/images/picture_card/location/08.png
09: /local/images/picture_card/location/09.png
style:
left: 50%
top: 86%
width: 90%
type: image
- entity: sensor.battery_level
style:
left: 8%
top: 64%
type: state-icon
- entity: sensor.battery_level
label_color: green
style:
left: 10%
top: 74.5%
type: state-label
- entity: sensor.battery_state
state_image:
Charging: /local/images/picture_card/charging.png
Full: /local/images/picture_card/1x1_clear.png
Not Charging: /local/images/picture_card/1x1_clear.png
style:
left: 85.5%
top: 75%
width: 25%
type: image
- entity: sensor.connection_type
state_image:
Cellular: /local/images/picture_card/4G.png
Wi-Fi: /local/images/picture_card/wifi.png
style:
left: 94%
top: 65%
width: 10%
type: image
image: /local/images/picture_card/martijn.png
style: |
ha-card {
border-radius: 10px;
color: #ffffff;
font-size: 14px;
type: picture-elements
- elements:
- entity: device_tracker.rineke
hold_action: toggle
state_image:
01: /local/images/picture_card/location/01.png
02: /local/images/picture_card/location/02.png
03: /local/images/picture_card/location/03.png
04: /local/images/picture_card/location/04.png
05: /local/images/picture_card/location/05.png
06: /local/images/picture_card/location/06.png
07: /local/images/picture_card/location/07.png
08: /local/images/picture_card/location/08.png
09: /local/images/picture_card/location/09.png
home: /local/images/picture_card/location/home.png
not_home: /local/images/picture_card/location/away.png
style:
left: 50%
top: 86%
width: 90%
type: image
- entity: sensor.battery_level_3
style:
left: 8%
top: 64%
theme: oxforddark
type: state-icon
- entity: sensor.battery_level_3
style:
left: 10%
top: 74.5%
theme: oxforddark
type: state-label
- entity: sensor.battery_state_3
state_image:
Charging: /local/images/picture_card/charging.png
Full: /local/images/picture_card/1x1_clear.png
Not Charging: /local/images/picture_card/1x1_clear.png
style:
left: 85.5%
top: 75%
width: 25%
type: image
- entity: sensor.connection_type_3
state_image:
Cellular: /local/images/picture_card/4G.png
Wi-Fi: /local/images/picture_card/wifi.png
style:
left: 94%
top: 65%
width: 10%
type: image
image: /local/images/picture_card/rineke.png
style: |
ha-card {
border-radius: 10px;
color: #ffffff;
font-size: 14px;
type: picture-elements
type: horizontal-stack
- color_thresholds:
- color: '#e8d195'
value: 0
- color: '#e8d195'
value: 100
- color: '#e895bc'
value: 150
- color: '#ff0000'
value: 200
entities:
- entity: sensor.computer_woonkamer_watts
show:
fill: true
points: true
state: true
icon: 'mdi:flash'
icon_adaptive_color: true
labels: true
name: Computer Woonkamer
name_adaptive_color: true
style: |
ha-card {
color: #FFFFFF;
border-radius: 10px;
font-variant: small-caps;
type: 'custom:mini-graph-card'
- color_thresholds:
- color: '#e8d195'
value: 0
- color: '#e8d195'
value: 100
- color: '#e895bc'
value: 150
- color: '#ff0000'
value: 200
entities:
- entity: sensor.computer_zolder_watts
show:
animate: true
fill: true
points: true
state: true
icon: 'mdi:flash'
icon_adaptive_color: true
labels: true
name: Computer Zolder (Red)
name_adaptive_color: true
style: |
ha-card {
color: #FFFFFF;
border-radius: 10px;
font-variant: small-caps;
type: 'custom:mini-graph-card'
- color_thresholds:
- color: '#e8d195'
value: 0
- color: '#e8d195'
value: 3100
- color: '#e895bc'
value: 600
- color: '#ff0000'
value: 1000
entities:
- entity: sensor.sfeerhaard_watts
show:
fill: true
points: true
state: true
icon: 'mdi:flash'
icon_adaptive_color: true
labels: true
name: Sfeerhaard
name_adaptive_color: true
style: |
ha-card {
color: #FFFFFF;
border-radius: 10px;
font-variant: small-caps;
type: 'custom:mini-graph-card'
- color_thresholds:
- color: '#e8d195'
value: 5
- color: '#e8d195'
value: 10
- color: '#58b0d5'
value: 15
- color: '#ff0000'
value: 20
entities:
- entity: sensor.shelly_dimmer_f3109a_power_0
show:
fill: true
points: false
state: true
icon: 'mdi:flash'
icon_adaptive_color: true
labels: true
name: Shelly Dimmer - Hanglamp Woonkamer
name_adaptive_color: true
style: |
ha-card {
color: #FFFFFF;
border-radius: 10px;
font-variant: small-caps;
type: 'custom:mini-graph-card'
- color_thresholds:
- color: '#e8d195'
value: 5
- color: '#e8d195'
value: 10
- color: '#58b0d5'
value: 15
- color: '#ff0000'
value: 20
entities:
- entity: sensor.shelly_dimmer_f3e9d1_power_0
show:
fill: true
points: false
state: true
icon: 'mdi:flash'
icon_adaptive_color: true
labels: true
name: Shelly Dimmer - Eettafel
name_adaptive_color: true
style: |
ha-card {
color: #FFFFFF;
border-radius: 10px;
type: 'custom:mini-graph-card'
- color_thresholds:
- color: '#e8d195'
value: 10
- color: '#e8d195'
value: 20
- color: '#58b0d5'
value: 25
- color: '#ff0000'
value: 30
entities:
- entity: sensor.woonkamer_temperatuur
show:
fill: true
points: false
state: true
icon: 'mdi:thermometer'
icon_adaptive_color: true
labels: true
name: Woonkamer Temperatuur
name_adaptive_color: true
style: |
ha-card {
color: #FFFFFF;
border-radius: 10px;
font-variant: small-caps;
type: 'custom:mini-graph-card'
- color_thresholds:
- color: '#e8d195'
value: 10
- color: '#e8d195'
value: 20
- color: '#58b0d5'
value: 25
- color: '#ff0000'
value: 30
entities:
- entity: sensor.hue_motion_sensor_1_temperature
show:
fill: true
points: false
state: true
icon: 'mdi:thermometer'
icon_adaptive_color: true
labels: true
name: Toilet Temperatuuur
name_adaptive_color: true
style: |
ha-card {
color: #FFFFFF;
border-radius: 8px;
type: 'custom:mini-graph-card'
parameters:
centeredSlides: true
coverflowEffect:
depth: 1000
modifier: 1
rotate: -200
slideShadows: true
stretch: -200
effect: coverflow
grabCursor: true
slidesPerView: auto
start_card: 1
type: 'custom:swipe-card'
Any idea what could cause this behaviour ?
Looks like the graph gets inverted, seems strange, only the graph is inverted and nothing else.
Try without the “fancy” effect on the swipe card.
Hi!
I want another line horizontally. I’m not a programmer and I don’t understand how.
cards:
- entities:
- entity: sensor.router_power
index: 0
font_size: 75
line_color: blue
line_width: 8
type: 'custom:mini-graph-card'
- entities:
- entity: sensor.j_power_0
index: 0
font_size: 75
line_color: '#e74c3c'
line_width: 8
type: 'custom:mini-graph-card'
- entities:
- entity: sensor.j_power
index: 0
font_size: 75
line_color: var(--accent-color)
line_width: 8
type: 'custom:mini-graph-card'
type: horizontal-stack
Narrowed it down to the IOS App, the inverting of the graphs only happens there. and only when i touch the screen (points: hover) It still happens when I take out the effects on the swipe card.
I remember reading someone else’s post about the graphs inverting, but I cant for the life of me find the post and/or the solution.
Okay, does it still happen if you don’t nest the it inside the swipe-card as well?
I’ve never seen the issue before.
Found the problem and am kindof embarrased I missed it, as it was infact the effects on the cards like you said. Thought I removed all the code for the effect from the card, but accidently left one line. Works fine without the effects. Thanks for taking your time to help 
Would still be cool to be able to use the effects, even though they’re a bit of a gimmick. But I suppose the issue lies in the swipe card and not the graph cards.
Simply add more entities as any of the three you already have
- entities:
- entity: sensor.great_power_great_responsabilities
index: 0
font_size: 75
line_color: var(--accent-color)
line_width: 8
type: 'custom:mini-graph-card'
If instead you meant inside the same graph, inside the entities simply add it:
- entities:
- entity: sensor.j_power
index: 0
- entity: sensor.great_power_great_responsabilities
index: 0
font_size: 75
line_color: var(--accent-color)
line_width: 8
type: 'custom:mini-graph-card'
TBH, I am not sure what “index: 0” does so I am not sure that might or not cause an issue with multiple entities.
Hi! thanks for the quick answer! I misspelled it (sorry). I would like to. so another line
Could you share your config for above?
1 Like
Hello everyone,
I really love mini-graph-card and I’m trying to use it in a lot of my pages.
I just have a question: is there a way to fill the card with more “graph”?
I tried upper_bound and lower_bound but most of the space of the card is pretty much empty.
Sure! This is a switch and three sensors in a horizontal stack:
cards:
- aspect_ratio: 1/1
color: 'rgba(25, 25, 25, 0.5)'
color_type: card
entity: switch.aquecedor
hold_action:
action: more-info
name: Aquecedor
state:
- color: 'rgb(255, 255, 255)'
icon: 'mdi:radiator'
value: 'on'
styles:
card:
- font-size: 12px
name:
- letter-spacing: 0.05em
type: 'custom:button-card'
- aspect_ratio: 1/1
color: 'rgba(25, 25, 25, 0.5)'
color_type: card
entity: sensor.temperature_8
show_icon: true
show_name: false
show_state: true
size: 27px
styles:
icon:
- letter-spacing: 0.05em
- padding-top: 16%
state:
- font-size: 18px
- font-weight: 300
- padding-bottom: 18%
tap_action:
action: more-info
type: 'custom:button-card'
- aspect_ratio: 1/1
color: 'rgba(25, 25, 25, 0.5)'
color_type: card
entity: sensor.humidity_9
icon: 'mdi:water'
show_icon: true
show_name: false
show_state: true
size: 30px
styles:
icon:
- letter-spacing: 0.05em
- padding-top: 16%
state:
- font-size: 18px
- font-weight: 300
- padding-bottom: 18%
tap_action:
action: more-info
type: 'custom:button-card'
- aspect_ratio: 1/1
color: 'rgba(25, 25, 25, 0.5)'
color_type: card
entity: sensor.temperatura
show_icon: true
show_name: false
show_state: true
size: 27px
styles:
icon:
- letter-spacing: 0.05em
- padding-top: 16%
state:
- font-size: 18px
- font-weight: 300
- padding-bottom: 18%
tap_action:
action: more-info
type: 'custom:button-card'
type: horizontal-stack
Hope this helps you!
1 Like
In that case simply copy the whole thing you pasted below it, and it will create a second row with the same entities, then change the entities to what you need 
Did you perhaps use the font_size options in those graphs? The white space doesn’t scale with them atm which they probably should.
There’s a height option that you can use to increase the height of the graph but that will still not eliminate the white space.
I’ve tried different font_size now that you mentioned and even without it, but still the cards mostly still look the same. (I’ve tried font_size = 10, same graph but now I can’t even see the label)
this is an example card I’m using
That’s was what I was trying to say, the gaps between elements (white space) doesn’t scale with the font size.