Apexcharts-card

Configuration
1

I ge this message and do not understand why.

Custom element doesn’t exist: apexcharts card
type: custom:apexcharts-card
graph_span: 24h
header:
title: Dagens energipris (Kr/kWh)
show: true
span:
start: day
now:
show: true
label: Now
series:

  • entity: sensor.nordpool_kwh_se3_sek_3_00_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”]];
    });

I have this in my configuration.yaml

Loads default set of integrations. Do not remove.

default_config:

Extra panel

lovelace:

mode: yaml

resources:

- type: module

  url: /local/apexcharts-card.js

Text to speech

tts:

  • platform: google_translate

automation: !include automations.yaml

script: !include scripts.yaml

scene: !include scenes.yaml

utility_meter: !include utility.yaml

nordpool:

sensor:

  • platform: nordpool

    Should the prices include vat? Default True

    VAT: True

    What currency the api fetches the prices in

    this is only need if you want a sensor in a non local currency

    currency: “SEK”

    Option to show prices in cents (or the equivalent in local currency)

    price_in_cents: True

    Helper so you can set your “low” price

    low_price = hour_price < average * low_price_cutoff

    low_price_cutoff: 0.00

    What power regions your are interested in.

    Possible values: “DK1”, “DK2”, “FI”, “LT”, “LV”, “Oslo”, “Kr.sand”, “Bergen”, “Molde”, “Tr.heim”, “Tromsø”, “SE1”, “SE2”, “SE3”,“SE4”, “SYS”, “EE”

    region: “SE3”

    How many decimals to use in the display of the price

    precision: 3

    What the price should be displayed in default

    Possible values: MWh, kWh and Wh

    default: kWh

    price_type: kWh

    This option allows the usage of a template to add a tariff.

    now() always refers start of the hour of that price.

    this way we can calculate the correct costs add that to graphs etc.

    The price result of the additional_costs template expects this additional cost to be in kWh and not cents as a float

    default {{0.0|float}}

    additional_costs: “{{0.0|float}}”

I think it has something to do with finding apexcharts-card but do not understand whats wrong?
I have this in my config directory
www/apexcharts-card/apexcharts-card.js and
www/apexcharts-card/apexcharts-card.js.gz

Thankfull for all help

2

There may be other issues, it’s hard to tell with this post, the formatting is everywhere and you’ve included a lot of fairly obviously irrelevant configuration

But you say you’ve put the apex-charts files in a folder called apexcharts-card, but you’ve set ha to look for them in /local (www).

Try

- type: module
  url: /local/apexcharts-card/apexcharts-card.js
3

Have you installed ApexCharts? This would most likely be via HACS. ApexCharts is not a built in part of HA.

4

Hi! I installed it from Hacs manual install. I want he Nordpool spot price for energy consumption in kWh. Looks like HA can’t find Apexcharts-card. Maybe I need to do a total reinstall of HA: I realy do not whant that. Will lose my data. Thankfull for all help. I have a Rasperry Pi 4 with 8 GB installed on a Argon one with a M.2 SSD. I am thinking that maybe the SSD is not set up in a way that Apexcharts-card is not found. Thankfull for all help I can get!

Config.yaml:

lovelace:
  mode: yaml
  resources:
    - type: module
      url: /local/apexcharts-card.js
...
ui-lovelace.yaml:
title: Hem
views:
  - path: default_view
    title: Home
    cards:
      - type: custom:apexcharts-card
        graph_span: 24h
        header:
          title: Dagens energipris (Kr/kWh)
          show: true
        span:
          start: day
        now:
          show: true
          label: Now
        series:
          - entity: sensor.nordpool_kwh_se3_sek_3_00_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"]];
              });
....
5

Check and tell us again, where exactly did you copy the apexchsrts-card files to?

6

I copied the file to /config/www/community/apexcharts-card throu hacs.

7

Hi! Did you solve this problem @IngoAlta ? I used HACS to install apexcharts, and got the same resource URL as you. Not sure if I installed it correctly, but I can se it under HACS → Grensesnitt. I get “Custom element doesn`t exist: Apexcharts-card”, when trying to open the dashboard with this view.
From my configuration.yaml:
resources:
- url: /hacsfiles/lovelace-multiple-entity-row/multiple-entity-row.js
type: module
- url: /hacsfiles/flex-table-card/flex-table-card.js
type: module
- url: /local/apexcharts-card.js?v=2.0.2
type: module
The apexcharts-card files are located in /config/www/custom components/apexcharts-card. Not sure what this URL-thing means?

8

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 %}
9

I am in the exact same boat and I FIGURED IT OUT

I’m guessing you’re using the same written guide:

Here they give an example where the first line is:

type: custom:apexcharts-card

but it actually should be:

type: 'custom:apexcharts-card'

That fixed it for me