ApexChart with Variables

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? :rofl:

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:
image
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! :heart: