@RomRider very nice card, thanks a lot. Just for my understanding, where do the data come from? HA history? Or do I need to install a specific db add on in order to be more comfortable?
Yes, HA’s history, nothing more to add 
1 Like
Thank you @RomRider for this new awsome card !
I have a little problem with my templates sensors for the energy cost, none of them is displaying value in the card:
sensor:
daily_cost:
friendly_name: "Coût/Jour"
unit_of_measurement: '€'
value_template: "{{ (states('sensor.daily_power_usage_peak') | float * 0.1358 + states('sensor.daily_power_usage_offpeak') | float * 0.0949) | round(2) }}"
weekly_cost:
friendly_name: "Coût/Semaine"
unit_of_measurement: '€'
value_template: "{{ (states('sensor.weekly_power_usage_peak') | float * 0.1358 + states('sensor.weekly_power_usage_offpeak') | float * 0.0949) | round(2) }}"
monthly_cost:
friendly_name: "Coût/Mois"
unit_of_measurement: '€'
value_template: "{{ (states('sensor.monthly_power_usage_peak') | float * 0.1358 + states('sensor.monthly_power_usage_offpeak') | float * 0.0949) | round(2) }}"
Here is my card config:
- type: 'custom:apexcharts-card'
graph_span: 7d
span:
end: day
offset: -1sec
header:
show: false
title: Coût de l'énergie par jour €
apex_config:
chart:
type: area
height: 400
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
dataLabels:
enabled: true
xaxis:
labels:
format: dd-MM
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- color: 'rgb(138,43,226)'
entity: sensor.today_power_usage
type: column
group_by:
func: max
duration: 24h
- color: 'rgb(235,10,104)'
entity: sensor.daily_coast
type: column
group_by:
func: max
duration: 1d
I really can’t understand what is preventing the card to read the sensors value.
Any help would be greatly appreciated.
Are they excluded from the recorder? Does the history show up in the default home-assistant’s more-info popup?
If no, that is the reason
Also, don’t define:
chart:
type: area
1 Like
Regarding thresholds, fill, experimental and breaking changes I actually find the default apex_config fine once you spend a little time on it. I just keep the reference options open to quickly see how something can be configured. In my usecase it would probably be more complicated if it will keep getting fragmented where something can only be configured through apex_config, something only through card config, something both places and something neither place (not implemented/working). I would then have to check both card documentation and apex charts documentation in parallell if implementing something new. Some sort of clear split of what’s where would be nice.
Is Range Bar currently an option if I fiddle with it? Or a possible option in the future? (I would like to format it to show status of binary_sensors when ‘on’ using auto entities. Example: any movement/activity at home through any binary_sensor when alarm is armed.)
Fantastic work btw. I would also be happy to send some money your way, but I noticed that you don’t want direct donations. How about listing a specific charity you would like supported with a generated link? If so we could see how much support this card could generate toward the charity. Possibly a bad idea, I just feel like supporting the great work in a meaningful way
apex_config is not for the faint of heart 
You might be understanding how it works but it’s not the case of many users and I’d also like to give everyone some “comprehensive” configuration options 
The rule is the following: Anything that is available in the card config shouldn’t be used in apex_config. It’s impossible to maintain both there are too much options.
However, for color_threshold for example, you have to opt in for the feature to work with drawbacks which are listed in the documentation (maybe not extensively, but the major ones). Going forward, I’ll continue to do it this way for things that would break what you can do with apex_config.
Also it is very hard to test everything with all the options available in ApexCharts but at least, I hope, it gives you flexibility
I’m happy to fix anything that is not working because of how the card is implemented though, if reported properly on github
If you are interested, those are all the things I need to overwrite to make this card work as it works today: apexcharts-card/src/apex-layouts.ts at 63717b7ae9648debdb1d11a17ddf61f95f7225d4 · RomRider/apexcharts-card · GitHub
It doesn’t mean you can’t overwrite those, it just means it might sometimes not work as expected for some of the complex ones.
I guess it would be possible to implement it (but it wouldn’t be working currently), the question is just how to map Home-Assistant’s history to something that ApexCharts understands
Good idea, I’ll see if it’s possible to directly link GH’s sponsorship to something like that
I was thinking more about it and I think it was mainly because if you use graph_span: and group_by: on their own, the data groups for the 24hr period starting at the current time, not midnight. That meant that say for a day total of 50mm, where it rained right up til midnight, if I looked at 10pm I had a “day” with 48mm followed by another “day” with 50mm.
It was only after reading up on span: that I started to understand what was happening and even the it took a few goes to get my head around it.
All good now and thanks heaps for this card.
grap_span without anything else starts from exactly now and slices everything backwards.
If you add end: day to span. It will have give you the result you want using group_by 1day
type: 'custom:apexcharts-card'
header:
show: true
title: Rain
show_states: true
colorize_states: true
graph_span: 14d
span:
end: day
series:
- entity: sensor.rain_accumulation
type: column
group_by:
duration: 1d
func: max
1 Like
Absolutely, it’s better than what I could have hoped for. I guess I was also a bit nervous about loosing a large part of that flexibility if the card was to be “dumbed down”. I appreciate the plan regarding using opt-in for changes that will make certain functionality unavailable. I expect breaking changes considering where the card is it’s development, I just hope it won’t limit the possibilities too much
You could also aggregate the value using a “daily sensor” rather than via Apex if you prefer. https://github.com/jeroenterheerdt/HADailySensor
2 Likes
Ok so re-visiting opacity…
I still see no difference between the 2 charts. Only the first one has opacity:
type: 'custom:apexcharts-card'
graph_span: 24h
header:
show: true
title: NUC Memory Graph
apex_config:
responsive:
- breakpoint: 765
options:
chart:
height: 500px
- breakpoint: 1025
options:
chart:
height: 400px
- breakpoint: 10000
options:
chart:
height: auto
stroke:
width: 3
curve: smooth
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
plotOptions:
bar:
columnWidth: 10%
legend:
showForSingleSeries: true
fill:
type: solid
opacity:
- 0.2
- 0.2
series:
- entity: sensor.memory_use_percent
name: Percent Memory Used
type: area
color: cyan
group_by:
func: raw
duration: 15min
- entity: sensor.nuc_memory_used_filtered
name: Memory Use Filtered
type: line
color: magenta
group_by:
func: raw
duration: 15min
With the latest beta, you have to set opacity in each series, not in apex_config anymore, in your case, just on the area one.
for each entity? can you show an example?
Only set this for the area one, else your magenta line will fade
series:
- entity: x.y
opacity: 0.2
ah ok… I’ll try that now. Thanks. So I don’t need the 0.2, 0.2 now because it’s only for that series.
Yes remove it from apex_config also.
1 Like
if a card contain mix of column and area graphs, columns are rendered on top of area ones. Is there a way of changing it?
As an option maybe semitransparent graph rendering could help with that. I checked rgba color but it doesn’t work
Could you share the code for a singel card?