ApexCharts card - A highly customizable graph card

Sure, here it is :slight_smile:

type: custom:apexcharts-card
chart_type: radialBar
header:
  title: ''
  show: true
  show_states: true
apex_config:
  plotOptions:
    radialBar:
      offsetY: 0
      startAngle: -130
      endAngle: 130
  legend:
    show: false
  chart:
    height: 200px
  stroke:
    lineCap: round
  fill:
    type: gradient
    gradient:
      type: vertical
      shadeIntensity: 0
      inverseColors: false
      opacityFrom: 0.9
      opacityTo: 0.7
      shade: dark
      stops:
        - 10
        - 100
series:
  - entity: sensor.current_l1_gv
    name: Fas 1
    color: 2eb9ff
    show:
      in_header: false
    min: 0
    max: 20
  - entity: sensor.current_l2_gv
    name: Fas 2
    color: orange
    show:
      in_header: false
    min: 0
    max: 20
  - entity: sensor.current_l3_gv
    name: Fas 3
    color: 3ca358
    show:
      in_header: false
    min: 0
    max: 20
style: |
  ha-card {
     --ha-card-background: rgba(0, 0, 0, 0);
     box-shadow: none;
     margin: 0px 0px 0px 0px;
     font-size: 15px;
     font-family: 'Segoe UI Light";
     text-align: center
   }
   div#header__title {
     font-size: 20px;
     font-weight: 300;
     font-family: 'Segoe UI Light";
     font-color: #ff0000
   }

Is it possible to transform one yaxis, so i can change the winddirection (0-360) to:
0 = N, 90 = E, 180 = S etc?
wind

Dear,

I’m trying to fix decimal place of the " Total " value to 1 on my donut chart. Unfortunately after so many testing hours I did not reach any success that’s why I’m now writing there ! I hope somebody will tell me “Hey, try that it will works !” :slight_smile:

Behavior of my donut card (too much decimal) :

My current code corresponding to the above picture :

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 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'

Below one of my test => shows “462” value :

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 kWh
            formatter: |
              EVAL:function(value) {
                return "462";
              }
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'

Below a second test with total.formatter => show object object

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 kWh
            formatter: |
              EVAL:function(dd) {
                return dd;
              }
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'

Below another test with total.formatter => not working…

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 kWh
            formatter: |
              EVAL:function(dd) {
                return dd.toFixed(0) + " %";
              }
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'

I found a more promissing done, I suceed to display the total with the “formatter” option active.

Now I just need to find how to use the toFixed(1) function combined with the below code… I still need support for that.

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(3) + " %";
      }
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: Total kWh
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0)
                }
series:
  - entity: sensor.bilan_autoconso_gain_3000wc_now
    name: Prod. solaire
    float_precision: 3
    color: '#2ECC71'
  - entity: sensor.daily_lg_chem_total_energy_saved
    name: Fourn. batteries
    float_precision: 3
    color: '#3498DB'
  - entity: sensor.daily_lg_chem_simulated_grid_export_after_battery_charging
    name: Réinj. ENEDIS
    float_precision: 3
    color: '#8E44AD'
  - entity: sensor.daily_lg_chem_simulated_grid_import_after_battery_discharging
    name: Conso ENEDIS
    float_precision: 3
    color: '#E74C3C'
1 Like

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'

13 Likes

Thanx been looking for a fix for this to

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

image

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

image
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 :slight_smile:

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!

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

image

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

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

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.

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?

@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)

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

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!

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

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

1 Like