Hello
Is it possible to create on-the-fly sum from several sensors?
I have sensors providing energy injected and purchased into/from grid in 15-minutes intervals, for each phase. Roughly it looks like on screenshot below.
I would like to add another graph, probably line one (the best if could be on top of that one) summing injected and purchased energy for each phase in those intervals, and then suming all those 3 resuls.
So general formula would be: injA-purchA + (injB-purchB) + (injC-purchC)
The goal is to get final value of energy in 15-min intervals on the graph.
Check Out My ApexCharts Setup for Temperature and Humidity!
I’m excited to share my customized ApexCharts graphs that bring my Home Assistant dashboard to life. Here’s what makes them awesome:
Temperature Chart:
Displays inside and outside temperatures.
Includes the heating setting of the radiator (green line) for better insights into your climate control.
Humidity Chart:
Shows both inside and outside humidity.
Highlights the absolute water content difference between indoor and outdoor air for a deeper understanding of air quality.
Additional Features on Both Charts:
Tracks sun position (yellow) to show daylight hours.
Marks nighttime (purple) for clear visual cues.
Logs open window time (grey) for added context on ventilation habits.
ISSUE
I have an issue with the Columns. Only the Stroke is rendered but not the filling.
When I remove the color_threshold of the first series then the columns are rendered full.
Future Plans:
I’d love to add a 4-hour preview to estimate future trends based on historical data from the same time on the previous day. Does anyone know how to achieve this? I’d greatly appreciate any tips or direction on where to start!
Let me know what you think, and feel free to share your ideas for improvements!
I created utility meter with 15min resets, to be able to display chart of 15min consumption for the past day. I can nicely group the data and use the last function to get the top value.
To get the hourly, there are somewhat 2 options, either by creating a new utility meter sensor with hourly reset or to sum 4 tops of 15-min sensors. I’m exploring the option nr.2
For that I used the second entry with group by but I used the sum function:
Hello guys, I read all the help but I can’t find the solution:
I plot my inverter generated energy values coming from a sensor created from an online json:
-the state is the total generated
-the attributes contain the total generated by week (date,value)
Any way to show the status (total value) for example in the header-title?
I would like to achieve something like:
where the N/A shows the total value of the bars already present in the state of the sensor
Thanks
Update:
I’m trying to use this workaround but it seems to me there is a bug:
I added a second entity just to grab the “state” value of the sensor containing the total value (as you can see in the screenshot it correctly contains 35.58…)
then I hide it from the chart and only enable the view in the header
it magically shows a value but wrong… 30.6 that was the value of yesterday, seems to be in the cache and not updated with the other values…
- type: custom:config-template-card
variables:
- states['input_select.climate_room'].state
- states['input_number.target_temp_high'].state
- states['input_number.target_temp_low'].state
- states['input_boolean.temp_overlay'].state
- states['weather.pirateweather'].attributes.temperature
entities:
- input_select.climate_room
- input_number.target_temp_high
- input_number.target_temp_low
- input_boolean.temp_overlay
- weather.pirateweather
card:
type: custom:apexcharts-card
graph_span: 24h
now:
show: true
color: "#87ceeb"
label: Aktuell
update_interval: 1m
yaxis:
- id: first # identification name of the first y-axis
decimals: 0
min: "${vars[3] === 'on' ? parseFloat(vars[4]) - 3 : parseFloat(vars[2]) - 3 }"
max: "${parseFloat(vars[1]) + 3}"
apex_config:
tickAmount: 2
labels:
formatter: |
EVAL:function (value) {
return Math.round(value) + ' °';
}
style:
fontFamily: Montserrat
all_series_config:
stroke_width: 2
series:
- entity: sensor.bedroom_temperature
name: Schlafen
yaxis_id: first
opacity: "${vars[0] === 'Schlafen' ? 1.0 : 0.1}"
fill_raw: last
group_by:
func: raw
- entity: sensor.main_room_temperature
name: Wohnen
yaxis_id: first
opacity: "${vars[0] === 'Wohnen' ? 1.0 : 0.1}"
fill_raw: last
group_by:
func: raw
- entity: sensor.guest_room_temperature
name: Gast
yaxis_id: first
opacity: "${vars[0] === 'Gast' ? 1.0 : 0.1}"
fill_raw: last
group_by:
func: raw
- entity: sensor.average_temperature
name: All
yaxis_id: first
opacity: "${vars[0] === 'All' ? 1.0 : 0}"
fill_raw: last
group_by:
func: raw
show:
in_legend: false
curve: smooth
- entity: weather.pirateweather
attribute: temperature
yaxis_id: first
opacity: "${vars[3] === 'on' ? 1.0 : 0}"
group_by:
func: avg
duration: 1h
show:
in_legend: false
apex_config:
annotations:
yaxis:
- 'y': ${vars[2]}
strokeDashArray: 5
borderColor: blue
- 'y': ${vars[1]}
strokeDashArray: 5
borderColor: red
legend:
position: top # Move the legend to the top
horizontalAlign: center # Center the legend at the top
fontSize: 12px # Adjust the font size of the legend
offsetY: 12
fontFamily: Montserrat
itemMargin:
horizontal: 2 # Add horizontal margin to items if needed
chart:
height: "250rem"
padding: 12
grid:
show: true
yaxis:
lines:
show: true # To display horizontal gridlines
borderColor: var(--color-dark-gray) # Customize the color of the gridlines
strokeDashArray: 0 # Customize the dash of the gridlines (use 0 for solid lines)
xaxis:
labels:
formatter: |
EVAL:function(value) {
const date = new Date(value);
const hours = date.getHours();
const suffix = hours >= 12 ? 'pm' : 'am';
const formattedHours = hours % 12 || 12;
return hours % 4 === 0 ? formattedHours + suffix : '';
}
style:
fontFamily: Montserrat
Question: The “now” badge shows all the way at the end of the graph, naturally. Is there a way that I can have the current states (end of graphs) display somewhere at the 80% marker and then only move the x-axis values along. Meaning that “now” stays where it is and the graphs move to the left, if you know what I mean. That would make reading the temps a lot easier.
Is forceNiceScale not working anymore? I had good looking scales before but somewhere along the way they are not that “even” (5, 10, 15…) anymore. Looks like the “~” is what is messing with it. If I change 50 to 80 below in the code for the bottom left graph then it looks good again.
Try to Use ‘offset’, there are multiple examples on where and how to apply in the documentation. Or add below so the left side will start at 00:00 and show a whole day
1.) I managed to get a line for Sunrise, Noon and Sunset
but the offset is in Pixel – percentage does not work
But I like the text to be more at the bottom of the graph closer to the yellow elevation of the sun. So how can I move it and still be able to display the graph in different sizes.
2.) The Area that shows the “Open Window” could have some icons or Text too like the sunrise and Sunset.
its a binary window sensor and I do not know yet how to get the annotations for it.
I have a weird problem with my radial chart … it diesnt seem to be showing the correct percentage on the radial bars.
I have a normal bar graph that shows the actual values of the sensor … it can be seen below
Now when you look at the bar graph you can see so far today its been say approx 16 hours out of 24. My school arithmetic states that’s approx 67%. If we look at the radial bar for 1 day you can see its definitely not 67% its saying 17%
Does anyone know what i am doing wrong here ? I suspect the the other 3 radials will also havethe same issue but time hasnt passed enough yet for me to check.
Appreciate any assistance given
[UPDATE] I just resolved this by using maths and template sensors to convert the time in hours to a percentage of hours over the period
This has nothing to do with ApexCharts as it does not support working with services/sections. You have to create your own forecast sensor and outside of the thread there are numerous posts on the topic and how to do this.
Check Out My ApexCharts Setup for Temperature and Humidity! 
Temperature Chart:
Humidity Chart:
Additional Features on Both Charts:
Future Plans:
