Hi!
Is there a way to get buttons or a slider so you can change the card range?
This is how i have it in plotly-graph card
Hi! Maybe the “brush” is something for you - see how I used it in my graph: ApexCharts card - A highly customizable graph card - #2127 by aem
https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/
like this?
card:
type: custom:vertical-stack-in-card
horizontal: false
cards:
- type: custom:config-template-card
entities:
- input_number.temperature_graph_days
card:
type: custom:apexcharts-card
graph_span: ${{states['input_number.temperature_graph_days'].state+'d'}}
header:
show: true
title: ''
show_states: true
colorize_states: true
apex_config:
chart:
width: 100%
height: 120%
legend:
show: false
all_series_config:
stroke_width: 2
opacity: 0.1
curve: smooth
type: area
show:
extremas: true
yaxis:
- id: temperature
show: true
apex_config:
forceNiceScale: true
tickAmount: 6
decimalsInFloat: 1
- id: humidity
show: true
opposite: true
apex_config:
forceNiceScale: true
tickAmount: 6
decimalsInFloat: 0
series:
- entity: sensor.kamer_1_temperature
name: Temperatuur
yaxis_id: temperature
unit: °C
group_by:
func: avg
- entity: sensor.kamer_1_humidity
name: Luchtvochtigheid
yaxis_id: humidity
unit: '%'
group_by:
func: avg
color: '#607d8b'
- type: entities
show_header_toggle: false
entities:
- entity: input_number.temperature_graph_days
type: custom:numberbox-card
icon: mdi:chart-bell-curve
unit: Dgn
4 Likes
Great idea. Is there a way how to add multiple annotations … e.g. every midnight?
1 Like
@RomRider or anyone else, is there a way to customize the font size and/or color or the background of the extremas shown values (min/max values)? If I change the fonts of the other datalabels, the changes are not reflected in the extremas too and they seem a little bit off. Thanks in advance.
And here’s my version. Only possible due to your posting. Many thanks and to https://community.home-assistant.io/u/romrider for producing such a card in the first place.
2 Likes
I have a json that has contains my energy usage for each month. It is formatted like:
[
{
"CONSUMPTION_DELTA_KWH": 73.28300000000135,
"CONSUMPTION_GAS_DELTA_M3": 15.736000000000104,
"CONSUMPTION_GAS_M3": 1749.255,
"CONSUMPTION_KWH_HIGH": 3458.681,
"CONSUMPTION_KWH_LOW": 4372.907,
"PRODUCTION_DELTA_KWH": 2.510000000000218,
"PRODUCTION_KWH_HIGH": 4725.154,
"PRODUCTION_KWH_LOW": 1968.589,
"TIMESTAMP_UTC": 1672527600,
"TIMESTAMP_lOCAL": "2023-01-01 00:00:00"
},
{
"CONSUMPTION_DELTA_KWH": 289.6369999999947,
"CONSUMPTION_GAS_DELTA_M3": 125.817,
"CONSUMPTION_GAS_M3": 1733.519,
"CONSUMPTION_KWH_HIGH": 3412.274,
"CONSUMPTION_KWH_LOW": 4345.865,
"PRODUCTION_DELTA_KWH": 12.928000000000011,
"PRODUCTION_KWH_HIGH": 4723.441,
"PRODUCTION_KWH_LOW": 1967.792,
"TIMESTAMP_UTC": 1669849200,
"TIMESTAMP_lOCAL": "2022-12-01 00:00:00"
}
]
How can I put this in an ApexChart, without creating a sensor for every single month?
Hey!
Does anyone know a way to display an “input_number” sensor in the name of an apex card?
Something like this (dosen’t work tho)
type: custom:apexcharts-card
header:
show: true
title: Elpris + Drifttid VVB [[input.boolean_sensor_name]]
Thanks!
This does !!
type: custom:config-template-card
entities:
- counter.graph_de_bilt_temp_hour_counter
- input_number.max_temp_today
card:
type: custom:apexcharts-card
graph_span: ${{states['counter.graph_de_bilt_temp_hour_counter'].state+'h'}}
cache: false
span:
end: minute
header:
show: true
title: ${{'Schiphol '+states['input_number.max_temp_today'].state+' °C'}}
series:
..........
Works perfect! Thank you so much!! 
Hi Everyone,
I have all my energy consumption seperated by appilance. Each appliance has three sensors: off-peak,on-peak and solar consumption. Is it possible to create a graph like this? Or should I start looking at Grafana
Not sure if this has an example of what you want (Utility Meter near the bottom).
We can stack the utility meter data, for a daily per device overview spanning 14 days. When hovered it will give us exact data of each appliance monitor in our example along with the correct day.
Hi!
I’m using ApexCharts to display my Tyres Pressure/Temp with a radial bar inside a picture-elements cards.
The problem I’m seeing is that they keep sliding up and down - I don’t know based on what/why, not the values being shown as I tried manually setting the state of such sensors and was not able to reproduce the issue. See below some examples:
This is the correct visualisation:
both left charts moved up after a while:
this happens to all four of the ApexCharts shown, after some time they get back to the original position. Without (apparently) doing anything.
This is running on an Android based car head unit, I’m using HA Android app in Kiosk mode. Note that the other elements inside the card are not affected - only the ApexChars keep moving up and down.
Here is my code:
type: picture-elements
elements:
- type: custom:apexcharts-card
experimental:
color_threshold: true
style: |
ha-card {
background-color: transparent;
font-size: 25px;
transform: translate(128.5%,-58%) scale(0.6,1.35);
}
header:
show_states: true
show: true
title: ''
chart_type: radialBar
series:
- entity: sensor.tpms_ant_dx_pressure
name: ANT
unit: B
min: 0
max: 10
color_threshold:
- value: 0
color: red
- value: 30
color: green
- value: 70
color: red
- entity: sensor.tpms_ant_dx_temperature
name: ANT
unit: °
min: 0
max: 100
color_threshold:
- value: 0
color: red
- value: 20
color: green
- value: 80
color: red
apex_config:
responsive:
- breakpoint: 100
options:
chart:
height: 250px
plotOptions:
radialBar:
offsetY: 0
startAngle: -90
endAngle: 90
hollow:
margin: 5
size: 30%
background: transparent
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
- type: custom:apexcharts-card
experimental:
color_threshold: true
style: |
ha-card {
background-color: transparent;
font-size: 17px;
transform: translate(51%,-58%) scale(0.94,1.45);
}
header:
show_states: true
show: true
title: ''
chart_type: radialBar
series:
- entity: sensor.tpms_post_dx_est_pressure
name: EST
unit: B
min: 0
max: 10
color_threshold:
- value: 0
color: red
- value: 30
color: green
- value: 70
color: red
- entity: sensor.tpms_post_dx_int_pressure
name: INT
unit: B
min: 0
max: 10
color_threshold:
- value: 0
color: red
- value: 30
color: green
- value: 70
color: red
- entity: sensor.tpms_post_dx_est_temperature
name: EST
unit: °
min: 0
max: 100
color_threshold:
- value: 0
color: red
- value: 20
color: green
- value: 80
color: red
- entity: sensor.tpms_post_dx_int_temperature
name: INT
unit: °
min: 0
max: 100
color_threshold:
- value: 0
color: red
- value: 20
color: green
- value: 80
color: red
apex_config:
responsive:
- breakpoint: 100
options:
chart:
height: 200px
- breakpoint: 10000
options:
chart:
height: auto
plotOptions:
radialBar:
offsetY: 0
startAngle: -90
endAngle: 90
hollow:
margin: 5
size: 1%
background: transparent
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
- type: state-icon
entity: binary_sensor.gav_ant_pass
icon: mdi:check-circle
style:
top: 78%
left: 83%
state_color: true
- type: state-icon
entity: binary_sensor.porta_ingr
icon: mdi:check-circle
style:
top: 50%
left: 76%
state_color: true
- type: state-icon
entity: binary_sensor.gav_elettr
icon: mdi:check-circle
style:
top: 76%
left: 68%
state_color: true
- type: state-icon
entity: binary_sensor.garage_pass
icon: mdi:check-circle
style:
top: 72%
left: 49%
state_color: true
image: /local/cright3.png
Note that I’m using card-mod for styling as I wanted to use bigger sized fonts - however the same behaviour happen also when using standard styling.
Can anyone help me understand why this is happening?
Thanks a lot!
I don’t know anything about java, so I don’t know if this is possible:
But I have different day and night cost. Is this possible to add and “if” statement to the output map?
data_generator: >
var output =
entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
return output.map((entry) => { return [new Date(entry.start),
entry.value - entry.value + 0.0175 + 0.305 + 0.45]});
So like this:
return output.map((entry) => { return [new Date(entry.start), entry.value - entry.value +
(
If (entry.start >= 06:00 && entry.start < 23:00)
(hass.states['input_number.day'].state)
else
(hass.states['input_number.night'].state)
)
Or can anybody show this can be done?
Close. I want the x axis to be populated with 7 unique entities, not 7 days like it is in the time series. Looks like it this feature was only recently added in Grafana, so I doubt it’s possible with ApexCharts yet.
Hi!
I use Apexchart for the Nordpool integration. That works great. I want be able to add a line for the average price. Is that possible? How? I have painted the line in this pic:
@Fanan: Im not sure, but have you tested to add another sensor grouping the price data by day/month?
Hi people,
thank you very much for any help from anybody 
I have a tricky question about transform option.
FIRST STEP
Let’s start from this really simple apex chart:
type: custom:apexcharts-card
graph_span: 12h
header:
show: true
title: Heating
show_states: true
colorize_states: true
series:
- entity: sensor.tado_riscaldamento_soggiorno_heating
name: heating
type: area
stroke_width: 0
Result:
–––––––––––––
SECOND STEP
Now I would like to use transform option so that:
- when heating is 0 → value is 0
- when heating is not 0 → value is 10
Here you can see the code:
type: custom:apexcharts-card
graph_span: 12h
header:
show: true
title: Heating
show_states: true
colorize_states: true
series:
- entity: sensor.tado_riscaldamento_soggiorno_heating
name: heating
type: area
stroke_width: 0
transform: 'return x === ''0.0'' ? 0 : 10;'
It works perfectly as you can see:
–––––––––––––
THIRD TRICKY STEP
Now I would like to use transform option in a more complex way.
I want that
- when heating is 0 → value is 0
- when heating is not 0 → value is the value of another sensor.
In other ways in the code above, in the transform option, I would like to replace “10” with another value (the value of the entity sensor.tado_riscaldamento_soggiorno_temperature).
The sensor that I’m trying to use gives a number, so it should work as you can see:
So, starting from the previous code I tried to replace 10 with the state of my sensor.
But it doesn’t work.
Maybe it’s a silly problem (apostrophes, syntax, etc), but I can’t find a solution.
–––––––––––––
TWO FINAL EXAMPLES
This works:
type: custom:apexcharts-card
graph_span: 12h
header:
show: true
title: Heating
show_states: true
colorize_states: true
series:
- entity: sensor.tado_riscaldamento_soggiorno_heating
name: heating
type: area
stroke_width: 0
transform: >-
return x === "0.0" ? 0 : "10";
But this doesn’t work:
type: custom:apexcharts-card
graph_span: 12h
header:
show: true
title: Heating
show_states: true
colorize_states: true
series:
- entity: sensor.tado_riscaldamento_soggiorno_heating
name: heating
type: area
stroke_width: 0
transform: >-
return x === "0.0" ? 0 : "{{ states('sensor.tado_riscaldamento_soggiorno_heating') }}";
GIF:
In the following gif you can see the two last examples:
Can somebody help me? I’ve spent this whole day trying to find a solution, but… nothing… I fell pretty dumb
Thank you very much to everybody!
This does work. (edited)
return x === "0.0" ? 0 : (hass.states['sensor.tado_riscaldamento_soggiorno_heating'].state);
1 Like
Thank you very much! It works!!
But unfortunately the result in not what I was hoping.
I was hoping that
I want that
- when heating is 0 → value is 0
- when heating is not 0 → value is the value of the other sensor (sensor.tado_riscaldamento_soggiorno_temperature) during the day
(Example of expected result: 0,0,0,18,19,20,21,0,0,0,21)
Instead, I obtained that
- when heating is 0 → value is 0
- when heating is not 0 → value is the value of the other sensor (sensor.tado_riscaldamento_soggiorno_temperature) but always its last value
(Example of the result: 0,0,0,21,21,21,21,0,0,0,21)
This is the code:
type: custom:apexcharts-card
graph_span: 24h
header:
show: true
title: Heating
show_states: true
colorize_states: true
series:
- entity: sensor.tado_riscaldamento_soggiorno_heating
name: heating
type: area
stroke_width: 0
transform: >-
return x === "0.0" ? 0 : (hass.states['sensor.tado_homekit_sensore_di_temperatura_soggiorno_su0795354624_current_temperature'].state);
This is what I obtain:
I guess I have to keep working in orther to find a solution!
WHAT I WAS TRYING TO ACHIEVE
I was trying to recreate the following graph with apex chart:
So I was trying to create three series:
- desired temperature → purple
- current temperature → green almost trasnparent
- heating → orange (no color when it is not heating; orange area when it’s heating that perfectly overlaps current temperature)
SERIES 1 AND 2
No problems with the first two series, as you can see:
type: custom:apexcharts-card
graph_span: 15h
header:
show: true
title: Temperature
show_states: true
colorize_states: false
series:
- entity: climate.tado_riscaldamento_soggiorno
attribute: temperature
name: Desired temperature
stroke_width: 2
type: line
curve: smooth
color: magenta
opacity: 0.8
show:
extremas: false
in_header: false
- entity: climate.tado_riscaldamento_soggiorno
attribute: current_temperature
name: Current temperature
stroke_width: 3
type: area
curve: smooth
color: green
opacity: 0.15
show:
extremas: true
name_in_header: false
in_header: true
Result:
SERIES 3
In order to make the area orange when it’s heating, I tried to create a third series (area type, orange), with the transform option, so that:
- when heating is 0 → value is 0 (no orange area on the graph)
- when heating is not 0 → value is the value of current temperature (orange area that perfectly overlaps current temperature)
However, I was wrong, since
- when heating is not 0 → I don’t obtain every current temperature value at every hour, but always the last current temperature value.
This is the code:
type: custom:apexcharts-card
graph_span: 15h
header:
show: true
title: Temperature
show_states: true
colorize_states: false
series:
- entity: climate.tado_riscaldamento_soggiorno
attribute: temperature
name: Desired temperature
stroke_width: 2
type: line
curve: smooth
color: magenta
opacity: 0.8
show:
extremas: false
in_header: false
- entity: climate.tado_riscaldamento_soggiorno
attribute: current_temperature
name: Current temperature
stroke_width: 3
type: area
curve: smooth
color: green
opacity: 0.15
show:
extremas: true
name_in_header: false
in_header: true
- entity: sensor.tado_riscaldamento_soggiorno_heating
name: Heating
transform: >-
return x === "0.0" ? 0 :
(hass.states['sensor.tado_homekit_sensore_di_temperatura_soggiorno_su0795354624_current_temperature'].state);
type: area
stroke_width: 0
color: orange
opacity: 1
fill_raw: zero
show:
extremas: false
in_header: false
legend_value: false
This is the (wrong) result:
You perfectly answered to my question! Thank you very much! But my assumptions about the result, where wrong…
OTHER SOLUTION
I guess a can obtain the expected result
- creating a template sensor in configuration.yaml
- adding that sensor in apex chart as the third series
The sensor could be something like this
template:
- sensor:
- name: “Color apex chart when heating”
state: >
{% if is_state('sensor.tado_riscaldamento_soggiorno_heating', '0.0') %}
0
{% else %}
{{ state_attr('climate.tado_riscaldamento_soggiorno','current_temperature') }}
{% endif %}
But I would like to avoid creating a new template sensor in configuration.yaml only for the apex chart.
Do you think I could somehow integrate the code abode directly in apex-chart-card configuration?
Thank you very much!!