ApexCharts card - A highly customizable graph card

[wattmatters]

@boheme61

1. remove

@wattmatters

> yaxis:
  - min: 0
    max: 3000
> ```

as this seems in conflict with the 8000W that seems to be registered in your native history card

Thanks, the reason for that axis limit is the transform lower down, as that native value is divided by 3 for display in the chart. I have the same calculation performed by Grafana on the same data stream without issue.

@boheme61

Lets say your solar_power_prod_sensor , spewing 8000W ( to your limited to 3000 graph ) AND at the same time does this in a constant flow with 1 seconds interval

That data is supplied in 10 second intervals. Not sure why that’s a problem for charting?

@boheme61

and i don’t see any “group_by” in your card … so i think you basically trowing in a homogeneous amount of information, which the card obviously have hard to deal with

OK, I’m not familiar with this option. This is my first attempt at an Apex Chart.

It would seem you use this if you want to display data combined into intervals like for each hour, or day. I don’t want that, I want the plot to show actual data.

@boheme61

Not to mention: … i assume you are aware that the “graphs” you are trying to “create” is COLUMNS , not lines, now that would look interesting in a detailed scale, considering the amount of “points” ( which are not group-ed) , how often does this(these) sensors “update” … spewing out tons of info in “buckets” or ? , small, large buckets ? , does each “bucket” crave a column ?..

Well I’m after a certain look, so I tried line, column and area. The column seemed to give the look I was after, similar to this Grafana column chart from the same data stream:

@boheme61

if you still have problems after removing these 2, i would look into / monitoring your system and network resources, as im not familiar with what system you have your HA on, nor which device you trying to view your Graphs from,

My HA runs via a Proxmox VM on a mini PC (Lenovo M93p Tiny PC Intel i5-4570T 2.90GHz). For the VM I have allocated 2 cores, 4 GB RAM, and 32 GB of the SSD. In every other aspect of operation the system is zippy.

Viewed mostly via a Chrome browser on my Macbook.

You are right, I’m not completely sure where the issue is. What I experienced was my browser bogging down and running my Macbook hard. I don’t know what the HA server itself was doing. Without being able to view it, not sure how I can tell?

@boheme61

PS: sorry for my way of writing, but before you criticize and spew your negative opinions, be sure you know what you are doing

It’s OK. I’m here to learn what I don’t know. The documentation for this add on doesn’t mention anything about requiring some of these things for a chart to render without it being massively resource intensive.

It’s just frustrating. I recently watched a video tutorial on using Apex charts and they were recommended as a good alternative to Grafana as I want them to appear on my HA dashboard and to explore some alternative, attractive and insightful ways of presenting data.

None of these things were mentioned as being required, neither were any of the issues. When I went to look at the GitHub issues page it seems there was a long running thread where lots of others were experiencing the same problems without resolution. So I figured I have the same problem but no one published a solution.

I am loathe to try again because of the way I lose control of my HA when I add a chart. As soon as I add chart code to edit it the problems start.

[boheme61]

hmmm, ok, so you are combining statistic data, with “forecast” data— in my scenario i used 1 data-source , 1 sensor, where the attributes are raw_today / raw_tomorrow, , and from these data the graph/bars is being rendered … that for my el-pries, graph

The weather-graph as i linked to is obvious entirely “forecast” with “realtime” to the most left

I must say im very confused about what your template sensors provide

[boheme61]

@wattmatters

I have the same calculation performed by Grafana on the same data stream without issue.

Grafana is build for this, HA frontend is not

@wattmatters

That data is supplied in 10 second intervals

So each bar /column is generated every 10 seconds ?

I jump abit here … Yes Grafana is nice And more easy to use, it’s an add-on that are build for graphs, frankly HA frontend is not !

So again as im not familiar with your “sensors” … start “small” start with the 1 sensor i mentioned , try to search this forum for a similar “solution” solar/hotwater-heather or similar, but try to start with the power_hot_water, and a simple graph “line” , as you have in the native-history-card

[netroize (Mårten Sörliden)]

Hi!
Is there a way to make the color thresholds dependent on a value from a sensor?
I have data from Nord Pool and want to see which hours the spot price is below a variabel input value.
Any specific syntax needed to make a value reference?
This doesn’t work:

    color_threshold:
      - value: 0
        color: var(--success-color)
      - value: input_number.max_spotpris
        color: var(--error-color)

[Kertz1954]

You will need to add the custom config-template-card to your system.
Remember to indent your current APC code by 2 extra spaces after adding the first 4 new lines to your code.

type: custom:config-template-card
entities:
  - input_number.max_spotpris
card:
  type: custom:apexcharts-card
  experimental:
    color_threshold: true


  series:
    - entity: 

      color_threshold:
        - value: 0
          color: var(--success-color)
        - value: ${states['input_number.max_spotpris'].state}
          color: var(--error-color)

    - entity:

      etc 

[Kertz1954]

Do you mean like show 28 days for this month, like this.

and 31 days for March, etc ?

[Kertz1954]

This is a bug when using the HA yaxis method.

However you can use the original APC yaxis method which does not remove the yaxis labels when you click on the legends.

As requested, I will give you a hint, but after you have replied to my other response for your second question. It will save you time !!

[chrclaus]

Do you mean like show 28 days for this month, like this.
and 31 days for March, etc ?

I want to aggregate data per month. Currently I´m using 4w as duration which results correctly in a time-interval from 04.01 to 31.01. (28 days = 4w * 7) in the left stacked bar. A third bar more left starts at the 08.12. and so on. Is there a trick to aggregate all data from january in one bar, from december in another and so on?

My configuration:

type: custom:apexcharts-card
apex_config:
  chart:
    stacked: true
update_interval: 1d
graph_span: 16w
span:
  end: month
show:
  last_updated: true
header:
  show: true
  title: Energie-Übersicht (Monat)
  show_states: true
  colorize_states: true
series:
  - entity: sensor.energy_e3dc_wallbox
    type: column
    name: Wallbox
    color: grey
    group_by:
      func: delta
      duration: 4w
      fill: zero
  - entity: sensor.energy_grid_feed_in
    type: column
    name: Netzeinspeisung
    color: rgb(0, 164, 206)
    group_by:
      func: delta
      duration: 4w
      fill: zero
  - entity: sensor.energy_grid_usage
    type: column
    name: Netzbezug
    color: red
    group_by:
      func: delta
      duration: 4w
      fill: zero
  - entity: sensor.scb_energy_yield_total
    type: column
    name: Solar (Carport)
    color: '#FB9900'
    group_by:
      func: delta
      duration: 4w
      fill: zero
  - entity: sensor.energy_solar_production
    type: column
    name: Solar (Haus)
    color: '#F7E900'
    group_by:
      func: delta
      duration: 4w
      fill: zero

Best regards
Chrclaus

[chrclaus]

As requested, I will give you a hint, but after you have replied to my other response for your second question. It will save you time !!

Thanks

[Kertz1954]

Yes, you can do that. Here’s an example of my least favorite chart !!

Example code changes:-

graph_span: 13month

span:
  end: month

      duration: 1month

The documentation says that the duration does not work for monthly charts, but it has worked for me.

The only thing that did not work was the tooltip showing incorrect month, so after checking your result, add this to your apex_config.

  tooltip:
    enabled: true
    theme: light
    style:
      fontsize: 6px
    onDatasetHover:
      highlightDataSeries: true
    x:
      show: true
      format: MMM yyyy
      formatter: |
        EVAL:function(value) {
          const array_list = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']      
          const unixts = value;
          const date = new Date(unixts);
          var syear = date.getFullYear();
          var smth =  ("0" + (date.getMonth() + 1)).slice(-2);
          var x = 0 * 1;
          if (smth === "12") {
            syear = '2003';
                        
            var result = array_list[x] + ' ' + syear;
            return result;
          }
          else
          {
            x = smth * 1;
            var result = array_list[x] + ' ' + syear;         
            return result;
          }
        }      
    marker:
      show: true
    fixed:
      enabled: false
      position: topRight
      offsetX: -10
      offsetY: 0

[mathewtaylor2007 (Mat)]

Hi all, is there anyway of changing the fontsize of the extrema objects on a graph?
Thanks,
Mat

[chrclaus]

Yes, you can do that. Here’s an example of my least favorite chart !!

Great tip. Works fine. Thank you very muc

[Kertz1954]

You can also add a total to your tooltip for the yaxis part by adding the following code.
Note, increase the array_list to 5 (5 series) and change the text to match each series name.

    'y':
      formatter: |
        EVAL:function(value, { series, seriesIndex, dataPointIndex, w }) {
          const array_list = ['Electric: €','Gas: €']
          let currentTotal = 0;
          let detailTotal = '';
          let x = 0 * 1;
          series.forEach((s) => {
            currentTotal += s[dataPointIndex];
            detailTotal = detailTotal + array_list[x] + s[dataPointIndex].toFixed(2).replace(".", ",") + '<br>';
            x++;
          })
          return '<div class="custom-tooltip">'+
            detailTotal +
            '<span><b>Total: €</b>' + currentTotal.toFixed(2).replace(".", ",") + '</span>' +
            '</div>'              
          }        
      title:
        formatter: |
          EVAL:function(value){
            value = ''; 
            return value;
            }

[netroize (Mårten Sörliden)]

Thanks!
However I still have a problem. ${states['input_number.max_spotpris'].state} is converted to '0.27', a string. I tried to convert to float with ${states['input_number.max_spotpris'].state | float } but that doesn’t work. Any other way to convert to float?

[Kertz1954]

Try this;

${states['input_number.max_spotpris'].state * 1}

[Kneh]

Hello,

i use the InfluxDB integration. I want to plot a graph from the database.
I use this code, but the graph stays on loading.

type: custom:apexcharts-card
header:
  show: true
  title: Solar Monthly Production
  show_states: false
  colorize_states: true
apex_config:
  chart:
    height: 270
    extend_to_end: false
  yaxis:
    min: 0
    max: 100
  stroke:
    show: true
    width: 1
  legend:
    show: true
graph_span: 12 month
span:
  end: month
series:
  - entity: sensor.influx_outside_temp
    type: column
    name: Monthly Production
    color: green
    show:
      datalabels: true
    group_by:
      duration: 1month
    data_generator: |
      console.log(start); var params = new URLSearchParams({
          u: "homeassistant",
          p: "homeassistant",
          db: "homeassistant",
          q: "SELECT \"value\" FROM \"kWh\" WHERE \"entity_id\" = 'gw2000_xs_totaal_vermogen_vandaag' AND time < now()"
          });

      var myInit = { method: 'GET',
                      headers: {
                          'Accept': 'application/json',
                      },
                      mode: 'cors',
                      cache: 'default' 
      };
      const request = async () => {
          var result = [];
          const response = await fetch('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]]);
              }
          } else {
              console.log("error: " + json)
          }
          console.log("return: " + json) 
          return result;
      } return request();
update_interval: 1m

I don’t know the exact output of the url but if i use:
192.168.2.19:8086/query?db=homeassistant&q=SELECT+“value”+FROM+“kWh”+WHERE+“entity_id”+=+‘gw2000_xs_totaal_vermogen_vandaag’

I get this data:
{“results”:[{“statement_id”:0,“series”:[{“name”:“kWh”,“columns”:[“time”,“value”],“values”:[[“2023-02-21T22:00:00Z”,0.9],[“2023-02-22T22:00:00Z”,2.8],[“2023-02-28T16:46:30.299409Z”,7]]}]}]}

[boheme61]

@Kneh

I use this code, but the graph stays on loading.

Sorry i don’t see any code … maybe you forgot to read first Topic, in regards to presenting

code

[Kneh]

I can see the code, only the ‘’’ doesn’t work like expected.

[boheme61]

( ``` ) because it’s back-ticks you should use

[netroize (Mårten Sörliden)]

This is great. Thanks!