Hello everyone,
following @RomRider’s advice (see #802), I have created vertical lines for sunrise and sunset using the config-template-card.
Since the chart continuously shows the last 25 hours, I have not only integrated the sunrise / sunset lines of the current day (today), but also those of the previous day (yesterday).
However, the chart also includes events that lie just outside the chart span. For example, sunsets on the right-hand side that are about one hour in the future (and therefore not in the chart), or yesterday’s events that are already 26 hours in the past (in a 25h chart), which cross my y-axis on the left side…
Is there a way to prevent these events from being drawn outside the actual chart span?
Here is my code and two screenshots of what it looks like. (P.S. The curve shows the outside temperature, the blue bars in the background show rain phases).
Thanks for any suggestions,
Hannah
type: custom:config-template-card
entities:
- sensor.sunset
- sensor.sunrise
- sensor.sunset_yesterday
- sensor.sunrise_yesterday
- sensor.esp_garagendach_temperatur_auen_1
- switch.shelly_plus1_regenmelder
card:
type: custom:apexcharts-card
graph_span: 25h
span:
end: hour
header:
title: Außentemperatur
show: true
show_states: true
colorize_states: true
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 4
- id: second
opposite: true
show: false
series:
- entity: sensor.esp_garagendach_temperatur_auen_1
yaxis_id: first
curve: smooth
name: Außentemperatur
unit: °C
stroke_width: 3
fill_raw: last
group_by:
func: avg
duration: 5min
show:
name_in_header: false
- entity: switch.shelly_plus1_regenmelder
transform: 'return x === ''on'' ? 1 : 0;'
yaxis_id: second
curve: stepline
stroke_width: 0
opacity: 0.2
type: area
show:
in_header: false
apex_config:
legend:
show: false
annotations:
xaxis:
- x: ${new Date(states['sensor.sunrise'].state).getTime()}
label:
text: >-
${"☀️ " + new Date(new
Date(states['sensor.sunrise'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunset'].state).getTime()}
label:
text: >-
${"🌙 " + new Date(new
Date(states['sensor.sunset'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunrise_yesterday'].state).getTime()}
label:
text: >-
${"☀️ " + new Date(new
Date(states['sensor.sunrise_yesterday'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunset_yesterday'].state).getTime()}
label:
text: >-
${"🌙 " + new Date(new
Date(states['sensor.sunset_yesterday'].state).getTime()).toLocaleTimeString([],{hour:'2-digit',
minute:'2-digit'})}
borderWidth: 0
style:
background: '#0000'
xaxis:
tickAmount: 5
labels:
format: HH