ApexCharts card - A highly customizable graph card

[Neuvidor]

@Lunkobelix

Do you think that the toFixed could be used to make sure there is always one decimal for the extremas?

For sure, I finally found the solution !

My final card :

• 

type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  title: Répartition énergétique journalière
  show_states: true
  colorize_states: true
apex_config:
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(0) + " %";
      }
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: Total
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(1) + " kWh"
                }
series:
  - entity: sensor.bilan_autoconso_gain_3000wc_now
    name: Prod. solaire
    float_precision: 1
    color: '#2ECC71'
  - entity: sensor.daily_lg_chem_total_energy_saved
    name: Fourn. batteries
    float_precision: 1
    color: '#3498DB'
  - entity: sensor.daily_lg_chem_simulated_grid_export_after_battery_charging
    name: Réinj. ENEDIS
    float_precision: 1
    color: '#8E44AD'
  - entity: sensor.daily_lg_chem_simulated_grid_import_after_battery_discharging
    name: Conso ENEDIS
    float_precision: 1
    color: '#E74C3C'

[Morbidserenity (Christian)]

Thanx been looking for a fix for this to

[Vicomagistri (Vico)]

Hi all,

Apologies, I really did try searching for a solution to this in the thread before posting what will probably have already been answered: I’m trying to make a daily graph that plots from 00:00 this morning till now. However when I use type: line (or area) a ‘phantom’ point is created at tonight’s midnight and draws the line until then

This doesn’t happen when I change it to type:column

Is this intentional? I saw extend_to_end:false being used in some examples, but when I add that to the series I receive a messaging informing me “value.series[0].extend_to_end is extraneous”, so I’m obviously using that wrong.

Thank you

type: custom:apexcharts-card
graph_span: 1d
span:
  start: day
header:
  show: true
  title: Battery % (Today)
  show_states: false
update_interval: 5min
apex_config:
  chart:
    height: 250px
  legend:
    show: true
    position: top
  show:
    legend_value: false
series:
  - entity: sensor.battery_percent
    name: Battery Level
    color: green
    stroke_width: 1
    type: area
    group_by:
      func: avg
      duration: 5 min
    opacity: 0.2
yaxis:
  - max: 100

Edit: To anyone else with the same problem, I realised extend_to_end had been depreciated, and replaced with: extend_to. So I added extend_to:now to the series and it’s all good

[taeraeyttaejae]

How would I

• make the tooltip title disappear(with text “Aug 29, 2022 etc”)
• make the tooltip series title disappear (with text “nordpool_kwh_etc”)

I have read the apexcharts reference in https://apexcharts.com/docs/options/tooltip/
but none of the options seem to have any effect.

The tooltip size is quite big for smartphone screen size

[retel (Peter Norlander)]

Hey!
I would greatly appreciate a pointer on what I’m doing wrong with the group_by settings. I have been searching and almost all comments here relate to using func: avg but I’m using func: sum instead. I have a list of dates and values on how many kwh I use for different parts stored in a custom Mariadb. I load the data from Mariadb into an entity and then draw the graphs from there.

It all works perfectly when displaying the data as-is. But I would like to group my usage per month but the sums that are grouped isn’t correct when I compare them and to the sums myself using excel. Only the first month (that isn’t complete) is correct, the other months groups all have a little to much compared to my own sums.

This is my code:

type: custom:apexcharts-card
header:
  title: house usage group by test
  show: true
  show_states: false
apex_config:
  xaxis:
    labels:
      format: MMM
graph_span: 1 year
span:
  start: year
yaxis:
  - min: 0
series:
  - entity: sensor.daily_energy_data
    type: column
    unit: kWh
    show:
      legend_value: false
      in_header: false
      datalabels: true
    data_generator: |
      return entity.attributes.data.map((element) => {
        return [new Date(element["datestamp"]), element["house_usage"]];
      });
    group_by:
      duration: 1 month
      func: sum
      fill: zero

This is how the data looks like: House kwh usage per date - Pastebin.com

Thanks for any input!

[retel (Peter Norlander)]

Some more info:
This is how the sums differ between doing it in excel compared to apex:

• Jan = The same, 1223,4
• Feb excel = 1486,15
  Feb apex = 1589,1
