ApexCharts card - A highly customizable graph card

Barique · May 5, 2021, 7:02am

Hi everyone, i would like to import data with the data generator function

I recently switch to a french energy provider which provides API to get the lowest price of the day.
I managed to get the prices in either pyscript and nodered for comparaison purpose (pyscript will disapear as soon as i will be sure that everything is ok).
Data are stored in attributes under the dictionnary template {‘time’:value}.
1e02acc7ebe7e1ffca87df6e23af719060e1a67e
Between NodeRed & Pyscript, no probs, they both have the same chart and the base time is in accordance with the official app.
I used one of the script if found in this topic:

type: 'custom:apexcharts-card'
header:
  show: true
  title: Barry Electricité NODERED (€/kWh)
  show_states: false
  colorize_states: true
y_axis_precision: 4
span:
  start: day
  offset: '-1day'
graph_span: 72hours
all_series_config:
  stroke_width: 2
  extend_to_end: false
  curve: stepline
now:
  show: true
  label: now
  color: red
series:
  - entity: sensor.general_prices
    unit: €/kWh
    float_precision: 5
    data_generator: |
      let res = [];
      for (const [key, value] of Object.entries(entity.attributes.values)) {
        res.push([new Date(key).getTime(), value]);
      }
      return res.sort((a, b) => { return a[0] - b[0] })

I decided to process a moving average on NodeRed; no probs here, when i do the maths manually, i get the good time and the good average with the same data template

But when i’m using the same function used to plot the general prices, I now have a 2hr offset…

d243eac59fd293153f8c15fabbbe661ca7b18f33
d97ed78db5433d9fd5da84bee62eae1568c81a07

We can see there that between the lowest price in attributes and the lowest price in the graph, i have a 2hr offset.

Any idea where it could come from ?

Thanks

comatose_tortoise · May 6, 2021, 8:05pm

Did anyone manage to get it working with two y-axes? I have three series I want to plot, so I put the one I want on the right y-axis first and then the other two since everything after the first is supposed to end up on the second axis.

This doesn’t work for me, the two series on the same axis are offset for some reason, one of them not really matching the scale of any axis:

I want the white line to be on the left y-axis together with the orange one, but it appears to be on neither the left or right y-axis.

Is this a bug or am I doing something wrong?

Mariusthvdb · May 6, 2021, 9:47pm

has anyone seen this happening upon loading history:

Error: Invalid value for <svg> attribute height="NaN"

maybe its a latency issue of HA getting to the DB too slowly, but still there’s many errors there in just the flash of an eye…
and another one after clicking restart HA:

DavidFW1960 · May 6, 2021, 10:01pm

Yeah it’s a known issue but there is no fix and it’s safe to ignore it

kongo09 · May 11, 2021, 1:28pm

What an awesome card - I wonder what took me so long to discover it…

One question concerning the header: it seems to be very close to the top end of the card.

type: 'custom:apexcharts-card'
chart_type: radialBar
header:
  show: true
  show_states: true
  floating: true
  title: Used Space
all_series_config:
  show:
    name_in_header: false
series:
  - entity: sensor.ds_volume_1_volume_used
  - entity: sensor.ds_volume_1_used_space
    show:
      in_chart: false
apex_config:
  legend:
    show: false
  plotOptions:
    radialBar:
      hollow:
        size: 70%
      dataLabels:
        show: false
  stroke:
    lineCap: butt

I noticed that the #header comes with a padding of only 8px while I see most cards coming with 16px. Of course, I could use card_mod to adjust this, but I was wondering if I miss something?

LeFab · May 12, 2021, 5:13am

bonjour, j’utilise votre code pour analyser des senseurs dans mon jardin, seulement je crois que je n’ai pas la dernière version que vous utilisez car je n’ai toujours pas la barre “now” au bon endroit!
auriez-vous la gentillesse de m’aider avec votre code le plus récent, c’est de cette façon que j’apprends, en regardant le code des autres.

merci!

nuki47 · May 13, 2021, 1:36pm

Is there a way to start the chart dynamic at the first day of a month?

graph_span: 14d

davo · May 16, 2021, 12:02pm

