Hi @benm7 could you share the full code please, really like what you’ve done here!
Hi. I have a display bug with line charts. First, the first data of the day doesn’t show and then tooltip box show only one information point for one line, normally the information of all the line will be show in the same tooltip.
EDIT : When I am in “Dashboard Edit” I have no bug. But when I exit “Dashboard edit”, so in normal, the bug is here.
Code below:
type: custom:apexcharts-card
graph_span: 24h
span:
end: day
show:
last_updated: true
header:
show: true
show_states: true
colorize_states: true
title: Température intérieure
now:
show: true
label: Now
all_series_config:
type: line
extend_to: now
curve: smooth
fill_raw: last
group_by:
func: avg
duration: 5min
series:
- entity: sensor.bureau_heating
- entity: sensor.chambre_baptiste_heating
- entity: sensor.chambre_laurent_heating
- entity: sensor.sejour_heating
- entity: sensor.cuisine_heating
- entity: sensor.couloir_heating
- entity: sensor.sejour_bas_heating
yaxis:
- min: 0
max: 100
apex_config:
yaxis:
- show: true
decimalsInFloat: 0
responsive:
- breakpoint: 769
options:
chart:
height: 500px
- breakpoint: 1025
options:
chart:
height: 710px
- breakpoint: 10000
options:
chart:
height: 750px
stroke:
width: 3
markers:
size: 0
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
legend:
show: true
Got it 
(RTFM).
Group By features a methods as delta or diff, which give exactly what you want in such situation for total_increasing sensors, respectively:
Will return the delta between the biggest and smallest state in each bucket
Will return the difference between the last and the first entry in the bucket
(as for utility meters you have ever increasing values, so both functions are identical for this use case)
So what I have is now just
- entity: sensor.power_meter_consumption
group_by:
func: delta
duration: 1h
It was turned in to an official custom card for UI Minimalist 
You can find the code/template here:
https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_apexcharts/
1 Like
hi @benm7 im with @Airyphyla on this. However the code/link you’re referring too doesn’t help me too much. I struggle getting everything right, and the example doesn’t seem to have the doughnut thingy on the right. My skills are not sufficient to make something similar myself. Could you paste your code so i can copy/paste it into my setup? Heck, ill buy you a coffee 
Can I use the transform function to provide the state of another sensor for that point in time (rather than a fixed number)?
I have the following graph:
- The grey areas represent the times that my heating system is actually heating (as opposed to being idle).
- The green areas represent the target temp of the heating system
I am creating the grey and green as follows:
- entity: sensor.hive_heating_reported_action
name: "Hive action"
type: area
color: grey
stroke_width: 0
opacity: 0.5
curve: stepline
transform: "return x === 'heating' ? 25 : 5;"
show:
in_header: false
- entity: sensor.hive_heating_reported_target_temp
name: "Hive Target"
type: area
curve: stepline
color: DarkSlateGray
stroke_width: 2
opacity: 0.5
Can the transform function return the result of sensor.hive_heating_reported_target_temp for the same point in time? This would result in the grey areas only going as high as the top of the green area. It would also be great if the !='heating' result was the y-axis min, but that’s secondary.
I have tried the following but the graph will not render.
transform: "return x === 'heating' ? states['sensor.hive_heating_reported_target_temp'].state : 5;"
Thanks.
Edit:
So - typically - as soon as I posted the above, I saw what I think is the answer in the docs:
Your javascript code will receive:
x: a state or a value of the attribute if you defined one (it can be astring,nullor anumberdepending on the entity type you’ve assigned)hass: the fullhassobject (hass.states['other.entity']to get the state object of another entity for eg.)entity: the full state object of the entity from the history entry currently being transformed
So I wrote this:
transform: "return x === 'heating' ? hass.states['sensor.hive_heating_reported_target_temp'] : 5;"
…but nothing renders (for that sensor).
Edit 2:
A bit of a wild guess, but I added .state to the end as follows:
transform: "return x === 'heating' ? hass.states['sensor.hive_heating_reported_target_temp'].state : 5;"
and it kind of works, but not quite:
edit: 3
I believe it only shows the current value for the sensor in question. I will make this a feature request.
Hello everybody,
i have a problem with apex chart:
When i am in the edition mode in lovelace everything is fine. But if i close the edition mode the values are wrong.
You can see this in the following pictures. The first one ist in the edition mode whith the right values.
Does anyone know whats here the problem?
hi can anyone tell me why this come up wrong?
type: custom:vertical-stack-in-card
style: |
ha-card {
box-shadow: 2px;
background: transparent:
margin: 15px:
}
cards:
- type: custom:apexcharts-card
now:
show: true
graph_span: 48h
apex_config:
chart:
height: 300px
legend:
showForSingleSeries: true
plotOptions:
bar:
borderRadius: 2
yaxis:
min: 0
max: 6
decimalsInFloat: 3
tickAmount: 10
forceNiceScale: true
xaxis:
labels:
datetimeFormatter:
hour: H
all_series_config:
show:
offset_in_name: false
header:
title: ' '
show: true
show_states: true
colorize_states: true
span:
start: day
offset: +0h
series:
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
type: column
color: orange
float_precision: 3
stroke_width: 0
name: Dagens timepris
show:
in_header: false
legend_value: false
extremas: false
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
type: column
name: Morgendagens timepris
show:
in_header: false
legend_value: false
extremas: true
data_generator: |
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
});
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
name: Timepris lige nu
color: orange
type: column
show:
in_chart: false
float_precision: 3
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
attribute: average
type: column
color: white
float_precision: 3
stroke_width: 2
name: Dagens gennemsnits pris
group_by:
duration: 1d
show:
in_chart: false
legend_value: false
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
attribute: max
type: column
color: red
float_precision: 3
stroke_width: 2
name: Dagens højeste pris
group_by:
duration: 1d
show:
in_chart: false
legend_value: false
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
attribute: min
type: column
color: green
float_precision: 3
stroke_width: 2
name: Dagens laveste pris
group_by:
duration: 1d
show:
in_chart: false
legend_value: false
- entity: sensor.el_kobt_i_dag_cost
color: purple
float_precision: 2
stroke_width: 2
name: Pris for dagens strøm
group_by:
duration: 1d
show:
in_chart: false
legend_value: false
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
attribute: tomorrow
type: column
color: var(--energy-grid-consumption-color)
float_precision: 3
stroke_width: 2
name: Gennemsnit i morgen
group_by:
duration: 48h
show:
in_chart: false
legend_value: false
1 Like
Can it be my additinal cost template there is something wrong with?
{% set costs = {
"elafgift": 0.008,
"balancetarif_for_forbrug": 0.00229,
"systemtarif" : 0.061,
"transmissions_nettarif": 0.049,
"netselskab_Elvaerk_C_lavlast" : 0.3947,
"netselskab_Elvaerk_C_spidslast" : 1.2997,
"eltillaeg_ellev": 0.015,
"abonnement_ellev": 23.20 / 30 / 24,
"abonnement_netlev": 45.00 / 30 / 24
} %}
{% if now().month >= 10 or now().month < 4 %}
{% if now().hour >= 17 and now().hour < 20 %}
{{
costs.elafgift +
costs.balancetarif_for_forbrug +
costs.systemtarif +
costs.transmissions_nettarif +
costs.netselskab_Elvaerk_C_spidslast +
costs.abonnement_ellev +
costs.abonnement_netlev
}}
{% else %}
{{
costs.elafgift +
costs.balancetarif_for_forbrug +
costs.systemtarif +
costs.transmissions_nettarif +
costs.netselskab_Elvaerk_C_lavlast +
costs.abonnement_ellev +
costs.abonnement_netlev
}}
{% endif %}
{% else %}
{{
costs.elafgift +
costs.balancetarif_for_forbrug +
costs.systemtarif +
costs.transmissions_nettarif +
costs.netselskab_Elvaerk_C_lavlast +
costs.abonnement_ellev +
costs.abonnement_netlev
}}
{% endif %}
Hi all.
Stupid questions I suppose
I created a template to use with config_template and this applies to all series, but it’s possible to create a template for single series?
Regards
Just in case this helps anyone, I think I’ve figured out a way of making this graph display what I want. I don’t fully understand why this is working but so far so good!
I can only get this working with Group_By and not Statistics; I noticed that playing around with the duration started making all the X-axis labels for all days of the week show (including today). If I set the duration to 1d, then the current day label was missing. Setting the Func to Max and duration to 23h59m59s has sorted this out. The max value of this sensor for each day is always going to be the maximum amount of energy used and configuring the duration like this still seems to work out the usage per day as accurately as it did when setting it to 1d. My assumption is that because “today’s” usage isn’t complete yet, i.e. there isn’t 1 day’s worth of data yet, it hid the X-axis label. I don’t know why setting it to 23h59m59s works though! If anyone can shed light on that, it’d be good to understand better
type: custom:apexcharts-card
apex_config:
xaxis:
tickAmount: 7
labels:
format: ddd
hideOverlappingLabels: true
showDuplicatges: true
show: true
experimental:
color_threshold: true
graph_span: 7d
span:
end: day
show:
last_updated: true
header:
show: true
show_states: true
colorize_states: true
yaxis:
- min: 0
max: ~12
decimals: 0
apex_config:
tickAmount: 6
series:
- entity: sensor.server_room_electric_consumption_today
show:
header_color_threshold: true
datalabels: true
type: column
group_by:
func: max
duration: 23h59m59s
color_threshold:
- value: 7
color: '#99c140'
- value: 10
color: '#e7b416'
- value: 12
color: '#cc3232'
1 Like
Can you do background colours in this integration?
I know in Apexcharts you can do this through annotations, ie:
How would I implement this in Home Assistant?
Hi guys,
Im trying to record the amount and duration of times that my boiler is heating our house. However, im stuck, i need a second pair of eyes on this because im unable to generate data here.
Would someone help me?
- type: custom:apexcharts-card
apex_config:
chart:
height: 170px
experimental:
color_threshold: true
graph_span: 7d
span:
end: day
show:
last_updated: true
header:
show: true
show_states: true
colorize_states: true
title: Total Time Heating Per Day
yaxis:
- min: 0
max: ~11
decimals: 0
apex_config:
tickAmount: 5
series:
- entity: binary_sensor.boiler_burner
show:
header_color_threshold: true
extremas: true
as_duration: hour
type: column
name: Duration
group_by:
func: last
duration: 1d
color_threshold:
- value: 1
color: dodgerblue
- value: 3
color: darkcyan
- value: 5
color: goldenrod
- value: 7
color: orangered
- value: 10
color: darkred
you’re using a binary_sensor which can only ever be ‘on’ or ‘off’. You’'ll need to use the transform function to change ‘on’ into ‘1’ and ‘off’ into ‘0’. Take a look at my post above where I am doing exactly the same thing.
1 Like
Hi, thanks for responding so fast. I’ve tried your suggestion but the code only seems to spit out what im putting in. Other than that i have no idea where i can define On = 1 and Off = 0
transform: "return x === 'on' ? hass.states['binary_sensor.boiler_burner'].state : 5;"
results:
OK, so you are doing it differently from me. Did you check the pictures from my link (to my post above)?
You want to show how many hours in any given day (and a binary_sensor cannot do that). I was showing when it is on and off (and a binary sensor can do that).
Really? The graph itself can’t record the time of that sensor being on? That’s a shame, maybe I can work it with a helper?
Yes it can. However it appears (looking at your graph) that you are showing hrs/day not when off and on.
Please see my post above to see how I am doing it.
1 Like
I am, but is that the whole code? I think im missing something there.
OK, try something like this:
- type: custom:apexcharts-card
apex_config:
chart:
height: 170px
graph_span: 168h
title: 'Heating'
yaxis:
- min: 0
max: 1
series:
- entity: binary_sensor.boiler_burner
transform: "return x === 'on' ? 1 : 0;"
note: I’m not sure if the ‘on’ in the last line needs capitalisation or not.