apexcharts-card: can't template axis min/max

[RedNo7]

Checklist:

• [x] I updated to the latest version available
• [x] I cleared the cache of my browser

Release with the issue: 1.3.6

Last working release (if known): n/a

Browser and Operating System: MacOS, iOS with Safari/Firefox/Brave - all up to date

Description of problem: I am trying to template the min and max of my chart using inout_number I get a 'bad format' when I do this. If I replicate that format literally (without using a variable), it works

with this code:

    - type: custom:config-template-card
      entities:
        - input_number.hive_heating_graph_span
        - input_number.hive_heating_graph_max
        - input_number.hive_heating_graph_min
      variables:
        days: "states['input_number.hive_heating_graph_span'].state+'d'"
        max: "states['input_number.hive_heating_graph_max'].state"
        min: "states['input_number.hive_heating_graph_min'].state"
      card:
        type: custom:apexcharts-card
        yaxis:
          - id: temp
            min: ${min}
            max: ~21

The error in the UI is: //apexcharts-card version 2.0.4 /// Bad taxis min/max format: 15.0

type: custom:apexcharts-card
yaxis:
  - id: temp
    min: '15.0'
    max: ~21

If I change the code to to reflect the error:

    - type: custom:config-template-card
      entities:
        - input_number.hive_heating_graph_span
        - input_number.hive_heating_graph_max
        - input_number.hive_heating_graph_min
      variables:
        days: "states['input_number.hive_heating_graph_span'].state+'d'"
        max: "states['input_number.hive_heating_graph_max'].state"
        min: "states['input_number.hive_heating_graph_min'].state"
      card:
        type: custom:apexcharts-card
        yaxis:
          - id: temp
            min: '15.0'
            max: ~21

...it works fine.

Javascript errors shown in the web inspector (if applicable):

[Error] card – "custom:apexcharts-card" – Error: /// apexcharts-card version 2.0.4 /// Bad yaxis min/max format: 15.0 — apexcharts-card.js:835:83169
Error: /// apexcharts-card version 2.0.4 /// Bad yaxis min/max format: 15.0 — apexcharts-card.js:835:83169setConfig — apexcharts-card.js:835:83169r — create-element-base.ts:95c — create-element-base.ts:171render — config-template-card.js:812update — config-template-card.js:265:328performUpdate — config-template-card.js:252:4803(anonymous function) — config-template-card.js:252:4366
    c (43509.b0a42RGB-Fg.js:7:162851)
    render (config-template-card.js:812)
    update (config-template-card.js:265:328)
    performUpdate (config-template-card.js:252:4803)
    (anonymous function) (config-template-card.js:252:4366)

Additional information:

[ildar170975]

        max: "states['input_number.hive_heating_graph_max'].state"
        min: "states['input_number.hive_heating_graph_min'].state"

Start with fixing to

max: states['input_number.hive_heating_graph_max'].state
min: states['input_number.hive_heating_graph_min'].state

[RedNo7]

I’ll try that - thanks!

[RedNo7]

OK, thanks.

The error is the same though:

[ildar170975]

What kind of value your custom card accepts? Post a MINIMIZED code w/o using config-template-card.

You are trying to debug one custom card by another custom card, and the problem could be either in any of them or with you. In fact, your case is rather rare since it is not some standard card which everyone uses.

[RedNo7]

Hi,

here you go (thanks):

- type: custom:config-template-card
  entities:
    - input_number.hive_heating_graph_min
  variables:
    ymin: states['input_number.hive_heating_graph_min'].state
  card:
    type: custom:apexcharts-card
    apex_config:
    yaxis:
      - id: temp
        min: ${ymin}
        max: ~21
    graph_span: 1d
    series:
      - entity: sensor.hive_heating_reported_current_temp
        yaxis_id: temp

I've not shown it above (in the interests of minimising the code), but I do have it working for graph_span

[ildar170975]

I still have not got an answer to my question: "What kind of value your custom card accepts?" Post a short minimal code of your card w/o using CTC. Then we'll see what values are expected for options - numeric, string, integer, float, ...

[RedNo7]

thanks for your help - I thought I had answered your questions above already.