• Mars excel = 1319,6
  Mars apex = 1308,5
• April excel = 980,2
  April apex = 956,1
• May excel = 908,65
  May apex = 903,9

[itsboo]

hi how to get that memory disk and cpu button like cards on left?

[Jan4 (Jan Nielsen)]

With graph_span I can specify a fixed time span.
As an alternative, is it possible to make it show year to date?

[Lunkobelix]

No, unfortunately. First you need to use long term statistic to have recorded date for that period of time and when doing so you can only set it up to display the lastest x months and not from a specific date. At least I haven’t been able to.

[Lunkobelix]

Has anyone found a way to plot state attributes like state_attr('climate.garageelementet', 'current_temperature') or do I really need to make a template sensor out of it first?

[aaskt]

@RomRider I have the same issue as @galaxy_explorer not being able to show sun.sun attributes elevation and azimuth.
In developer tools i can see the attributes and their value, but in Apexcharts i get N/A.
The same config worked for me earlier but not anymore, not sure at what level it stopped working.(half a year ago at least) A fresh install of HA 2022087, and apex2.0.1 gave the same result. (no modifications of default recorder setup)

[Jeremy102]

Hi,

I can’t see the hand in the Toolbar.

Why ?

Thank’s

type: custom:apexcharts-card
graph_span: 24h
stacked: true
header:
  show: true
  title: Production
  show_states: true
apex_config:
  chart:
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        download: true
        selection: true
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true
    type: area
    height: auto
  stroke:
    show: true
    width: 1
    curve: smooth
  legend:
    show: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      start:
        - 100
        - 80
        - 0
series:
  - color: rgb (26,158,11)
    entity: sensor.production
    type: area
    name: Production sur 6h
    show:
      datalabels: false
view_layout:
  position: main

Édit: Ok, not working on iPad, ok on Windows 10

[Anto79-ops]

hey all, I did some searches on this and found some (confusing) information that didn’t help me. How I can query data from my InfluxDB database with Apex charts? As you know, data in HA is purged after a certain time and I’d rather not increase that time because I have a separate server for InfluxDB that my Home Assistant feeds. Right now, only Grafana (add on) can do this easily. thanks!

[Mossberget (Christoffer söderberg)]

This thread should probably help you out with what you want to do

Using HA or HACS graphs w/ InfluxDB data in HA?

THANK YOU @koying! I hate grafana and influxdb2 which are clunky and counterintuitive. Now using influxdb 1.8.10 compressed version let params = new URLSearchParams({ db: "home_assistant", q: 'SELECT "value" FROM "kg" WHERE "entity_id" = \'mattias_weight\' AND time < now()' }), request = async () => { let a = [], r = await fetch("http://192.168.1.241:8086/query?" + params), j = await r.json(); for (let r of j.results[0].series[0].values) a.push([new Date(r[0]), r[1]…

[Mossberget (Christoffer söderberg)]

you can use a data_generator to access the attributes of an entity, there is a good example of this in the documentation.

GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced...

[Lunkobelix]

Has anyone found a way to make one line bolder than the others? As I understand it the stroke width is configured across all series. In the example below I would like the green line to stand out, gets a bit cluttred as it is now:

Edit: Solved with stroke_width.

Another question, has anyone found a way to have vertical lines indicating where each day starts? So that it is easier to see in the graph where a day starts and ends? Tried annotations but only got it to work on the yaxis since I don’t know where to place them on the xaxis since that is a date.

[Anto79-ops]

thank you, sir!

[Lunkobelix]

Did you manage to get the xaxis annotations to work without adding a static text but a sensor value for x, x2?

[maxl67]

no, I didn’t get it to work. It seemed to influence the ‘now’ line and other things.

I ended up plotting a step-in curve agains a secondary y-axis:

[aarpi3]

@RomRider

You’ll need to prepend the current value with the current timestamp in the data generator

Would it be possible to elaborate a bit on this?
Sorry. It’s probably easy, but I have tried and failed to fill similar gaps (as BolleK had) in my plot. My use is electricity price (hour slot) that I have split into 3 steplines (past of today, rest of today and tomorrow). Maybe its just to extend last value to last hour+1?

edit: added link to org post