With config-template-card
Just like my other selector on the solar overview I posted some time ago in this thread.
Please search for that, I am on the road currently, so you’ll find it sooner than I can gat to my code 
1 Like
Ok, I have more data to experiment with, so I think I can narrow down the issue and specify my question.
As I said, I’m simply trying to track energy costs, using statistics within this card. In the plot you see:
- Fixed cost (Vast), which is a fixed amount per day and is negative due to a discount
- Variable costs, which is climbing throughout the day
- Total cost, which is the sum of fixed and variable and should also be climbing throughout the day, starting at the level of fixed cost
When I look at the history of the entities, all is fine and total cost is indeed climbing as it should. When I plot this in the card, however, I get a flat line (at the level of yesterday’s cost), until it shoots through zero. From then onwards, it behaves as expected.
So my question is: does anyone use statistics in this card en face the same issue. It doesn’t seem to be a bug of the card, because it can obviously plot negative statistics, as shown in this plot. There doesn’t seem to be an issue with the template sensor or the statistics integration either, because the same entity shows perfectly in the statistics card. Is it the combination of statistics and this card? Anyone?
Would anyone have an example of how to show a time in the header of a chart?
I have a sensor, which has a state of ie. 02:05 which is the last time there was a sucessful scrape of data from a webpage.
I’m having difficulty showing that in the header of my chart.
With the options I have currently set it is being displayed as 1. If the time was 05:54 the header is being displayed 5.
type: custom:apexcharts-card
graph_span: 30d
header:
standard_format: false
show: true
title: OilPal
show_states: true
colorize_states: true
- entity: sensor.oilpalmodemlastreading
name: Last Reading
show:
in_header: true
name_in_header: true
in_chart: false
As I was looking for an answer for using dynamically changing values for color_threshold for Nordpool-data, I struggled a bit to configure the custom:config-template-card to use dynamic values. The struggle for me was that I was first using too long variable names, they need to be shortish. So I hope this my lovelace card code sheds a little bit of light how to use these together:
- type: custom:config-template-card
variables:
MOVINGAVERAGE: >-
states['sensor.nordpool_filter_price_today_average_whole_day_7days_moving_average']
entities:
- ${MOVINGAVERAGE.entity_id}
card:
type: custom:apexcharts-card
graph_span: 24h
apex_config:
chart:
height: 170px
show:
last_updated: true
experimental:
color_threshold: true
header:
title: Electricity price today
show: true
show_states: true
colorize_states: true
span:
start: day
now:
show: true
label: Now
series:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
show:
extremas: true
in_header: raw
header_color_threshold: true
type: column
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
color_threshold:
- value: ${MOVINGAVERAGE.state * 75}
color: darkgreen
opacity: 1
- value: ${MOVINGAVERAGE.state * 100}
color: goldenrod
- value: ${MOVINGAVERAGE.state * 125}
color: darkred
1 Like
I’m trying to customize the name of each auto-entities generated series using config-template-card, but my attempts all failed.
Does anybody know if my placement of code is wrong or if the syntax for area_name is wrong?
If I replace
name: area_name('this.entity_id') or name: {{ area_name('this.entity_id') }}
with
name: states['input_select.days_back_to_show'].state+'d'
I do get the name changed. But it is of course not series-linked, so this means little apart from Apex Charts supports templates in the name.
Relevant code (to not clutter the thread too much):
type: custom:config-template-card
entities:
- input_select.days_back_to_show
variables:
span: states['input_select.days_back_to_show'].state+'d'
days: |
-states['input_select.days_back_to_show'].state+'d'+'1d'
name: area_name('this.entity_id')
card:
type: vertical-stack
cards:
- type: custom:auto-entities
sort:
method: friendly_name
filter:
include:
- entity_id: sensor.xiaomi_humidity_*
options:
name: ${name}
Also tried putting the template directly into the name field, but that failed also.
As this thread is about ApecCharts card, I suggest you ask your config template card -specific question also in the “official” 100% Templatable Lovelace Configurations thread. 
1 Like
@RomRider many thanks for your great work.
here one of my graph
type: custom:config-template-card
entities:
- sensor.a_b_line_voltage
- sensor.internal_temperature
- sensor.input_power
- sensor.sunrise
- sensor.sunset
- sensor.solar_noon
card:
type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
show_states: true
colorize_states: true
title: PV Power and Grid Voltage Today
graph_span: 14h
span:
start: day
offset: +5.5h
apex_config:
annotations:
position: back
yaxis:
- 'y': 253
strokeDashArray: 2
borderColor: '#FFFF00'
borderWidth: 0.5
label:
borderColor: '#ADFF2F'
borderWidth: 0
borderRadius: 0
text: 253V
textAnchor: center
position: right
offsetX: -35
offsetY: 2
style:
background: transparent
color: '#FFFF00'
fontSize: 10px
fontWeight: 10
fontFamily: Segoe UI
cssClass: apexcharts-xaxis-annotation-label
- 'y': 264.5
strokeDashArray: 2
borderColor: '#FF4500'
borderWidth: 0.5
label:
borderColor: '#ADFF2F'
borderWidth: 0
borderRadius: 0
text: 264.5V
textAnchor: center
position: right
offsetX: -35
offsetY: 1
style:
background: transparent
color: '#FF8C00'
fontSize: 10px
fontWeight: 10
fontFamily: Segoe UI
cssClass: apexcharts-xaxis-annotation-label
xaxis:
- x: ${new Date(states['sensor.sunrise'].state).getTime()}
strokeDashArray: 0.5
label:
text: ☀️
orientation: orizontal
borderWidth: 0
style:
background: '#0000'
fontSize: 15px
offsetY: 135
- x: ${new Date(states['sensor.solar_noon'].state).getTime()}
strokeDashArray: 0.5
borderColor: trasparent
label:
text: ☀️
orientation: orizontal
borderWidth: 0
style:
background: '#0000'
fontSize: 15px
offsetY: 0
- x: ${new Date(states['sensor.sunset'].state).getTime()}
strokeDashArray: 0.5
label:
text: 🌙
orientation: orizontal
borderWidth: 0
style:
color: '#fff'
fontSize: 15px
background: '#0000'
offsetY: 135
chart:
type: area
stroke:
show: true
dataLabels:
enabled: true
legend:
show: false
grid:
show: false
yaxis:
- seriesName: 1
show: true
forceNiceScale: true
opposite: true
decimalsInFloat: 0
- seriesName: 2
show: true
forceNiceScale: true
opposite: false
decimalsInFloat: 0
- seriesName: 3
show: false
forceNiceScale: true
opposite: false
decimalsInFloat: 0
- seriesName: 4
show: false
forceNiceScale: true
opposite: false
decimalsInFloat: 0
all_series_config:
stroke_width: 1
group_by:
func: last
duration: 5m
curve: smooth
type: area
series:
- entity: sensor.a_b_line_voltage
color: white
extend_to: now
name: Grid V
unit: V
float_precision: 2
group_by:
func: last
show:
in_header: true
in_chart: true
datalabels: false
stroke_width: 1
color_threshold:
- value: 0
color: white
opacity: 1
- value: 253
color: white
opacity: 0
- entity: sensor.input_power
color: green
extend_to: now
name: PV Power
transform: return x / 1000;
unit: kW
float_precision: 2
show:
in_header: true
in_chart: true
datalabels: false
color_threshold:
- value: 0
color: green
opacity: 0.5
- value: 1.5
color: limegreen
opacity: 0.4
- value: 2.5
color: lightgreen
opacity: 0.3
- value: 3.5
color: springgreen
opacity: 0.2
- entity: sensor.internal_temperature
color: red
extend_to: now
name: Inverter Temp.
unit: °C
float_precision: 2
fill_raw: last
show:
extremas: max+time
in_header: true
in_chart: false
datalabels: false
I am having trouble with this.entity_id and do not know if it is an apexcharts-card or config-template-card problem.
If anybody knows his way around this.entity_id , maybe you would take a look at it?
Thanks again for your answer, however, I managed to recreate the history card in apex.
It needed some helper and some statistic integration, but it works.
- type: custom:config-template-card
variables:
min_temp: parseFloat(states['sensor.six_hourly_min_temperature_living_room'].state)-0.5
max_temp: parseFloat(states['sensor.six_hourly_max_temperature_living_room'].state)+0.5
entities:
- sensor.six_hourly_min_temperature_living_room
- sensor.six_hourly_max_temperature_living_room
card:
type: custom:apexcharts-card
graph_span: 6h
header:
show: true
title: Living Room
show_states: true
colorize_states: true
yaxis: # only 1 yaxis, no need for id or yaxis_id
- min: ${min_temp}
max: ${max_temp}
apex_config:
tickAmount: 4
series:
- entity: climate.thermostat_living_room
attribute: current_temperature
type: line
stroke_width: 2
name: Living Room Temperature
group_by:
func: max
duration: 5min
- entity: climate.thermostat_living_room
attribute: temperature
type: line
stroke_width: 2
name: Target Temperature
group_by:
func: max
duration: 5min
- entity: sensor.hvac_mode_living_room
type: column
group_by:
func: max
duration: 5min
show:
legend_value: false
in_header: false
apex_config:
legend: { show: false }
#For getting the heating mode(red bars)
- name: "HVAC Mode Living Room"
state: >-
{% if is_state_attr("climate.thermostat_living_room","hvac_action","heating") %}
{{state_attr("climate.thermostat_living_room","current_temperature")}}
{% else %}
{{ 0 }}
{% endif %}
# For min max y axis value:
- name: "Max Temperature Living Room"
state: >-
{{ [state_attr("climate.thermostat_living_room","current_temperature"),
state_attr("climate.thermostat_living_room","temperature")]|max}}
- name: "Min Temperature Living Room"
state: >-
{{ [state_attr("climate.thermostat_living_room","current_temperature"),
state_attr("climate.thermostat_living_room","temperature")]|min}}
#Rolling min max for 6 hour
- platform: statistics
name: "Six Hourly Max Temperature Living Room"
entity_id: sensor.max_temperature_living_room
state_characteristic: value_max
max_age:
hours: 6
- platform: statistics
name: "Six Hourly Min Temperature Living Room"
entity_id: sensor.min_temperature_living_room
state_characteristic: value_min
max_age:
hours: 6
3 Likes
hi
I want to create a scatter graph based on 2 sensors. I collect them with a 3rd template sensor once every so often, and want then to get out a point with one measurement on the x and one on the y axis. Can someone help me? (I don’t know much coding). Thanks!
edit: What I have so far:
the template to collect the 2 sources into 1:
- trigger:
- platform: time_pattern
hours: /12
minutes: 1
seconds: 5
sensor:
- name: cop 12 hourly vs temp
unit_of_measurement: cop, °C
state: >
{{ (states('sensor.cop_12_hourly')|float(0))}}, {{ (states('sensor.average_temp_last_12hrs')|float(0)) }}
and my try:
type: custom:apexcharts-card
chart_type: scatter
apex_config:
xaxis: numeric
series:
- entity: sensor.cop_12_hourly_vs_temp
data_generator: |
???
xaxis: cop
yaxis: °C
How do I format this properly, as how to config xaxis and data_generator?
I got some hints at my topic below, but didn’t get through yet. Thanks.
Hi,
I have been fiddling for a few weeks now trying to figure it out myself, but I really can’t get it working. Can anyone please help me?
I have a ‘Zonneplan One’ device that provides a number of sensors for ‘future power price’ (so the energy-price for the following hours). It provides 8 sensors in total. "price in 1 hour, in 2 hours, etc.
I consolidated the sensors in one template sensor:
I want to get a bar-graph that puts these items next to each other (preferably auto-scaled, starting with 0,00, so it has some ‘body’). If at all possible, it would also be nice if it would show the ‘hour’ of the given value. I haven’t managed to get that working too.
So suppose it’s 13:30 now, so the ‘next hour’ starts at ‘14:00’, it would be nice if it said so.
sorry I can’t help with your specific goal. Did you look at alternatives? For me the nordpool custom component works well, with a template for the additional cost of the provider and up to 35 hours in advance.
1 Like
Hello, anyone knows if “dots” as series type is or will be supported?
You have done what I have look for the last few weeks. Looks really good.
Is it possible for you to share your hourly energy usage graph?
/Niklas
First of all, your card is absolutely great! Many thanks for all the hard work 
Would it be possible to have a faded fill?
Now I just have the opacity putted on a specific value.
But I would like to have the fill faded like this …
Is there an easy way to do this?
Many thanks
Thanks for looking anyway 
It looks great! Could you please share the configuration for apexchart?
Yes, it is possible. Mine is very soft but if you look closely it is gradient
apex_config:
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0
inverseColors: false
opacityFrom: 0.3
opacityTo: 0
stops:
- 0
3 Likes
Solved by changing the state_class from total_increasing to total
Many thanks! That did the trick really appreciate your support 
!