Thanks for the quick reply! That seems to have done the trick. I’m sure I’d seen an example somewhere using type: area but I could well be mistaken …
I would suggest you to try different solutions…
Idea 0
As somebody suggested, try to create a new identical series but group its results (if your graph span is 24 hours, I guess that if you group the values by 24 hours duration, you could obtain a straight line… but I could be wrong)
For example you should try to add something like that in your apex-chart:
- entity: sensor.same_price_sensor
type: line
name: Average24h
group_by:
func: avg
duration: 24h
Idea 1
You can create a statistic template that generates the average value of another entity in the last x hours (for example 24 hours) and then add that new entity in an apex chart graph with the same graph_span (for example 24 hours).
For example it could be something like this (but always check the code by yourself in statistic template webpage):
sensor:
- platform: statistics
name: "my sensor mean value over last 24 hours"
entity_id: sensor.my_sensor
state_characteristic: mean
max_age:
hours: 24
Then in your entities you’ll find a new entity that you can add to your apex chart as a new sensor
Idea 2
You can try some hacs integrations that (without coding) similarly creates an entity that gives you the average value of another sensor in a period of time.
For example you could try this hacs integration: GitHub - jeroenterheerdt/HADailySensor: Sensor for Home Assistant that gets reset at midnight
Then you can add the new entity to your apex chart as a new series!
1 Like
Actually I think I spoke to soon.
Looking at the latest plots it seems to have got the axis consistent now between the series which is a step in the right direction but is still not actually stacking up the values of the different series.
Some fidelity is also lost using bars but I could probably have a play with the time grouping being used.
Hi All. Is it possible to create a bar chart using the entity state as the series value? I am keen to replace my use of the bar card to save some space on the dashboard.
For currencies I would like to force values to 2 decimal places. I have tried float_precision: 2 in the series, however this results in trailing zeros being removed.
type: custom:apexcharts-card
header:
title: Electricity import cost today
show_states: true
config_templates: default
span:
start: day
graph_span: 24h
color_list:
- orange
- grey
all_series_config:
type: area
series:
- entity: sensor.electric_cost_today
name: Total cost today
float_precision: 2
group_by:
func: avg
duration: 30mins
- entity: sensor.electric_tariff_standing
name: Daily standing charge
float_precision: 2
group_by:
func: avg
duration: 30mins
apex_config:
yaxis:
min: 0
labels:
formatter: |
EVAL:function (val) {
return "£" + val.toFixed(2);
}
forceNiceScale: true
xaxis:
axisTicks:
show: false
labels:
show: false
chart:
height: 150
1 Like
Hi guys! I’ve just completed the graph I was writing about in the last days: the result satisfies my expectations 100%, so I’ll summarise here what I did (maybe somebody wants to do something similar).
A special thanks to @Kertz1954 for helping me in some previous posts!
ABSTRACT
I wanted to recreate the default history climate graph highlighting
- current temperature (green)
- desired temperature (red line)
- when it’s heating (color the area in orange)
Here you can see the result:
CURRENT TEMPERATURE: GREEN
I’ve added a series in my apex chart with the sensor that gives me the current temperature
- entity: sensor.tado_riscaldamento_bagno_temperature
name: Temp attuale
stroke_width: 3.5
type: area
color: '#4d908e'
opacity: 0.08
unit: °C
show:
extremas: true
name_in_header: false
in_header: true
group_by:
func: avg
duration: 5m
DESIRED TEMPERATURE: RED
I’ve added a series in my apex chart with the sensor that gives me the desired temperature.
series:
- entity: climate.tado_riscaldamento_bagno
attribute: temperature
name: Temp desiderata
stroke_width: 1.5
type: line
color: '#CC3333'
opacity: 1
unit: °C
show:
extremas: false
in_header: false
group_by:
func: avg
duration: 5m
IS HEATING: ORANGE
Here comes the tricky part.
I want that when it’s heating (heating sensor > 0), the chart becomes orange.
In order to achieve that result, I’ve created a new template sensor in configuration.yaml that
- when it’s heating → gives me current temperature
- when it’s not heating → is empty or null (
when it’s not heating I don’t want a 0 value, since this will interfere with y-axis min value in my chart)
So I’ve created in my configuration.yaml the following sensor:
template:
- sensor:
- name: Grafico riscaldamento soggiorno - sta riscaldando ## In English it's heating
state: "{{ states('sensor.tado_riscaldamento_bagno_temperature') | float }}" ## the value of the sensor is equal to current temperature
availability: "{{ states('sensor.tado_riscaldamento_bagno_heating') | int}}" ## when it's not heating, availability is 0, so the value of the sensor is null
Pay attention to “availability”:
- when heating is 0 → availability is false, so the value of the sensor is null
- when it’s heating (heating is not 0) → availability is true and the value of the sensor is current temperature
Finally I’ve added the template sensor to my apex chart as a third orange series:
- entity: sensor.grafico_riscaldamento_bagno_sta_riscaldando
name: Sta riscaldando
stroke_width: 0
type: area
color: orange
opacity: 0.5
show:
in_header: false
legend_value: false
group_by:
func: avg
duration: 5m
FULL APEX CHART CODE
type: custom:apexcharts-card
graph_span: 12h
header:
show: true
title: Temperatura bagno
show_states: true
colorize_states: false
series:
- entity: climate.tado_riscaldamento_bagno
attribute: temperature
name: Temp desiderata
stroke_width: 1.5
type: line
color: '#CC3333'
opacity: 1
unit: °C
show:
extremas: false
in_header: false
group_by:
func: avg
duration: 5m
- entity: sensor.grafico_riscaldamento_bagno_sta_riscaldando
name: Sta riscaldando
stroke_width: 0
type: area
color: orange
opacity: 0.5
show:
in_header: false
legend_value: false
group_by:
func: avg
duration: 5m
- entity: sensor.tado_riscaldamento_bagno_temperature
name: Temp attuale
stroke_width: 3.5
type: area
color: '#4d908e'
opacity: 0.08
unit: °C
show:
extremas: true
name_in_header: false
in_header: true
group_by:
func: avg
duration: 5m
Have a nice day people! Keep “home-assisting”! 
5 Likes
WOW !! so nice !! can you share code for that ? looks amazing !!
Hello to all!
I made an apexchart card that is showing two sensors.
- Utility meter that counts power usage in kWh (bar).
- Temperature sensors (calculates then average temperature from the day).
But I got two issues with it:
-
Utility meter sensor resets its value on midnight, but on apexchart card I see it like it would reset the value on 10:30 am and until 10:30am the bar doesn’t show up on chart.
-
Second, when I have both sensor visualization on, the bars are quite thin. When I disable the temp visualization they are getting thicker and in that way I would like to see them always.
Code:
type: custom:apexcharts-card
view_layout:
grid-area: main-left
yaxis:
- id: usage
- id: temp
opposite: true
apex_config:
chart:
stacked: false
height: 300px
graph_span: 1month
span:
start: month
show:
last_updated: true
header:
show: true
show_states: true
colorize_states: true
title: Heat pump energy consumption daily
series:
- entity: sensor.heat_pump_energy_daily
yaxis_id: usage
name: Heat pump
type: column
unit: ' kWh'
group_by:
func: max
duration: 24h
show:
datalabels: true
- entity: sensor.lumi_lumi_weather_temperature
stroke_width: 2
type: area
yaxis_id: temp
name: External temp
group_by:
func: avg
duration: 24h
extend_to: now
Thank you for any hint
To many lines to post here, so here’s a link. Download the apex-chart.txt and paste the contents into a dashboard tab (Markdown card will do). It will not work for you, but at least you can view the code. Have fun !!
https://drive.google.com/drive/folders/1F1GJs6IKI029L5W94VlX7mAcEbjVTpSF?usp=sharing
Amazing graph!
Great idea the “plus” and “minus” button!
I’m creating something similar with chips mushroom cards:
But I’m struggling with the syntax of graph_span in apex chart.
I tried this:
type: custom:apexcharts-card
graph_span: {{states['input_number.grafici_temperatura_ore'].state | int }}h
but it
- doesn’t work in apex chart
- even though it works in developer tools
Can you please tell me what I’m doing wrong with the sinter in apex chart?
Thank you very much!!
You need this type of format, plus the custom config template card in your HA enviroment.
I would also suggest a counter rather than an input_number.
Hope this helps.
type: custom:config-template-card
entities:
- counter.graph_temp_hour_counter
- sensor.mgc_schiphol_description
- sensor.mgc_schiphol_station_name
card:
type: custom:apexcharts-card
update_interval: 2min
graph_span: ${{states['counter.graph_temp_hour_counter'].state+'h'}}
1 Like
Thank you very much!
I’ve tried this but it doesn’t worK
type: custom:apexcharts-card
graph_span: ${{states['counter.grafici_temperatura_ore'].state+'h'}}
But… I think maybe the problem is that you guys are operating in config template card. Tomorrow I’ll install it and try with more patience!
Thank you very much!!
Yes, that’s a must have !!
1 Like
I will handle it than you so much !
Is there a way to specify the name of the entities via a template? I have already tried many variants, but without success. 
1 Like
Final result! I’m really happy!
If somebody wants to replicate:
Prerequisites:
- apex.chart card (graph)
- config-template card (change hours)
- mushroom card (layout of hour picker)
- template sensor (creating the darker heating area)
Full apex chart code here:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: mdi:minus
tap_action:
action: call-service
service: counter.decrement
data: {}
target:
entity_id: counter.grafici_temperatura_ore
hold_action:
action: call-service
service: counter.reset
data: {}
target: {}
- type: template
icon: mdi:chart-box-outline
content: >-
{{ states('counter.grafici_temperatura_ore') }}
{% if states('counter.grafici_temperatura_ore') | int == 1 %} ora nei
grafici
{% else %} ore nei grafici
{% endif %}
tap_action:
action: more-info
entity: counter.grafici_temperatura_ore
- type: template
icon: mdi:plus
content: ''
tap_action:
action: call-service
service: counter.increment
data: {}
target:
entity_id: counter.grafici_temperatura_ore
double_tap_action:
action: none
hold_action:
action: call-service
service: counter.increment
data: {}
target:
entity_id: counter.grafici_temperatura_ore
alignment: center
- type: custom:config-template-card
entities:
- counter.grafici_temperatura_ore
card:
type: custom:apexcharts-card
update_interval: 1m
graph_span: ${{states['counter.grafici_temperatura_ore'].state+'h'}}
header:
show: true
title: Temperatura bagno
show_states: true
colorize_states: false
series:
- entity: sensor.grafico_riscaldamento_bagno_sta_riscaldando
name: Sta riscaldando
stroke_width: 0
type: column
color: '#F5B041'
opacity: 0.3
show:
in_header: false
legend_value: false
group_by:
func: avg
duration: 2m
- entity: sensor.tado_riscaldamento_bagno_temperature
name: Temp attuale
stroke_width: 3
type: area
color: '#f8e07d'
opacity: 0.25
unit: °C
show:
extremas: true
name_in_header: false
in_header: true
group_by:
func: avg
duration: 2m
- entity: climate.tado_riscaldamento_bagno
attribute: temperature
name: Temp desiderata
stroke_width: 1.5
type: line
color: '#CC3333'
opacity: 1
unit: °C
show:
extremas: false
in_header: false
group_by:
func: avg
duration: 2m
- type: custom:config-template-card
entities:
- counter.grafici_temperatura_ore
card:
type: custom:apexcharts-card
update_interval: 1m
graph_span: ${{states['counter.grafici_temperatura_ore'].state+'h'}}
header:
show: true
title: Umidità bagno
show_states: true
colorize_states: false
series:
- entity: sensor.tado_riscaldamento_bagno_humidity
name: Umidità
stroke_width: 3
type: area
color: '#7AB7FF'
opacity: 0.15
show:
extremas: true
name_in_header: false
in_header: true
How I’ve created the darker “heating area” here:
In order to achieve that result, I’ve created a new template sensor in configuration.yaml that
- when it’s heating → gives me current temperature
- when it’s not heating → is empty or null ( when it’s not heating I don’t want a 0 value, since this will interfere with y-axis min value in my chart)
So I’ve created in my configuration.yaml the following sensor:
template:
- sensor:
- name: Grafico riscaldamento soggiorno - sta riscaldando ## In English it's heating
state: "{{ states('sensor.tado_riscaldamento_bagno_temperature') | float }}" ## the value of the sensor is equal to current temperature
availability: "{{ states('sensor.tado_riscaldamento_bagno_heating') | int}}" ## when it's not heating, availability is 0, so the value of the sensor is null
Pay attention to “availability”:
- when heating is 0 → availability is false, so the value of the sensor is null
- when it’s heating (heating is not 0) → availability is true and the value of the sensor is current temperature
Finally I’ve added the template sensor to my apex chart as a third orange series.
Special thanks
Special thanks to @Kertz1954 for his precious help during the process!
3 Likes
Hello! Don’t share the code?
Is anyone showing (long term) statistic sensors in Apex?
It works good but for some reason, the date on the tooltip is one day behind. Below it says January 12 when it’s actually data from January 13 that is shown. The data for the last bar in the chart is also for the 13th.
Any ideas?
statistics:
type: sum
period: day
align: middle
group_by:
func: diff
duration: 1d
fill: last
start_with_last: true
