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 ?