I’m trying to setup a ApexCharts card with “dynamic” color thresholds depending on the days electricity prices, but I simply can’t get it to work.
I’ve installed " Config Template Card Card" and tried to use that as the base.
And i’ve setup some sensors that spew out the different values for the chart.
This is the code in it’s current state, and it just returns a blank card lol.
type: custom:config-template-card
variables:
- "{{ states('sensor.nordpool_min_price') | float }}"
- "{{ states('sensor.nord_pool_off_peak_2_pris') | float }}"
- "{{ states('sensor.nordpool_mean_price') | float }}"
entities:
- sensor.nordpool_min_price
- sensor.nord_pool_off_peak_2_pris
- sensor.nordpool_mean_price
card:
type: custom:apexcharts-card
graph_span: 48h
experimental:
color_threshold: true
header:
title: Strømpris for 2 dager (kr/kWh)
show: true
span:
start: day
now:
show: true
label: Nå
series:
- entity: sensor.nordpool_strompris
color: 0652ff
type: area
show:
extremas: true
color_threshold:
- value: 0
color: cyan
opacity: 0.7
- value: ${vars[0]}
color: 00ff00
opacity: 0.7
- value: ${vars[1]}
color: yellow
opacity: 0.7
- value: ${vars[2]}
color: red
opacity: 0.5
float_precision: 2
data_generator: |
return entity.attributes.times.map((time, index) => {
return [new Date(time).getTime(), entity.attributes.prices[index]];
});
yaxis:
- decimals: 2
apex_config:
tickAmount: 10
Help? 
THis is wrong.
Check Docs for config-template-card, there are examples there.
Yeah i’ve been looking up an down the docs and tried a BUNCH of different iterations without any luck, so if you know the right way to format it please share.
If course I can share - but what more important is YOU should be able to do it )))
And you will definitely with a little help.
Take this example from Docs:
where each variable is a value of a “state”.
And JS is used in config-template-card, not jinja (like you tried).
So, instead of
variables:
- "{{ states('sensor.nordpool_min_price') | float }}"
try smth like
variables:
- states['sensor.nordpool_min_price'].state
which gives a “string” variable - which probably (should be tested) should be converted to integer when used:
xxx: '${Int(var[0])}'
I’ve tried that too, it’s how it looked before i took a step on the dark side and feed the code into ChatGPT to try my luck.
With that i still won’t get any chart going. I’ve set the code back to how it was (and in line with what you and the docs mention) like this:
type: custom:config-template-card
variables:
- states['sensor.nordpool_min_price'].state
- states['sensor.nord_pool_off_peak_2_pris'].state
- states['sensor.nordpool_mean_price'].state
entities:
- sensor.nordpool_min_price
- sensor.nord_pool_off_peak_2_pris
- sensor.nordpool_mean_price
card:
type: custom:apexcharts-card
graph_span: 48h
experimental:
color_threshold: true
header:
title: Strømpris for 2 dager (kr/kWh)
show: true
span:
start: day
now:
show: true
label: Nå
series:
- entity: sensor.nordpool_strompris
color: 0652ff
type: area
show:
extremas: true
color_threshold:
- value: 0
color: cyan
opacity: 0.7
- value: '${Int(var[0])}'
color: 00ff00
opacity: 0.7
- value: '${Int(var[1])}'
color: yellow
opacity: 0.7
- value: '${Int(var[2])}'
color: red
opacity: 0.5
float_precision: 2
data_generator: |
return entity.attributes.times.map((time, index) => {
return [new Date(time).getTime(), entity.attributes.prices[index]];
});
yaxis:
- decimals: 2
apex_config:
tickAmount: 10
But it still outputs nothing, no errors either. But no chart gets generated.
Is it your 1st experience with config-template-card?
Suggest to test it with simpler
card:
type: entities
title: '${...place your js expression here...}'
entities:
- sun.sun
to see what comes into the inner card
Yes it’s my first go at it. I installed it trying to get this to work since ApexCharts don’t allow the use of sensor outputs in the value fields.
So, the best way of debugging this “confg-template-card + apexcharts” sandwich would be starting with a simpler case with Entities card when you can clearly see a value of a variable.
Gotcha, makes me think config-template-card maybe ain’t working on my setup or something to be honest.
Since this code also outputs nothing:
type: custom:config-template-card
variables:
- states['sensor.nordpool_min_price'].state
entities:
- sensor.nordpool_min_price
card:
type: entities
title: '${Int(var[0])}'
entities:
- sun.sun
I see, that was my fault - should be “vars” instead of “var”:
and it is “parseInt” instead of “Int”:
So, for color_threshold try first w/o “parseInt” - if it gives a “string” instead of “number” & the color_threshold does not work → then try with “parseInt”.
Also, if fractional values are expected by “color_threshold” - then use “parseFloat”.
That fixed it, not the right thresholds but that’s something I know how to fix. Thx! 
