ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
2581

Haven’t my self , but 1 guy further up in this topic has, and if you google github(apexchart) , or google in common, there are few more issues in regards to this.

Seems like a common involved “component” is Iphone/ipad and Safari ( Maybe i.e Browser or GPU can’t handle _windowResize, properly

My ( unspoken/ secret ) opinion in this matter is … Well i stay far away from any Apple-Products, guess that says it in a proper way :grin:

EDIT: thou i don’t believe it’s only during _windowResize , most likely also during “graph-updates” … either caused by to many entities in graph, or extensive updates ( values/seconds )

2582

Okay, thanks for taking the time to reply. However, the answer “just google it”, isn’t helpful.

I already did the googling and I read a lot of this extensive topic, unsuccessfully, hence my question.
I’m on a HP laptop, with windows, in Chrome browser, no Apple here, so that isn’t the root of this evil, maybe WebKit is?

When I have the time I will do some debugging, in de meantime, if anyone else already found the source of these errors, please let me know.

2583

Well yo asked, ( Did anyone encounter these errors? ) , so that was basically what i answered to , i could just have wrote " Yes, Look above "
… thou i thought being a little more helpful, spite the fact that neither you OR above mentioned person have provided no further debug, and no SPECs of your Apex-Config … Which you seems to suspect cause this

But to your “defense” yes you did mention

What script ?

2584

Your grammar and comments don’t help anyone.

I am searching for someone who has encountered these errors, and might have a solution, you do not seem to be that person.

2585

Would be easy to “exclude” , trying in another browser ! …

Below is from Wiki

That is if your about to “troubleshoot” Webkit

2586

Not getting borderRadius to work on column chart. Should be doable as I understand it from the docs. Am I doing it wrong or isn’t it possible?

apex_config:
  plotoptions:
      bar:
        borderRadius: 5

Another questions. Can the width and/or spacing between columns be defined somehow?

2587

intend:
Move "bar: border " back a step

2588

Not sure what happened when I pasted the code but this is how it looks. That should be correct, right?

  plotoptions:
    bar:
      borderRadius: 5
2589

yes, and then the whole config and a pic of the graph … if you have further questions in regards to the result you get/expect :wink:

2590

I hear you :slight_smile:

type: custom:apexcharts-card
header:
  title: ''
  show: false
  show_states: true
  colorize_states: false
graph_span: 2d
now:
  show: false
  color: orange
  label: nu
span:
  start: day
stacked: true
apex_config:
  forceNiceScale: true
  tooltip:
    enabled: true
    x:
      format: H:00
    'y':
      show: false
  label: Now
  grid:
    show: true
    borderColor: rgba(255, 255, 255, 0.15
    strokeDashArray: 4
    position: back
  xaxis:
    tooltip:
      enabled: false
    axisBorder:
      show: false
    labels:
      style:
        colors: white
        fontSize: 10px
        fontFamily: Segoe UI Light
  chart:
    height: 225
  legend:
    show: false
  plotoptions:
    bar:
      borderRadius: 5
  dataLabels:
    enabled: true
    offsetY: -9
    background:
      foreColor: black
      dropShadow:
        enabled: true
        opacity: 1
        top: 1
        left: 1
        color: black
    style:
      fontSize: 10px
      fontFamily: Segoe UI Light
  stroke:
    width: 0
yaxis:
  - min: 0
    max: ~3
    apex_config:
      forceNiceScale: true
      decimalsInFloat: 1
      labels:
        style:
          colors: '#ffffff'
          fontSize: 10px
          fontFamily: Segoe UI Light
series:
  - entity: sensor.nordpool_kwh_se3_sek_2_10_025
    name: Elpris
    time_delta: +30m
    type: column
    color: rgba(220, 220, 220, 0.0)
    float_precision: 2
    unit: kr
    extend_to: now
    data_generator: |
      return (entity.attributes.raw_today.map((entry) => {
        const nu = new Date()
        const series_entry = new Date(entry.start)
        if(nu.getHours() == series_entry.getHours())
          {return [new Date(entry.start).getTime(), 0]}
        return [series_entry, entry.value+parseFloat(hass.states['sensor.elpris_paslag'].state)];
      })).concat(entity.attributes.raw_tomorrow.map((entry) => {
        return [new Date(entry.start).getTime(), entry.value+parseFloat(hass.states['sensor.elpris_paslag'].state)];
      }));
  - entity: sensor.nordpool_kwh_se3_sek_2_10_025
    name: Elpris
    time_delta: +30m
    type: column
    color: '#ffa04d'
    float_precision: 2
    unit: kr
    show:
      datalabels: true
    extend_to: now
    data_generator: |
      return (entity.attributes.raw_today.map((entry) => {
        const nu = new Date()
        const series_entry = new Date(entry.start)
        if(nu.getHours() == series_entry.getHours())
          {return [new Date(entry.start).getTime(), entry.value+parseFloat(hass.states['sensor.elpris_paslag'].state)]}
        return [series_entry, 0];
      }));
style: |
  ha-card {
     --ha-card-background: rgba(0, 0, 0, 0);
     box-shadow: none;
     margin: 30px 8px 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
  }

image
image1118×620 17.5 KB

2591

why do you have this ?

2592

I use two series to be able to make the current hour orange. One serie is set to 0 via data generator for all hours except the current one, the other serie is set to 0 for the current hour

Can it be done in a more elegant way? Yes!
Am I a sub-par programmer, also yes! :laughing:

I get the same result with inte serie without stacked.

2593

ahh, i see … i just assumed you had 2 series after each other ( i.e today / tomorrow ) … like i have for data from Tibber, SE4

Im not sure what “ticks” it in your code, i had problems with anything above 12 hours ( 12 columns ) , not sure that’s the cause, but the example actually only shows 12

EDIT: and i tried your code with my entities, thou then i discovered you had “paslag” entities in your "data_generator: " script , beside i got “labels” on top of each column , so couldn’t see nothing

PS: only thing i can think of here is try with

add stroke width 5

PS2, i know stroke_width on columns don’t “bite” but in the case of borderRadius it can do

another test is:

show: true

2594

I know I’ve posted this above, but just wanted to try again incase anyone had any thoughts. Thanks…

I have the following card, that will show monthly data over 12 months. However as you can see in the below screenshot, the x-axis is grouped in the center of the card, rather than being spread across the full width of the card.

I don’t seem to have this issue with other cards I have created. It possibly might be something to do the fact I’m using statistics in the entities, I don’t see why they would, but my other cards don’t seem to have this issue (which don’t use the statistics)

Any thoughts on anything I could try? I seem to have been going in circles without much success.

Thanks for any help or suggestions!

Screenshot 2023-03-14 at 12.14.16
Screenshot 2023-03-14 at 12.14.161034×370 17.6 KB 

type: custom:apexcharts-card
header:
  show: true
  title: Monthly Energy Savings
  show_states: true
  colorize_states: true
  floating: false
  disable_actions: true
graph_span: 12month
span:
  end: month
show:
  last_updated: true
stacked: true
apex_config:
  chart:
    height: 295
  stroke:
    show: false
  legend:
    show: false
yaxis:
  - min: 0
    max: ~10
    decimals: 0
    apex_config:
      tickAmount: 4
series:
  - entity: sensor.battery_savings_monthly
    name: Battery So Far This Month
    color: '#5692A9'
    type: column
    float_precision: 2
    statistics:
      type: state
      period: month
      align: end
  - entity: sensor.solar_savings_monthly
    name: Solar So Far This Month
    color: '#F29C38'
    type: column
    float_precision: 2
    statistics:
      type: state
      period: month
      align: end
  - entity: sensor.battery_solar_savings_monthly
    name: Total So Far This Month
    color: '#598EBE'
    type: line
    float_precision: 2
    show:
      datalabels: true
    statistics:
      type: state
      period: month
      align: end
2595

The answer to my own question, I hope it will help others.

For anyone browsing the topic trying to find a solution for the multitude of console errors clogging your memory. For instance, <svg> attribute height: Expected length, "NaN" and Error: <path> attribute d: Expected number, "M 0 NaN". Present in the (now) current version: v2.0.2.

This is a known bug in the apex chart library, caused by its inability to work with null values.
It was suggested to remove the null values, so that is what I did.

Go to config/www/community/apexcharts-card. Remove the file apexcharts-card.js.gz.
Open the file apexcharts-card.js, and find “this._computedHistory=a.data;”. After the semicolon, add the following string.

const ch=this._computedHistory;for(let x in ch)if(ch[x][1]==null)ch.splice(x, 1);

Explained: _coputedHistory is the field the data is stored, when the data point (represented by ch[x][1]) is null, then remove the whole data entry.

Your not done yet! Then, go to settings > dashboards, click the three dots (top right) > sources. Find the entry “/hacsfiles/apexcharts-card/apexcharts-card.js?hacstag=123456”, and just add a ‘x’ to the end of it. Now reload your browser, thats it.

This will not remove most, not all, errors.

To @RomRider, my suggestion for a temporary patch.

Cheers,
– Ingrid

PS: it has nothing to do with browser or config whatsoever, so ignore the comments above.

2596

Hello,
is it possible to display the entity name next to the matching section on the donut card
Thank You

2597

Hello,

my apexcharts card says Loading…

This is my code:

type: custom:apexcharts-card
header:
  show: true
  title: Solar Production - Daily
  show_states: false
  colorize_states: true
apex_config:
  chart:
    height: 440
    extend_to: now
  yaxis:
    min: 0
    max: 30
    forceNiceScale: true
  stroke:
    show: true
    width: 2
  legend:
    show: true
  experimental:
    brush: true
graph_span: 1month
span:
  end: day
series:
  - entity: sensor.influxdb_read
    type: column
    name: Daily Production
    color: '#acd373'
    extend_to: false
    show:
      in_brush: true
    group_by:
      duration: 24hour
      func: first
    data_generator: |
      var params = new URLSearchParams({
          u: "homeassistant",
          p: "homeassistant",
          db: "homeassistant",
          q: "SELECT max(\"value\") FROM \"sensor.gw2000_xs_totaal_vermogen_vandaag\" WHERE \"entity_id\" = 'gw2000_xs_totaal_vermogen_vandaag' GROUP BY time(1d) fill(none)"
          });

      var myInit = { method: 'GET',
                      headers: {
                          'Accept': 'application/json',
                      },
                      mode: 'cors',
                      cache: 'default' 
      };

      const request = async () => {
          var result = [];
          const response = await fetch('http://192.168.2.19:8086/query?' + params, myInit)
          const json = await response.json();
          if (json["results"] && json["results"][0] && json["results"][0]["series"] && json["results"][0]["series"][0] && json["results"][0]["series"][0]["values"]) {
              for(var val of json["results"][0]["series"][0]["values"]) {
                  result.push([new Date(val[0]), val[1]]);
              }
          } 
          return result;
      }
      return request();
update_interval: 5m

I have tested the URLSearchParams in Visual Studio Code, it gives a correct url.

http://192.168.2.19:8086/query?u=homeassistant&p=homeassistant&db=homeassistant&q=SELECT+max%28%22value%22%29+FROM+%22sensor.gw2000_xs_totaal_vermogen_vandaag%22+WHERE+%22entity_id%22+%3D+%27gw2000_xs_totaal_vermogen_vandaag%27+GROUP+BY+time%281d%29+fill%28none%29

This is the data from the url:

image
image1580×69 6.76 KB

Have someone a idea, what is wrong?

2598

Float_precision not working?
Team,
For some time the Y-axis decimals stopped working.
Config

series:
  - entity: sensor.entsoe_energy_prices_today
    type: line
    name: EntsoE
    float_precision: 2
    group_by:
      func: avg
    show:
      in_header: true
    data_generator: |
      return entity.attributes.prices_today.map((record, index) => {
              return [new Date(record.time).getTime(), record.price];
            });

I also have a Y-axis config

apex_config:
  xaxis:
    labels:
      datetimeFormatter:
        hour: H
  yaxis:
    tickAmount: 10
    y_axis_precision: 2
    float_precision: 2

But the Y-Axis still showing 1 decimal
image

Any idea how to get the Y-axis to show 2 decimals?

2599

Hint, add this code to your yaxis :grinning_face_with_smiling_eyes:

    title: 
      text: 'I have not read the documentation in a long time !!'
2600

There are 2 methods.

The first is the default tooltip when you hover over a ‘slice’.

The second is to display the entity name in the center of the donut when you hover over a slice.

Full details can be found in the official APC documentation.