I’m using the color_threshold in an Octopus Price chart so different price thresholds change the bar colour.
Would it be possible to template the value?
Hey everyone,
Is there an actual way to share the tooltip? A viable way that actually functions in every single way, without a bug of some sort?
Cause i’ve been really trying do figure this out for the last couple days and couldn’t find anything.
Thank you.
When scrubbing/hovering over the graphs, the pop-up says “Today”. But as you can see that temperature is from two days earlier (Today is Dec 1st). Is it supposed to be like that?
1 Like
Hi - I want to exclude in my apex chart entitites, that are not available. Current the charts is only display information, when all entities are available.
I used therefore the following script:
type: custom:apexcharts-card
graph_span: 8h
update_interval: 60sec
header:
show: true
title: Docker Memory Overview -8h
show_states: false
colorize_states: true
series:
- entity: sensor.docker_audiobookshelf_memory
stroke_width: 2
- entity: sensor.docker_icarus_memory
stroke_width: 2
- entity: sensor.docker_minecraft_bedrock_2_memory
stroke_width: 2
- entity: sensor.docker_minecraft_bedrock_memory
stroke_width: 2
- entity: sensor.docker_omada_controller_memory
stroke_width: 2
- entity: sensor.docker_valheim_server_memory
stroke_width: 2
state_filter:
- operator: template
template: '{{ states[entity].state != "unavailable" }}'
entities:
- sensor.docker_valheim_server_memory
- sensor.docker_icarus_memory
- sensor.docker_minecraft_bedrock_2_memory
- sensor.docker_minecraft_bedrock_memory
But I get this error: /// apexcharts-card version 2.0.4 /// value.state_filter is extraneous
If for example the entity is not there, because the docker container is shutdown, it should be exluded from the graph.
I am greatful for any help 
Thanks a lot,
Mark
Hi guys, i need some help
My main goal is this:
- Compare today usage with last year usage on the same day, if possible that it shows if im using more or less…
But i try to understand how this works so i wnted to create a sort of total from last month.
When i use this code it works, however it adds the hours from today to the total as well…
How can i only show just only last month without calculating the value from today?
type: custom:apexcharts-card
header:
show: true
title: Energy usage
show_states: true
colorize_states: true
span:
end: month
offset: -8h
show:
last_updated: false
series:
- entity: sensor.p1_energytotal
type: column
group_by:
func: delta
duration: 1month
start_with_last: false
offset: '-1month'
For this you would need to compare statistics. Unless you have configured a huge-mother-of-all-db, that data is not kept in normal history. I am on ht emove so cannto provide example
Here’s one for you, I use Apexcharts to graph my heating, but noticed it wasn’t working completely for a couple of rooms. After some trial and error it would appear that it is now not liking ‘null’.
Here is an example where I’ve reversed it to show idle times as opposed to heating for the ease of demonstrating.
Original code
- entity: sensor.climate_lounge_hvac_action
transform: 'return x === ''idle'' ? 20: null;'
curve: stepline
type: area
opacity: 1
stroke_width: 1
show:
in_header: false
Demo code
- entity: sensor.climate_lounge_hvac_action
transform: 'return x === ''idle'' ? 20: 0;'
curve: stepline
type: area
opacity: 1
stroke_width: 1
show:
in_header: false
So you can see the only difference between the code is the transform to 0 from null. But on the second graph I get 3 bars, vs only the last instance from my original code. Any ideas or suggestions?
Hi Vinger,
My db is on mariaDB its not that big tho.
Remember the conversion back then, i still using it.
I found out a way to compare and it works, however i don’t need the graphs only the numeric value.
here is the code i use, this compares this month with the same month last year:
type: custom:apexcharts-card
header:
show: true
title: Energy usage TOTAL MONTH
show_states: true
colorize_states: true
span:
end: month
offset: '-8h'
show:
last_updated: false
series:
- entity: sensor.p1_electricity_consumed_off_peak_cumulative
type: column
name: now
color: orange
group_by:
func: delta
duration: 1month
start_with_last: false
- entity: sensor.p1_electricity_consumed_peak_cumulative
type: column
name: now
color: orange
group_by:
func: delta
duration: 1month
start_with_last: false
- entity: sensor.p1_electricity_consumed_off_peak_cumulative
type: column
name: last year
color: purple
group_by:
func: delta
duration: 1month
start_with_last: false
offset: '-365.25 days'
- entity: sensor.p1_electricity_consumed_peak_cumulative
type: column
name: last year
color: purple
group_by:
func: delta
duration: 1month
start_with_last: false
offset: '-365.25 days'
and this for daily:
type: custom:apexcharts-card
header:
show: true
title: Energy usage compare today with last year
show_states: true
colorize_states: true
graph_span: 1day
span:
end: day
show:
last_updated: false
series:
- entity: sensor.p1_electricity_consumed_off_peak_cumulative
type: column
name: now Offpeak
color: green
show:
header_color_threshold: true
extremas: false
group_by:
func: delta
duration: 1day
start_with_last: false
- entity: sensor.p1_electricity_consumed_peak_cumulative
type: column
name: now Peak
color: green
show:
header_color_threshold: true
extremas: false
group_by:
func: delta
duration: 1day
start_with_last: false
- entity: sensor.p1_electricity_consumed_off_peak_cumulative
type: column
name: last OffPeak
color: blue
show:
header_color_threshold: true
extremas: false
group_by:
func: delta
duration: 1day
start_with_last: false
offset: '-365.25 days'
- entity: sensor.p1_electricity_consumed_peak_cumulative
type: column
name: Last peak
color: blue
show:
header_color_threshold: true
extremas: false
group_by:
func: delta
duration: 1day
start_with_last: false
offset: '-365.25 days'
sadly there is no way to even read the long-term data with a template so it stores these numbers in a separate sensor/entity…
thats what i wanted, to get those values in a sensor.
I must admit to be surprised that you got data, whatever I do with such offset, it runs dead … as I expect since the db does not have that data(if not using statistics)… what is sensor.p1_electricity_consumed_off_peak_cumulative containing?
I really returns the data fast, in 2 seconds.
I have hosted it on my 2 proxmox servers, 2x active and 1 backup
It’s really fast and works great with mariaDB.
That specific device is my off peak usage, it will record ever time it changes.
Same for the other sensors.
I only keep like (all temperature/humid sensors and electricity consume + gas)
It does not make the database any big at all.
For example i also use google sheets integration and imported it into grafana.
On sheets i have 2 year data of all my temp sensors and electricity and gas usage, nothing else, it writes every time it changes value, so it has tons of data on that sheet.
But whole sheet is only 7mb for 1 year.
Hi all
I’m working on a graph for my solar system to show the current solar power coming through my panels and compares against the estimated maximum power I can get from the sun assuming the charge controller can accept it all.
I have the graph looking quite nice, however I would love it if the solar (PV) power would change color according to the charge controller state (eg. red for bulk charging, orange for absorption, then green for float)
Below is my current code:
type: custom:apexcharts-card
header:
show: true
title: Solar Power
show_states: true
colorize_states: true
series:
- entity: sensor.solar_power
data_generator: ''
type: column
stroke_width: 1
group_by:
func: avg
duration: 5min
yaxis_id: power
- entity: sensor.solcast_pv_forecast_power_now
type: column
data_generator: ''
stroke_width: 1
offset: '-30m'
yaxis_id: power
- entity: sensor.battery_soc
type: line
stroke_width: 1
yaxis_id: percentage
graph_span: 14h
span:
start: day
offset: +6h
now:
show: true
color: red
label: Now
yaxis:
- id: power
decimals: 1
apex_config:
tickAmount: 5
- id: percentage
min: 0
max: 100
opposite: true
decimals: 1
apex_config:
tickAmount: 5
Does anyone have a suggestion on how i could get this to work?
I was thinking something along the lines of an if statement alongside “color:”.
if "sensor.pv_charger_state" = Bulk, color = red
if "sensor.pv_charger_state" = absorbtion, color = orange
if "sensor.pv_charger_state" = float, color = green
My attempts along those lines haven’t worked yet though.
Any help would be appreciated!
I’ve googled and search these forums and read through peoples code but I cannot for the life of me to get my apexchart-card in Homeassistant to fill the width of the screen. They appear to be fixed but I’ve seen posts of graphs showing them much wider?
type: custom:apexcharts-card
header:
title: Flow Temp History
show: true
show_states: true
colorize_states: true
apex_config:
chart:
type: area
height: 300
fill:
type: gradient
series:
- entity: sensor.current_flow_temperature_in_circuit_0
name: ^^ Flow Temperature Now
stroke_width: 1
show:
datalabels: true
extremas: true
It’s a HA thing - you’ll need to use something like layout-card to customise.
For example, I’ve got this on a couple of dashboard views.
grid-template-columns: 25% 25% 25% 25%
grid-template-rows: auto
grid-gap: 1px 1px
grid-template-areas: |
"header header header header"
"tl tlm trm tr"
"bl blm brm br"
"footer footer footer footer"
"status status status status"
You can then add something like this to your card to have it fill the width:
view_layout:
grid-area: footer
There may be another way, this works for me.
Edit: I found this site very useful for getting the CSS https://grid.layoutit.com/.
Here’s an example!
2 Likes
For anyone who also has the problem with the overlap when displaying a forecast: I have found a solution that cleanly separates both graphs. I’ve modified the data generator as follows:
data_generator: |
return entity.attributes.forecast.map((entry) => {
let cur_hour = new Date(Date.now()).getHours();
return [new Date(entry.datetime).setHours(cur_hour), entry.temperature];
});
before:
afterwards:
For the forecast, the average value is displayed in the middle of the day. In the afternoon, there will be overlaps with the actual measured values of the day. My solution is to modify the timestamp so that the forecast value is calculated at the current hour of the day. This is not a problem as long as the forecast consists of only one value per day. By grouping, the forecast value is still displayed in the middle of the day.
It may not be the best option, but it works.
Complete example code
type: custom:apexcharts-card
graph_span: 8d
span:
start: day
offset: '-3d'
header:
show: true
title: Temperature Forecast
show_states: true
now:
show: true
label: jetzt
apex_config:
legend:
show: false
series:
- entity: weather.wetterstation
name: Temperature
unit: °C
attribute: temperature
fill_raw: last
extend_to: now
group_by:
func: avg
duration: 1h
- entity: weather.forecast_home
type: line
unit: °C
show:
in_header: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
let cur_hour = new Date(Date.now()).getHours();
return [new Date(entry.datetime).setHours(cur_hour), entry.temperature];
});
3 Likes
Firstly, love this card.
I’m trying to make a network traffic graph. Here is how it looks in a low activity state:
The issue I’m having relates to the scale of the yaxis(s).
- As my maximum download speed is serval times my upload, this necessitates the use of 2 yaxis to provide sufficent resolution for both plots.
- Fixed min/max: Either have to set the values high and lose resolution for low values, or set them low and clip the high values.
- Soft bounds (
min: ~20,max:~20): Work fine until a value exceeds the bound, resulting in the ‘0’ point shifting off centre in the vertical. With two yaxis this looks wrong and defeats the purpose. - Adding to min/max (
min: '|-20|',max: '|+20|'): same issues as soft bounds.
Has anyone found a way to use a variable (that’s ultimately determined by a sensor state over time) for min/max? As an example, it would be nice to have:
Max: ~20
Min: Max * -1
I’ve tried messing about with config-template-card but I’m either too dense or it’s not possible to grab a value (say max) from the apexcharts-card and modify it (* -1) to create a variable which can be used for min. I’ve managed to set a variable as a min value (MIN_DOWNLOAD: Number(states['sensor.downloadspeed'].state) * -1).
Other than making a helper which is the max value of that sensor over a given period (this just crossed my mind), is there any way to achive the result I’m seeking?
Edit: Went with the template route. Anyone looking to do this should check out this thread: Daily maximum during a time period
Nice!
You mention you have one forecast entry per day, would this work with two? E.g. high and low temperature…
True, that would make a lot of sense, but unfortunately my programming skills are not quite enough for it. This is very close:
data_generator: |
return entity.attributes.forecast.flatMap((entry) => {
let now = new Date();
if (new Date(entry.datetime).setHours(now.getHours(), now.getMinutes()) < now)
return [];
let maxValues = [new Date(entry.datetime).setHours(23,59,59,99), entry.temperature];
let minValues = [new Date(entry.datetime).setHours(12,0,0,0), entry.templow];
return [minValues, maxValues];
});
Unfortunately, there is now a gap of up to 23 hours between the now line and the forecast. I have no idea how this can be solved. But hey: at least no overlap
1 Like
Is there a way to bring the unit below the value?
Hello,
I have the following chart which I would like to invert the color (white->black and black->white). While I can turn the background to black (see ha-card section), I can’t find a way to change the color of all text. Can anybody help here?
PS: it should be done independently of the light/dark mode setting.
Many thanks
The main code:
type: custom:apexcharts-card
config_templates: temperature
all_series_config:
stroke_width: 3
curve: smooth
header:
show: true
show_states: false
colorize_states: true
series:
- entity: sensor.buienradar_temperature
yaxis_id: temperature
color: rgb(45 255 226)
name: Extérieur
- entity: sensor.thermostat_salon_1_current_temperature
yaxis_id: temperature
color: rgb(42 150 231)
name: Intérieur
- entity: sensor.air_quality_humidity
yaxis_id: humidite
color: rgb(135 44 255)
name: Humidité
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-border-radius: 0;
/*--ha-card-background: black;*/
}
The apex card template:
apexcharts_card_templates:
temperature:
graph_span: 24h
header:
show: true
show_states: false
colorize_states: true
all_series_config:
stroke_width: 3
type: line
curve: smooth
show:
extremas: true
yaxis:
- id: temperature
decimals: 1
apex_config:
tickAmount: 4
- id: humidite
opposite: true
decimals: 1
apex_config:
tickAmount: 4
The graph:
not sure if you ever got this, but I somehow stumbled on what I think you were looking for:
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
graph_span: 7d
span:
end: day
show:
last_updated: true
header:
show: true
show_states: true
colorize_states: true
title: Monthly energy consumption in kWH
series:
- entity: sensor.water_heater_14_1mon
name: Water Heater
type: column
unit: ' kWH'
color: slateblue
group_by:
func: max
duration: 1d
- entity: sensor.dishwasher_5_1mon
name: Dishwasher
type: column
unit: ' kWH'
color: darkviolet
group_by:
func: max
duration: 1d
- entity: sensor.stove_4_1mon
name: Stove
type: column
unit: ' kWH'
color: orangered
group_by:
func: max
duration: 1d
- entity: sensor.den_2_1mon
name: Den
type: column
unit: ' kWH'
color: green
group_by:
func: max
duration: 1d
- entity: sensor.gary_office_13_1mon
name: Gary's Office
type: column
unit: ' kWH'
color: yellow
group_by:
func: max
duration: 1d
- entity: sensor.washing_machine_1mon
name: Washer
type: column
unit: ' kWH'
color: dodgerblue
group_by:
func: max
duration: 1d
- entity: sensor.dryer_8_1mon
name: Dryer
type: column
unit: ' kWH'
color: red
group_by:
func: max
duration: 1d