ApexCharts card - A highly customizable graph card

[RomRider]

Hi folks,

I've built a new card to display some graphs in Lovelace . It is in its early stage and is not meant to replace the mini-graph-card at all.

It gives some new possibilities to display data in Home-Assistant and has some extensive customizability.

It is based on ApexChartsJS, and you'll find all kind of examples of what you could build over here

Usage

• stable releases documentation can be found here
• beta/dev releases documentation can be found here

---

Please give it a try, you can build crazy stuff

Roadmap

Not ordered by priority:

• Support more types of charts (pie, radial, polar area at least)
• Support for binary_sensors
• Support for aggregating data with exact boundaries (ex: aggregating data with 1h could aggregate from 2:00:00am to 2:59:59am then 3:00:00am to 3:59:59 exactly, etc...)
• Display the graph from start of day, week, month, ... with support for "up to now" or until the "end of the period"
• Support for any number of Y-axis
• Support for logarithmic
• Support for state mapping for non-numerical state sensors
• Support for simple color threshold (easier to understand/write than the ones provided natively by ApexCharts)
• Support for graph configuration templates à la button-card

[DavidFW1960 (David)]

Love it! Thanks.

[DavidFW1960 (David)]

ok so… How do I define a =header? If I set header to true it uses the first sensor name and value?
Can I change the colour of the lines?

[RomRider]

@DavidFW1960

If I set header to true it uses the first sensor name and value?

Yes, for now. Did you want to define a title instead?

@DavidFW1960

Can I change the colour of the lines?

Not yet, but it’s coming, very soon

Best way for me to track the requests is to open them on Github. You’ll automatically be notified once released in beta and stable.

[DavidFW1960 (David)]

Yes define a title… is that an option? Like your traffic sources…

[RomRider]

It’s not yet possible but I’ll add it. Would you mind opening the 2 feature requests on GH? I’ll work on this tomorrow. It should be released by the end the day for me tomorrow (CET timezone)

[DavidFW1960 (David)]

yep will do right now
DONE

[VDRainer]

This is amazing, Thanks alot!

This is a browser_mod popup.

            tap_action:
              action: call-service
              service: browser_mod.popup
              service_data:
                title: Leistungswerte
                style:
                  .: |
                    :host .content {
                      width: 80em;
                    }
                card:
                  type: custom:apexcharts-card
                  header:
                    show: false
                  apex_config:
                    chart:
                      height: 450
                    stroke:
                      width: 2
                      curve: smooth
                  series:
                    - entity: sensor.e3dc_battery_power
                      name: Batterie
                      group_by:
                        func: avg
                        duration: 5min
                    - entity: sensor.e3dc_house_power
                      name: Haus
                      group_by:
                        func: avg
                        duration: 5min
                    - entity: sensor.e3dc_net_power
                      name: Netz
                      group_by:
                        func: avg
                        duration: 5min
                    - entity: sensor.e3dc_pv_total
                      name: PV
                      group_by:
                        func: avg
                        duration: 5min
                deviceID:
                  - this

Waiting for colors support.

[bschatzow (Bill Schatzow)]

Nicely done. Can’t wait for the time line boundaries. Should help in troubleshooting my update problems on the OS from 5.2 to 5.10. I should be able to see what is going on when my Pi4 freezes.

[alnavasa (A)]

Installed.
I am missing the ability to change line width,
I’ll keep testing!

[dproffer (David Proffer)]

Here is an example that might help:

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.backyard_govee_temperature
    - entity: sensor.backyard_sensor_temperature
    - entity: sensor.backyard_atc_mi_temperature
      curve: straight
    update_interval: 30s
    hours_to_show: 24
    cache: true
    apex_config:
      stroke: {
          show: true,
          width: 1
      }

[RomRider]

You can change the line width. See just above

type: custom:apexchart-card
series:
  - ...
apex_config:
  stroke:
    width: 2  # Change to your liking

[RomRider]

Just for general knowledge:
This:

    apex_config:
      stroke: {
          show: true,
          width: 1
      }

Is the same as this:

    apex_config:
      stroke:
        show: true
        width: 1

[RomRider]

1.1.0 (2021-01-26)

BREAKING CHANGES

• Replace hours_to_show with graph_span. Takes a time string instead of a number of hours.

Features

• Replace hours_to_show with graph_span. Takes a time string instead of a number of hours. (e7ed408)
• color: Define your own color option for each serie (#7) (3a15db2), closes #4
• header: More header options and title support (#8) (2cbd769), closes #5
• Add update_interval config option (357db9a), closes #2

Bug Fixes

• tooltip: Values where following the selected point (0145ca2)
• Error was not displayed if duration couldn’t be parsed (2e2212f)
• Name and units displayed (fe5526b)

Documentation

• Add examples and fix documentation (c71b76a)
• Fix typos and broken links (7789b8f)

Chores

• changelog: Add doc and chores sections (58d7f5f)
• release: 1.1.0-dev.1 [skip ci] (e15f7b9), closes #2
• release: 1.1.0-dev.2 [skip ci] (f01afd7), closes #4 #5

[RomRider]

@bschatzow

Nicely done. Can’t wait for the time line boundaries. Should help in troubleshooting my update problems on the OS from 5.2 to 5.10. I should be able to see what is going on when my Pi4 freezes.

This is released in beta. Feedback welcome Check the README in the dev branch for updated documentation.

[DavidFW1960 (David)]

Love this already… Kudos!

[NdR (Andrea Montanari)]

Thanks for this incredible work!

I love this card!

[bschatzow (Bill Schatzow)]

It woks. Now is there a simple way to load a specific time range? I.E yesterday at 3PM to 5PM. What I see for the current code is a offset from the current time (which is always changing as the time is changing). Not sure how many people need this but there are times I want to see my history at a known time.

[RomRider]

For yesterday 3pm to 5pm you can do it this way:

graph_span: 2h # 2h from 3pm = 5pm
span:
  start: day # from midnight this morning
  offset: -9h # from midnight this morning minus 9h = 3pm yesterday

[bschatzow (Bill Schatzow)]

Got it. Thanks.