Hi all,

I am trying to display solar monthly production history data which is in an influx DB.
All I get it the average amount for the total months as below which I have data for Jan to April 2021.

type: 'custom:apexcharts-card'
header:
  show: true
  title: Solar Monthly Production
  show_states: false
  colorize_states: true
apex_config:
  chart:
    type: line
    height: 270
  yaxis:
    min: 0
    max: 800
  stroke:
    show: true
    width: 1
  legend:
    show: true
graph_span: 12 month
span:
  end: month
series:
  - entity: sensor.solar_monthly_influx
    type: column
    name: Monthly Production
    color: green
    show:
      datalabels: true
update_interval: 1d

The data is in influxDB. It is added the last day of the month

root@pi4HA:~# influx -database 'sensors'                                        Connected to http://localhost:8086 version 1.8.5
InfluxDB shell version: 1.8.5
> SELECT "value" FROM "solar" WHERE "entity_id"='month'
name: solar
time                value
----                -----
1612085400000000000 588.8
1614504600000000000 596.5
1617183000000000000 736.7
1619775000000000000 572.9
>

and using a curl query

root@pi4HA:~# curl -G 'http://localhost:8086/query?pretty=true' --data-urlencode "db=sensors" --data-urlencode "q=SELECT \"value\" FROM \"solar\" WHERE \"entity_id\"='month'"
{
    "results": [
        {
            "statement_id": 0,
            "series": [
                {
                    "name": "solar",
                    "columns": [
                        "time",
                        "value"
                    ],
                    "values": [
                        [
                            "2021-01-31T09:30:00Z",
                            588.8
                        ],
                        [
                            "2021-02-28T09:30:00Z",
                            596.5
                        ],
                        [
                            "2021-03-31T09:30:00Z",
                            736.7
                        ],
                        [
                            "2021-04-30T09:30:00Z",
                            572.9
                        ]
                    ]
                }
            ]
        }
    ]
}

and here is my configuration.yaml

  - platform: influxdb
    host: 127.0.0.1
    queries:
      - name: solar_monthly_influx
        database: sensors
        measurement: solar
        field: "value"
        unit_of_measurement: kWh
        where: '"entity_id" = ''month'''

Is it the data in influx that is the problem, the way I am accessing the data / sensor setup in HASS, or the card config ?

Thanks for any help.

Paer · May 16, 2021, 4:53pm

Hello everyone,
super done first of all. Thanks - was amazed at this card.

A question (maybe newbie).
I am trying a simple line chart but with Y axis lines to show todays maximum electricity price. Here using the Tibber integration. The value that I am looking for is a state attribute - I have tried under developer and it returns a value but it does not work in my apex card. Maybe something fundamentally misunderstood? 2nd step will be to show in x-axis the times when certain levels are active.

type: 'custom:apexcharts-card'
graph_span: 3d
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.electricity_price_my_address
apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': states.sensor.electricity_price_my_address.attributes.max_price //returns wrong value. 
        label:
          text: Maximum
      - 'y': 0.2   // here I just tried out with 0.2 to check it out
        borderColor: '#00E396'
        borderWidth: 1
        label:
          text: Minimum

Again thanks for all your work and thank for any help on this.

holpksa · May 17, 2021, 2:14pm

Hi

I love the card!
Intstalled it from HACS but doesn’t work with Home assistant Cast for me. I get the: Custom element doesn’t exist message.
That would be a great feature!

RomRider · May 18, 2021, 9:59pm

The timestamps in the attributes are UTC based, the chart is displayed with your timezone (France = UTC +2). It’s totally expected. Unless the data in the attributes is actually set with the wrong timezone, the chart is correct.

RomRider · May 18, 2021, 10:09pm

Use floating: false

Yes:

span:
  start: month

The data displayed comes from HA, so I’d say the data in home assistant is wrong, meaning your influxdb sensor might be wrong

I don’t understand what you are trying to achieve. The config is wrong also, annotations do not work with sensors as values.

it’s a nightmare to debug open an issue on github, maybe I’ll have a look

You have to define as much yaxis as series when using multiple yaxis. Share your config also.

davo · May 19, 2021, 5:15am