• Apexcharts-card accepts both a string and a number. I have tried both.
• ${min} =15.0` which should be acceptable to apexcharts-card
• apexcharts-card is very well known!

What does "w/o using CTC" mean?

[ildar170975]

thought I had answered your questions above already.

No. I asked a code w/o using config-template-card (CTC). Here is a code with CTC:

type: custom:ctc
variables:
   ...
entities:
  ...
card:
  type: card
  option: '${...}'
  ...

Here is a card w/o CTC:

  type: card
  option: some value
  ...

So show me which card you want to template - i.e. with static (not templated values). One of the problems is that it is absolutely unclear what you cannot achieve.

apexcharts-card is very well known!

And what? CTC is also known by many.

[RedNo7]

And what? CTC is also known by many.

I was only responding to your comment above (In fact, your case is rather rare since it is not some standard card which everyone uses.)

I asked a code w/o using config-template-card (CTC).

Agh! Thanks! OK, here is the code without CTC:

- type: custom:apexcharts-card
  yaxis:
    - id: temp
       min: ~15
       max: ~21
  graph_span: 1d
  series:
    - entity: sensor.hive_heating_reported_current_temp
      yaxis_id: temp

...so I am trying to make the min and max dynamic.

Thanks!

[ildar170975]

Actually, many people intentionally do not use (after trying) apexcharts since it is too heavy... And with CTC it becomes super-heavy. Ofc "heavy", "light" - relative terms.

Now test exactly this config:

- type: custom:apexcharts-card
  apex_config:
    yaxis:
      - id: temp
        min: ~15.0
        max: ~21.0
  graph_span: 1d
  series:
    - entity: sensor.hive_heating_reported_current_temp
      yaxis_id: temp

My doubts are about values for options you tried to template...

[RedNo7]

Actually, many people intentionally do not use (after trying) apexcharts since it is too heavy...

Yes, I prefer mini-graph-vcard, but sometimes I need more than it can do.

Sorry, I edited the code there was 2 typos in it. Converting yours to the modified version gives me:

- type: custom:apexcharts-card
  yaxis:
    - id: temp
      min: ~15.0
      max: ~21.0
  graph_span: 1d
  series:
    - entity: sensor.hive_heating_reported_current_temp
      yaxis_id: temp

which works fine:

Actually, if I can get the template to work, I will not need the `~`
- type: custom:apexcharts-card
  yaxis:
    - id: temp
      min: 15.0
      max: 21.0
  graph_span: 1d
  series:
    - entity: sensor.hive_heating_reported_current_temp
      yaxis_id: temp

I think the problem is the variable is parsing as a string and I need a number.

[ildar170975]

First, states(input_select) returns "15.0". I suspected - may be max could be only an integer.

Now try another case - with CTC:

min: >-
  ${ parseFloat(states[...].state) }

Here I used ">-", just my habit, allows to use quotes freely in a template.

[RedNo7]

thanks.

OK, that means (for me):

min: >-
  ${ parseFloat(states[input_number.hive_heating_graph_min].state) }

But now the graph does not show and there is no error.

[ildar170975]

Try

min: ${ parseFloat(states[input_number.hive_heating_graph_min].state) }

and there is no error.

Check Code Inspector for errors. Also, are you testing in yaml dashboard or storage? Test in storage, the Editor may show you some errors.

[RedNo7]

Same result - no graph, no error.

...I appreciate you doing this 👍

[ildar170975]

And why I am getting this? Probably because quotes were missing in my proposed code ).

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.test_number
  - type: custom:config-template-card
    entities:
      - sensor.xiaomi_cg_1_temperature
    card:
      type: custom:apexcharts-card
      yaxis:
        - id: temp
          min: ${parseFloat(states['input_number.test_number'].state)}
          max: ~21.0
      graph_span: 1d
      series:
        - entity: sensor.xiaomi_cg_1_temperature
          yaxis_id: temp

Also, testing in UI editor in storage mode is helpful - it shows SOME errors:

[RedNo7]

Also, testing in UI editor in storage mode is helpful - it shows SOME errors:

Yes, these are the errors I showed in my opening post - I only get these when I do not use parseFloatstates.

Here is my code and dashboard with parseFloatstates (No graph, No error) as previously stated...

When I remove parseFloatstates I get the error per my opening post.

Note: my dashboard is in yaml mode.

[RedNo7]

OK, I have spotted an error in my yaml (I mis-copied yours) you wrote:

min: ${parseFloat(states['input_number.hive_heating_graph_min'].state)}

I mis-copied:

min: ${parseFloatstates['input_number.hive_heating_graph_min'].state}
                 ^ missing `(`                                      ^ missing ')'

and now it works!

...sorry for my error.

[RedNo7]

...and thank you for your perseverance with this! 👍 🥇