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:
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'
Nope. Haven’t tried much since I asked here though…
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
Great idea. Is there a way how to add multiple annotations … e.g. every midnight?
@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.
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!! 
