I have searched through this topic but I can’t find the help I need.
My Apexcharts are montoring my PVSolar output and I have 2 issues.
(1) I want to show only the part of the day on the X axis betwween sensor.sunrise and the sensor.sunset, but I can’t figure how to do this. I have an annotated label which shows the positions on the x axis, which I found from another post and I can change the graph span and offset, but that requires a daily update.
(2) I have integrated Node-Red to give me all the sensors I need and I have set that to collect the data between sunrise and sunset, but the inverter collects the data starting at the previous days final energy, which then starts my graph for the current day at that point, which spoils the graph.
Is it possible to somehow stop that initial data being recorded so that it starts at 0
Can you provide me the card code please (formatted)
I once did a flex offset but need to find where it is…
Thank you here is my code
type: custom:config-template-card
entities:
- sensor.sunrise
- sensor.sunset
- sensor.sensor_mypv_energy
- sensor.sensor_mypv_power
card:
type: custom:apexcharts-card
graph_span: 13.5hrs
span:
start: day
offset: +6.5h
header:
show: true
show_states: true
title: ENERGY TODAY
all_series_config:
stroke_width: 2
type: area
float_precision: 0
apex_config:
annotations:
xaxis:
- x: ${new Date(states['sensor.sunrise'].state).getTime()}
label:
text: ☼
borderWidth: 0
style:
background: yellow
color: black
- x: ${new Date(states['sensor.sunset'].state).getTime()}
label:
text: ☾
borderWidth: 0
style:
background: blue
color: white
chart:
type: area
height: auto
foreColor: '#7B7B7B'
zoom:
type: x
enabled: true
autoScaleYaxis: true
toolbar:
show: true
autoSelected: zoom
tools:
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
stroke:
show: true
width: 3
curve: smooth
dataLabels:
enabled: true
xaxis:
tooltip:
enabled: false
legend:
show: false
grid:
borderColor: '#7B7B7B'
yaxis:
- id: Power
seriesName: Power
show: true
min: 0
max: auto
opposite: false
reversed: false
axisBorder:
color: '#FF1654'
show: true
axisTicks:
show: true
title:
text: Power
style:
color: '#4dac16'
legend:
show: false
- id: Energy
seriesName: Energy
show: true
min: 0
max: auto
opposite: true
axisBorder:
color: '#FF1654'
show: true
axisticks:
show: true
title:
text: Energy
style:
color: '#d4d11c'
tooltip:
x:
format: ddd dd MMM - HH:mm
series:
- color: rgb(30,176,19)
entity: sensor.sensor_mypv_power
name: Power
yaxis_id: Power
type: line
unit: Wh
group_by:
func: max
duration: 10 mins
extend_to: now
- color: rgb(180,244,75)
entity: sensor.sensor_mypv_energy
name: Energy
yaxis_id: Energy
type: area
extend_to: now
Am not familiar with this, will try tomorrow with my ‘card-templater’
Found some time but since I donot have the sunris/sunset so I had to tweak things for the power sensor and the rise/set… as a result you cannot blindly copy this but the concept is working
graph_span_template: calculates the hours between sunrise and sunset
offset_template: calculates the hours from midnight
[/quote]
type: custom:card-templater
card:
type: custom:apexcharts-card
graph_span_template: |
"{{ (( 0 - as_timestamp(state_attr('sun.sun', 'next_setting')) +
as_timestamp(state_attr('sun.sun', 'next_rising')))/3600) | int(0) }}h"
span:
start: day
offset_template: >-
+{{ ((as_timestamp(state_attr('sun.sun','next_rising')) -
as_timestamp(now().replace(hour=23,minute=59))) / 3600) | round(1) }}h
header:
show: true
title: testing
show_states: true
colorize_states: true
series:
- entity: sensor.linky_papp
curve: smooth
color: '#df6366'
type: line
opacity: 1
stroke_width: 2
offset: -24h
entities:
- entity: sensor.linky_pap
offset: -24h
Thanks, for taking the time to look at this.
It works nearly,
the Sunrise is correct but the sunset is at least an hour early
Many thanks for your help
Great, please mark my post as ‘resolution’ so others can benefit too (I hope)
Sorry just changed my post.
Bit of an issue with the sunset, which is a bit strange.
Just looking to see why
Its a bit strange, if I press the home button it shows a bit more of the graph and the bottom axis includes the time to sunset momentarily and then goes back to 18:00 (should be about 19:40 ish)
Nope I can’t get the sunset show and also the graph has stopped at 17:35, which is very odd as my duplicate, which is the before version has just finished at 19:40
I notice that your amendment also is constantly updating every second or so.
I already have the following sensors in HA maybe there is a different approach as there is no need to calculate the daylight hour range for example
entities:
- entity: sensor.sensor_sunrise (datetime)
- entity: sensor.sunrise (hrs ago)
- entity: sensor.sensor_sunset (datetime)
- entity: sensor.sunset (hrs ago)
- entity: sensor.daylight (number of hh:mm:ss)
- entity: binary_sensor.above_horizon (on/off)
Well, as I said, the concept it working so the rest is up to you 
The graph bases on live data, if one of the sensor updates, the graph should too, probably an option is to ‘average’ that out. There is a very large live post on apexcharts btw.
I redid all of this with the sensor.sunrise/set… for the annotations, I also can not get it to work with a template, rest seems fine to me
The sunrise is perfect.
The sunset ends at 17:00 hours exactly, hover it should be 19:50.
I will have a play around and see what I can come up with.
The 2nd issue, I realise the only way to solve that is to send 0Wh to the energy state on PVoutput at midnight, which is another project
Seems your graph span is not working then … did you use this below? And you can check in devtools > template if the provides the right value
graph_span_template: |
"{{ (( as_timestamp(states('sensor.sunset')) -
as_timestamp(states('sensor.sunrise')))/3600) | int(0) }}h"
Yes I did use that formula exactly and I have checked this in the devtools and the reult is 12hrs
However the picture below shows the actual daylight sensor 13:03:54 plus sunset and sunrise, so it is 1hr wrong.
I am thinking it must be possible to use the data from sensor.sunrise for the offset and sensor.daylight for the span
I made a mistake, INT does not round, so if the diff is 12.9 it will show 12
Use this
"{{ (( as_timestamp(states('sensor.sunset')) -
as_timestamp(states('sensor.sunrise')))/3600) | round(1) }}h"
Yes that works thank you, I did see that, but I thought well you know much more than I do, so you must be right.
I notice that the card refreshes at something like once a second, which I suppose is because it is using the tmestamp.
I have been trying to get my head around YAML, but in my younger more foolish days I got well stuck into Vis Basic, BBC micro machine language and html and now I am very old, (72), I find it difficult to learn new tricks, although I try to have crack at it myself, before asking for help.
Thanks for being patient with me. How do I mark this as a resolution?
I looked at the data again and for today (at least), it almost exactly ends at 20:00
7.22+12.77
My graph shows fine
1 Like
‘solution’ is in one of the grey icons underneath a post (sometimes it is not there… then leave it)
That’s absolutely correct and exactly what I wanted to show.
I think I will add a couple more traces, such as the voltage and the power from the grid now
Thanks very much for your help, now on to the next project which is ???
