this charts looks amazing maybe you can share your config?
Does anyone have a graph that is subtracting one sensor minus another one?
I would liek to show the consumed energy (kWh) for my house excluding the kWh used to charge my car.
So something like household_energy - ev_Charging
Hi! Thanks to RomRider for such an awesome addition to Home Assistant, and everyone contributing. Its truely admirable! 
I have tried my best to search this thread and github page for tips on how to implement, but have not found what I was looking for yet. Hope its ok to ask:
Is there a way to group and sum/avg per hour of the day (0-24) over a period of a week or month?
I wanted to try to make a graph that presents stacked columns of consumption categories (heating, charging, hot water, el-devices, light) and its total consumption as Y-axis. Then hour of the day as X-axis.
I looked at using offset, but it got quite messy. Any tips or directions to look towards?
I’d suggest creating a template sensor and use the result as a entity in the graph.
value_template: >-
{{ states.sensor.all_estimated_usage_power.state | float - states.sensor.powerplugs_total.state | float }}
1 Like
Great idea but I want to use the long term statistics sensor and a template sensor is only available for a week.
What I have now is this!
What I would like to have is one more column showing that yellow “level” in the chart for each hour.
I do understand that this probably has more to do with the sensors than with the apex coding but still any help is appreciated if available.
What is behind all this:
type: custom:apexcharts-card
style: |
ha-card {
background-color: var(--primary-primary-color);
box-shadow: none;
}
graph_span: 48h
hours_12: false
experimental:
color_threshold: true
show:
last_updated: true
header:
standard_format: false
title: Nordpool
show: true
show_states: true
colorize_states: true
apex_config:
chart:
height: 320px
yaxis:
min: 0
tickAmount: 6
span:
start: day
now:
show: true
label: Now
series:
- entity: sensor.nordpool_kwh_fi_eur_3_09_01
type: column
name: .
stroke_width: 5
float_precision: 3
show:
legend_value: false
in_header: false
extremas: true
header_color_threshold: true
extend_to: end
data_generator: >
return (entity.attributes.raw_today.map((start, index) => { return [new
Date(start["start"]).getTime(),entity.attributes.raw_today[index]["value"]];})).concat(entity.attributes.raw_tomorrow.map((start,index)
=> { return [new
Date(start["start"]).getTime(),entity.attributes.raw_tomorrow[index]["value"]];}));
color_threshold:
- value: 0
color: green
- value: 10
color: goldenrod
- value: 20
color: darkred
- value: 30
color: red
- value: 40
color: black
- entity: sensor.spot_nordpool_keskiarvo_hinta_7vrk
type: line
name: 7vrk keskiarvo
stroke_width: 0.5
show:
legend_value: true
in_header: true
extremas: false
header_color_threshold: true
- entity: sensor.spot_nordpool_max_hinta_7vrk
type: line
name: 7vrk max
stroke_width: 0.3
show:
legend_value: false
in_header: true
extremas: false
header_color_threshold: false
- entity: sensor.nordpool_kwh_fi_eur_3_09_01
type: line
name: Hinta nyt
stroke_width: 0
float_precision: 3
show:
legend_value: true
in_header: true
extremas: false
header_color_threshold: false
- entity: sensor.pricelevel_median_today
type: line
name: 1-5
stroke_width: 0
float_precision: 3
show:
legend_value: true
in_header: true
extremas: false
header_color_threshold: false
- entity: sensor.nordpool_kwh_fi_eur_3_09_01
type: column
name: .
stroke_width: 0.5
float_precision: 3
show:
legend_value: false
in_header: false
extremas: false
header_color_threshold: false
extend_to: end
data_generator: >
return (entity.attributes.raw_today.map((start, index) => { return [new
Date(start["start"]).getTime(),entity.attributes.raw_today[index]["value"]+3,76];})).concat(entity.attributes.raw_tomorrow.map((start,index)
=> { return [new
Date(start["start"]).getTime(),entity.attributes.raw_tomorrow[index]["value"]+3,76];}));
color_threshold:
- value: 0
color: grey
opacity: 50
Nordpool is a sensor pulling data from european electricity spot market. Level is a code made by vilhelm.carlsson to split the day prices according to median price into 5 groups. His code can be found from here
What i wish to gain is predictability, to be able to see right away how many and which hours do fall in which category.
Do you guys think that I can do the coding with apex using javascript. In a way creating a value for each hour with the code already implemented on vilhem’s sensor
- platform: template
sensors:
pricelevel_median_today:
friendly_name: "Elprisnivå_median_today"
unique_id: 95789542
unit_of_measurement: "Level"
value_template: >-
{% set today=states.sensor.nordpool_kwh_se3_sek_3_10_025.attributes.raw_today| sort(attribute='value')-%}
{%set median= (today[11].value+today[12].value)/2%}
{% if states('sensor.nordpool_kwh_se3_sek_3_10_025')|float(0.5) >= median|float(0.5) *0.9
and states('sensor.nordpool_kwh_se3_sek_3_10_025')|float(0.5) < median|float(0.5) *1.15 %}
{{3}}
{% elif states('sensor.nordpool_kwh_se3_sek_3_10_025')|float >= median|float *0.6
and states('sensor.nordpool_kwh_se3_sek_3_10_025')|float < median|float *0.9 %}
{{2}}
{% elif states('sensor.nordpool_kwh_se3_sek_3_10_025')|float < median|float *0.6 %}
{{1}}
{% elif states('sensor.nordpool_kwh_se3_sek_3_10_025')|float >= median|float *1.15
and states('sensor.nordpool_kwh_se3_sek_3_10_025')|float < median|float *1.4 %}
{{4}}
{% elif states('sensor.nordpool_kwh_se3_sek_3_10_025')|float >= median|float *1.4 %}
{{5}}
{% endif %}
Or should I give up on that simplicity and try to create a sensor that would output this data?
Great work overall! May I ask, is there any option to create syncing chart like this one: JavaScript Synchronized Line Charts – ApexCharts.js
Hi folks, just starting to get to grips with ApexCharts, fantastic add-on with more options than I know what to do with!
I was wondering if it’s possible to use a script in Home Assistant to toggle the visibility of a series in a chart, much the same as a user manually clicking on the series name in the legend would do?
Thinking I would use this to create custom buttons outside of the chart card, which could be used to show/hide multiple series at a time, or to have the the states shown in the header activate the toggle visibility script as their click action by activating the script.
Interesting idea 
Have a look at the “conditional card”, it won’t solve your problem out of the box but with a variable that you toggle you can have charts show/hide.
Hi everyone,
I really like this beautiful card.
Today I need your help. I want to display a graph with consumption per week. Unfortunately the values shown are wrong and I don’t know what I’m doing wrong.
Here is my code. I also include two pictures. The first one is chart by which is ok. The second one is week and the values are not correct. It does not display the total amont of the weeks.
Code:
- type: custom:apexcharts-card
graph_span: 56d
span:
end: isoWeek # hebdo
stacked: true
header:
show: true
title: Consommation hebdomadaire sur 1 an (€)
apex_config:
chart:
type: area
height: 250
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- entity: sensor.energy_linky_euro_daily_hphc
color: 'rgb(138,43,226)'
type: column
group_by:
func: last
duration: 7d
show:
datalabels: true
No sadly not, it seems to be permanently broken now on all my devices.
chart_type: pie
I wonder, how I would best plot a pie with a single percentage value and format (Size, color and position) the datalabel of that cake piece.
In that example, the 1 should be formatted.
type: custom:apexcharts-card
header:
show: true
chart_type: pie
series:
- entity: sensor.solarman_days
unit: '%'
name: done
color: lightgreen
- entity: sensor.solarman_days
unit: '%'
name: open
transform: return 100 - x ;
color: lightgrey
datalabels: false
Hello and Happy New Year to everybody!
I wonder if is possible to template in some way the in_chart show option of a serie in order to dynamically show or hide the serie from the graph according, for example, to the value of the serie itself.
Thank you.
Hi everyone. I’m a total noob and I’m not sure if I’ve done something wrong or found a bug.
I have a Shelly EM, two energy sensors, an a utility meter for each sensor with 3 tariffs. I have all these feeding the HA Energy dashboard:
I also used the ApexCharts Card to make some nice pies 
This one is linked to Utility Meter “Consumo Ali y Carlos”
And this one is linked to Utility Meter “Consumo Diego y Poli”
Pies get the total directly from the Shelly sensor, and the partials from the utility meters. As you can see, the sum of the partials on the pies doesn’t equal the total, but the sum of the partials from the Energy dashboard does match. As both Energy dashboard and ApexCharts cards are feed from the same data, I’m pretty lost about what can be causing this.
This is the code for the card:
type: custom:apexcharts-card
chart_type: pie
graph_span: 24h
span:
start: day
offset: '-1d'
header:
show: true
title: Consumo Ayer
show_states: true
colorize_states: true
floating: true
all_series_config:
unit: kWh
float_precision: 2
group_by:
func: diff
duration: 24h
show:
legend_value: true
in_header: false
apex_config:
chart:
height: 250px
series:
- entity: sensor.shellyem_bcff4dfcfbef_channel_1_energy
name: Total
show:
in_chart: false
in_header: true
- entity: sensor.consumo_ali_y_carlos_p1
name: Punta
- entity: sensor.consumo_ali_y_carlos_p2
name: Llano
- entity: sensor.consumo_ali_y_carlos_p3
name: Valle
Any ideas about what can be going wrong?
Maybe someone can help with this:
I am representing a chart with the price by hour for the electricity.
I have data to cover future values as well, so I used the option DATA GENERATION:
data_generator: |
return entity.attributes.data.map((price, index) => {
return [new Date(price.start_time).getTime(),price.price_eur_per_mwh/1000];
});
Everything looks good but the header, it is showing the last value of the array of the series generated by the function. I would like to show the NOW value which is 0.15. Is there a way to do it ?.
Another question, Now each column in the center of the hour. so for example in the photo, the marker NOW is showing that it is almost 14:00 which is the correct current time, but it is in between the column of 13:00 and 14:00 and it can create confusion understanding the current price. It is a way to make the column wider to cover the hour?
thank you
Helllo, first of all i must say i love this card, it looks really good. I have made a card that shows todays electricity price, and my “cut off” limits for water heater and heating. For now, i have made the “cut offs” show as lines, but i would like to change the color of the columns instead. To do that, i would need to change the color threshold value based on my sensor values.
It would look something like this
color_threshold:
- value: 0
color: lightgreen
- value: 150
color: dodgerblue
- value: 200
color: orangered
But what i want it to be is something like this, but it returns “value.series[0].color_threshold[2].value is not a number” i have tried different methods but nothing seems to work. Is there a way to convert the sensor value to the right type of number?
Blockquote
color_threshold:
- value: 0
color: lightgreen
- value: "{{ (states('sensor.nordpool_vvb_on_hours')) | float }}"
color: dodgerblue
- value: "{{ (states('sensor.nordpool_varme_on_hours')) | float }}"
color: orangered
this is my full code for my card
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 1d
span:
end: day
show:
last_updated: true
now:
show: true
label: Nå
header:
show: true
show_states: true
colorize_states: true
title: Strømpris i dag
series:
- entity: sensor.nordpool_kwh_krsand_nok_3_095_025
type: column
data_generator: |
return (entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]* 100];
})).concat(entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]* 100];
}));
name: Pris
show:
in_header: true
in_chart: true
unit: ' Øre/kWh'
group_by:
func: max
duration: 1h
color_threshold:
- value: 0
color: lightgreen
- value: 150
color: dodgerblue
- value: 200
color: orangered
- entity: sensor.nordpool_vvb_on_hours
transform: return x * 100;
name: VVB av over
show:
in_header: false
in_chart: true
type: line
stroke_width: 2
unit: ' Øre/kWh'
color: darkblue
group_by:
func: max
duration: 1h
- entity: sensor.nordpool_varme_on_hours
transform: return x * 100;
name: Varme lav over
show:
in_header: false
in_chart: true
type: line
stroke_width: 2
unit: ' Øre/kWh'
color: orangered
group_by:
func: max
duration: 1h
- entity: sensor.electricity_price_day_average
transform: return x * 100;
name: Snittpris i dag
show:
in_header: true
in_chart: false
type: line
unit: ' Øre/kWh'
Hi, Is it possible to use a If state like by Name?? this seems not to work.
I want to make something like i can switch between day and week by a button in the graph.
SO try to switch the name to day to week
series:
- entity: sensor.daily_gas
type: column
show:
datalabels: true
legend_value: false
color: '#607d8b'
name: |-
{% if is_state('input_number.gas_usage_graph', '0.0') %}
Week
{% else %}
Day
{% endif %}
Have you managed to fix this? unning into the same issue right now. 3 series, 2 yaxis - one of the two which “share” the same axis has an offset and is not alligned correctly =/
Just experimenting a bit with the ApexCharts in HA and tried to build this:
-
Temperature Inside and Outside should share the same yaxis on the left - Day/Night is realised by a second yaxis on the right (hidden). Unfortunately Inside Temerature doesn’t seem to be on the same yaxis as Outside Temperature even if it is assigned to the same axis =(
-
I love the color_threshold but also want to use the area option somehow. is it possible to fill the line with the threshold with a gradient while keeping the line colorful?
Code:
type: custom:apexcharts-card
graph_span: 7d
apex_config:
legend:
show: false
brush:
selection_span: 3d
experimental:
color_threshold: true
brush: true
all_series_config:
stroke_width: 3
header:
show: true
floating: false
title: Outside vs. Inside (7d)
show_states: true
colorize_states: true
yaxis:
- id: left
- id: right
show: false
opposite: true
series:
- entity: sensor.outside_temperature
name: Outside Temperature
yaxis_id: left
type: line
opacity: 1
fill_raw: last
color_threshold:
- value: 0
color: ffffff
- value: 8
color: '#318ce8'
- value: 16
color: '#bcf74f'
- value: 24
color: '#ff9600'
show:
extremas: time
in_brush: true
- entity: sensor.miaomiaoce_inside_temperature
name: Inside Temperature
yaxis_id: left
fill_raw: last
color: '#FFC300'
show:
extremas: time
in_brush: true
- entity: binary_sensor.night
yaxis_id: right
transform: 'return x === "on" ? 1 : 0;'
stroke_width: 0
color: black
opacity: 0.2
type: area
curve: stepline
show:
in_header: false
tried using
fill_raw: last ?
- entity: sensor.utomhustemperatur
curve: smooth
type: line
stroke_width: 2
name: Utomhus
fill_raw: last
color_threshold:
- value: 1
color: '#932037'
- value: -1
color: '#104a8e'