Beginner - how to add How to add apexchart?

Third party integrations
1

I have been following a guide, which tells me to add apexcharts, but after hours of searching I still haven’t managed to solve my problem.

When I try to add a custom chart like this:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 350px
all_series_config:
  unit: ' kr.'
experimental:
  color_threshold: true
header:
  title: Elpriser pr. time (kr/kWh)
  show: true
  standard_format: true
  show_states: false
  colorize_states: true
now:
  show: true
  label: Nu
graph_span: 2d
span:
  start: day
  offset: '-0h'
yaxis:
  - min: 0
    apex_config:
      tickAmount: 5
series:
  - entity: sensor.elpriser_inkl_afgifter
    type: column
    name: Inkl. afgifter
    data_generator: |
      var today = entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
      });
      if (entity.attributes.tomorrow_valid) {
        var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
          return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
        });

        var data = today.concat(tomorrow);
      } else {
        var data = today
      }
      return data;
    float_precision: 2
    color_threshold:
      - value: 0
        color: green
      - value: 2
        color: orange
      - value: 3.5
        color: red
      - value: 5
        color: darkred
    show:
      extremas: time
      legend_value: false
  - entity: sensor.elpriser_excl_afgifter
    name: Excl. afgifter
    type: line
    color: 03a9f4
    stroke_width: 4
    float_precision: 2
    extend_to: false
    show:
      extremas: true
      legend_value: false
    data_generator: |
      var today = entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
      });
      if (entity.attributes.tomorrow_valid) {
        var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
          return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
        });

        var data = today.concat(tomorrow);
      } else {
        var data = today
      }
      return data;

I am told that “Custom element doesn’t exist: apexcharts-card.” which from what I can tell means that I haven’t added the apexcharts correctly to the configuration yet.

However I am finding a ton of conflicting and probably outdated information on how to do this online and so far everything I have tried have failed.
I have studio code server installed such that I can directly edit in the configuration.yaml and other files and when I look in the config folder I can see that I have a folder named config/www/community/apexcharts-card and within that folder I have apexcharts-card.js and apexcharts-card.js.gz

Some guide I have found tells me I need to add some information to lovelace, but I am not sure what exactly that is or how to do it? (I believe that lovelace used to be an optional configuration system that is now the default system?)

The documentation that comes with apexcharts says to add the following inside configuration.yaml

resources:
  - url: /local/apexcharts-card.js?v=2.0.4
    type: module

Another guide tells me to add the following:
lovelace:
mode: storage
directly into configuration.yaml

While other guides are telling me that I should not touch configuration.yaml anymore and things should go somewhere else.
I have tried all the things, but none of them seems to work for me.

So any help would be greatly appreciated.

2

You don’t need to do any of that if you added apexcharts using HACS.

3

As far as I know, I added apexcharts using HACS.

I found it inside HACS and download/installed it from there, which added the files to the config/www folder as described above.

So assuming I have installed it correctly, what could then be the reason for the error that I am receiving? “Custom element doesn’t exist: apexcharts-card.”

4

Is this the first time you have used HACS?

When the www folder is created you have to restart Home Assistant before you can use it to share things to /local. That could be it.

5

That seems to have done it. Thank you

1 Like