Hi RomRider, Thanks for the reply. Below is what the influx 1.8 DB looks like. How should it be ?
database name is sensors, measurement is solar. I didnt add the friendly_name_str and guess HA added that.

> SELECT * FROM "solar"
name: solar
time                day entity_id friendly_name_str month value   year
----                --- --------- ----------------- ----- -----   ----
1609493400000000000 01  day                         01    14.7    2021
1609493400000000000 01  total                       01    13719.7 2021
1609579800000000000 02  day                         01    22.7    2021
1609579800000000000 02  total                       01    13742.4 2021
1609666200000000000 03  day                         01    18      2021
1609666200000000000 03  total                       01    13760.4 2021
1609752600000000000 04  day                         01    10.8    2021
1609752600000000000 04  total                       01    13771.3 2021
.....
1611999000000000000 30  day                         01    23.9    2021
1611999000000000000 30  total                       01    14271.8 2021
1612085400000000000 31  day                         01    22      2021
1612085400000000000 31  month                       01    588.8   2021
1612085400000000000 31  total                       01    14293.8 2021

When the data is inserted into influx the command is:

solar,entity_id=day,year=2021,month=01,day=01 value=14.7 1609493400000000000
solar,entity_id=total,year=2021,month=01,day=01 value=13719.7 1609493400000000000
solar,entity_id=month,year=2021,month=01,day=31 value=588.8 1612085400000000000

I used a line_protocol file for the insert.

How should I setup the influxdb table etc and how do I then access it to get it into apex.
I have searched the forums and googled, and most of what I could find was getting the data into influx from HA, but not the other way around for chatting historical data.
thanks

kongo09 · May 19, 2021, 8:31am

That doesn’t work. Result is:

#header {
    padding: 8px 16px 0px;
    grid-area: header / header / header / header;
}

personally, I use

card_mod:
  style: |
    div#header {
      padding-top: 24px;
    }

to get everything spaced as expected.

Lunkobelix · May 19, 2021, 10:56am

Has anyone found a way to to the following:

Enable thousand separator. So instead of “50000” it should show “50 000” or “50.000” (depending on localization of the device).
Is it possible to transform a value of “42161” to even thousands like “42000”?

RomRider · May 20, 2021, 12:00am

Right, sorry I misread your initial post. card-mod is the way to go indeed!

Is a feature request
That would be possible using transform with some javascript

kongo09 · May 20, 2021, 4:13pm

Hm, card-mod to the rescue, sure, that almost always works. But why not make it so it fits out of the box?

enry86cami · May 20, 2021, 4:29pm

Hi all,
this is my chart with the daily consumption of energy:

type: 'custom:apexcharts-card'
graph_span: 31d
update_interval: 1hour
cache: true
span:
  end: day
header:
  title: Consumo Energia Mesile
  show: true
  show_states: true
  colorize_states: true
apex_config:
  xaxis:
    labels:
      format: dd
      show: true
      showAlways: true
  yaxis:
    forceNiceScale: false
    decimalsInFloat: 0
  chart:
    type: area
    height: 300
  stroke:
    show: true
    width: 1
  legend:
    show: false
  dataLabels:
    enabled: false
    distributed: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 90
        - 100
series:
  - entity: sensor.daily_energy
    transform: return x / 1000;
    type: column
    name: Energia Giornaliera
    float_precision: 2
    group_by:
      func: max
      duration: 1d

Why the X axis has some space before the first value (21) and after the last (18)?
Could I see all the days in X axis?

RomRider · May 20, 2021, 6:19pm

Because everyone has different tastes card-mod is there to address specifically that.

The missing numbers at the beginning is a bug from the library I use, nothing I can do. At the end, it’s because the days are displayed only every 3 days and the last value is on the 20th, it might also be related to the same bug.

nuki47 · May 20, 2021, 7:36pm

How can I use this day/night columns also in the forecast?

grafik

entity: sensor.day_night
    curve: stepline
    type: area
    transform: 'return x === ''Day'' ? 0 : 30 ;'
    color: grey
    stroke_width: 0
    opacity: 0.3
    show:
      in_header: false
      legend_value: false