I’m using a gradient background irl so not an option unfortunately 
If you could share that, I’d appreciate it - thanks heaps 
1 Like
It was group_by that causes this,…
With transform it could be don wath you want ?
If you want Two colors make two entity with stacked option
1 Like
Hi all!
I’be been looking for an answer on a relatively simple graph plotting question, regarding my electricity hour meter data, in kWh, Home Assistant terms as total_increasing and willing to plot the average electricity consumption for period into graph together with some other values that I already have.
Problem: how to get the “values difference” from total_increasing sensor and get the period consumption to be displayed?
Eg; Hour n = x kWh
Hour n+1 = x+0.8kWh
Difference (to graph) = 0.8kWh
Essentially what I want to plot is the outside air temperature measured and then my average electricity consumption grouped by some high number of hours for trends, but I can’t seem to figure out right way to extract the period consumption from ever increasing value.
Have you guys got any example of how you have handled that?
Thanks!
Hi guys,
i’m super new to apex charts and i love it! I have one question for a very simple chart to visualize my daily oil consumption.
Is it possible to remove the date on the bottom when i hover over the data in the chart?
Yes, this is what I’m using:
apex_config:
tooltip:
enabled: true
x:
format: hh:mm
'y':
show: true
Hello
This might bee simple one but I have not found an answer here.
I have on my Graph a section:
color_threshold:
- value: 0
color: green
- value: 11
color: orange
- value: 20
color: red
Can values be read from HA Helpers? I’d like to set those color treshold values on other dashboard by input.box or slider.
Br Janne
thanks for you reply. for some reason this is still not working for me.
here is my code:
graph_span: 1month
update_interval: 1d
span:
start: month
header:
show: true
title: Täglicher Ölverbrauch
floating: false
standard_format: true
series:
- entity: sensor.taglicher_olverbrauch
type: column
name: Verbrauch
group_by:
func: last
duration: 1d
apex_config:
tooltip:
enabled: true
x:
format: dd MMMM
'y':
show: true
My bad, adding this will fix it:
apex_config:
xaxis:
tooltip:
enabled: false
awesome! thanks a lot 
hi @ all, mey someone help me:
the sensor in pic was imported by a scrape,
HA write sensor states in database with today timestamp but sensor’s stases refer to tomorrow,
I need to add 1 day to that timestamp (but is impossible in HA), can I mod X axis to display +1 day?
Haven’t tried this but maybe you can work with this?
span:
start: day
offset: '+24h
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