ApexCharts card - A highly customizable graph card

Maybe, the template sensor code is in my post above and there I (think I) convert it to a float.

Edit:
Working now, me being stupid as always :slight_smile:

Thanks. I think I need to set up a test environment for this, or take a snapshot of my HA VM before trying again. I’m not going to risk putting any Apex Chart in my regular dashboard again. It’s that bad.

Try with first remove 1 of the sensors from this apex-card

ie.

  1. remove solarnet-power-photo
  2. remove

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

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, i can’t say much, but your “bog down” seems related to power/resource whether it’s cpu/ram or network , should be fairly easy to figure out

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 … i mean the graph your showing aint showing a nice thin line, the blue line is very irregular , same goes for the pink for that matter, so there is heavy activity, i don’t know where this info gets trans-coded, or whether it’s raw … 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

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 ?..

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

I am sure this “transform” also is a large “bog down” source, you basically let your HA frontend do the math , of a solar-power-production sensor

nobody find?

Hi. I think i found your post, and by setting the width to 200000% made it look ok. But i have another chart too, showing tomorrows price when it’s available, and that one reacts completely different. adding a wider space before the last column and not making them the same size as the other chart


      type: custom:apexcharts-card
      header:
        title: ' '
        show: true
        show_states: true
        colorize_states: true
      graph_span: 10d
      span:
        start: day
        offset: '-9d'
      apex_config:
        legend:
          show: false
        plotOptions:
          bar:
            columnWidth: 200000%
        dataLabels:
          enabled: false
      series:
        - entity: sensor.elpris_idag
          type: column
          color: '#03a9f4'
          group_by:
            func: max
            duration: 1day
          name: Idag
          extend_to: false
          #stroke_width: 12
        - entity: sensor.snittpris_denna_manad
          type: line
          name: Snittpris
          stroke_width: 5
          fill_raw: last
          curve: smooth
          color: lightblue

VS

      type: custom:apexcharts-card
      header:
        title: ' '
        show: true
        show_states: true
        colorize_states: true
      graph_span: 10d
      span:
        start: day
        offset: '-8d'
      apex_config:
        legend:
          show: false
        plotOptions:
          bar:
            columnWidth: 200000%
        dataLabels:
          enabled: false
      series:
        - entity: sensor.elpris_idag
          type: column
          color: '#03a9f4'
          group_by:
            func: max
            duration: 1day
          name: Idag
          extend_to: false
          #stroke_width: 12
        - entity: sensor.elpris_imorgon
          type: column
          color: blue
          group_by:
            func: last
            duration: 1day
          name: Imorgon
          extend_to: false
          #stroke_width: 12
          data_generator: |
            return [[new Date(entity.attributes.datum).getTime(), entity.state]]
        - entity: sensor.snittpris_denna_manad
          type: line
          name: Snittpris
          stroke_width: 5
          fill_raw: last
          curve: smooth
          color: lightblue

VS ???, i have no idea what you are “dealing” with … and it’s definitive first time in any category i’ve heard of 200.000%

seriously you are on your own, don’t refer to me :slight_smile:

PS: i tried to copy/paste your “code” to a view/card here, it absolutely dont work !, NOT even if i remove everthing from VS and donw, so i only should have the first graph, wrong intends !!! , sorry can’t help you on this as it’s not “obvious” what you are doing here

PS: somewhere in your code you have a wrong intend, i can’t find it, thou i can make a similar card, with same sensor, AND without 200000%, as this number is obvious wrong

  1. Whats does this sensor provide ?
sensor.elpris_idag

Is it current pries ( 1 , entry at a given time , during the day ?), or is it ALL prises during “today” ? (i.e like a forecast)

Same goes for

sounds pretty much like a “forecast” :wink:
for these , as i assume is ALL prises during the day / or during tomorrow , it makes no sense in making a graph using “group by max” and then “duration” day

for those 2 sensors, which expose several values, during the day/tomorrow, most likely 1 for each hour, and you can make a graph for that “using raw” ALL data points, im pretty sure neither here in SE, nor DK or NO, have 1 single “elpris_idag”, , so this/these sensors provide you with several , prices, and you can’t uses a card to summarize this, and giving it any sense

I wasn’t looking, but I did see a posted solution for this problem in this year !!

Hi @Kertz1954, please excuse my delay. I have 6 plots and 4 additional values in the header ut not in the chart. I defined three yaxis and referenced them via id. If i hide the first entity of my series with yaxis-id= energy_axis_day the complete yaxis disapperas, otherwise there are 4 other entities with the same yaxis left.

type: custom:apexcharts-card
header:
  show: true
  title: PV-Leistungsübersicht (heute)
  show_states: true
  colorize_states: true
update_interval: 1m
graph_span: 24h
show:
  last_updated: true
apex_config:
  chart:
    height: 300%
span:
  start: day
  offset: '-0d'
yaxis:
  - id: percent
    min: 0
    max: 100
    decimals: 0
    apex_config:
      tickAmount: 5
  - id: energy_axis_day
    decimals: 0
    min: 0
    max: ~10000
    opposite: true
    align_to: 1000
    apex_config:
      tickAmount: 5
  - id: none
    show: false
now:
  show: true
  color: red
series:
  - entity: sensor.e3dc_battery_soc
    yaxis_id: percent
    type: area
    opacity: 0.3
    name: Batterie
    color: rgb(209, 226, 175)
    stroke_width: 2
    group_by:
      func: last
      duration: 30m
    show:
      in_header: false
      in_chart: true
      extremas: false
  - entity: sensor.e3dc_power_consumption
    yaxis_id: energy_axis_day
    type: line
    name: Hausverbrauch
    color: rgb(204, 51, 51)
    stroke_width: 2
    extend_to: false
    group_by:
      func: last
      duration: 12m
    show:
      in_header: false
      in_chart: true
      extremas: false
  - entity: sensor.e3dc_grid_power_in
    yaxis_id: energy_axis_day
    type: line
    name: Netzbezug
    color: rgb(0, 102, 128)
    stroke_width: 2
    extend_to: false
    group_by:
      func: last
      duration: 12m
    show:
      in_header: false
      in_chart: true
      extremas: false
  - entity: sensor.e3dc_wallbox_power
    yaxis_id: energy_axis_day
    type: line
    name: Wallbox
    color: grey
    stroke_width: 2
    extend_to: false
    group_by:
      func: last
      duration: 12m
    show:
      in_header: false
      in_chart: true
      extremas: false
  - entity: sensor.e3dc_grid_power_out
    yaxis_id: energy_axis_day
    type: line
    name: Netzeinspeisung
    color: rgb(0, 164, 206)
    stroke_width: 2
    extend_to: false
    group_by:
      func: last
      duration: 12m
    show:
      in_header: false
      in_chart: true
      extremas: false
  - entity: sensor.solar_power_overall
    yaxis_id: energy_axis_day
    type: line
    name: PV (gesamt)
    color: rgb(255, 194, 56)
    stroke_width: 2
    group_by:
      func: last
      duration: 12m
    show:
      in_header: false
      in_chart: true
      extremas: false
  - entity: sensor.total_energy_yield_day
    yaxis_id: none
    name: PV (Tag)
    color: rgb(255, 194, 56)
    group_by:
      func: last
      duration: 12m
    show:
      in_header: true
      in_chart: false
      extremas: false
  - entity: sensor.netzbezug_tag
    yaxis_id: none
    name: Netzbezug (Tag)
    color: rgb(0, 102, 128)
    group_by:
      func: last
      duration: 12m
    show:
      in_header: true
      in_chart: false
      extremas: false
  - entity: sensor.netzeinspeisung_tag
    yaxis_id: none
    name: Netzeinspeisung (Tag)
    color: rgb(0, 164, 206)
    group_by:
      func: last
      duration: 12m
    show:
      in_header: true
      in_chart: false
      extremas: false
  - entity: sensor.hausverbrauch_tag
    yaxis_id: none
    name: Hausverbrauch (Tag)
    color: rgb(204, 51, 51)
    stroke_width: 2
    group_by:
      func: last
      duration: 12m
    show:
      in_header: true
      in_chart: false
      extremas: false

If you have any idea please give me a hint.

Best regards,
Chrclaus

Hi there, yet another question: I want to groupBy data on a monthly basis. As i noticed

group_by:
  duration: 4w

does not work for months. Does anybody has a workaround for example on a weekly-basis like i did to keep the monthly-interval?

type: custom:apexcharts-card
apex_config:
  chart:
    stacked: true
update_interval: 1d
graph_span: 4w
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: [...continiuos...]

Best regards,
Chrclaus

the VS was a way to show it is two separate charts. I have them in conditional cards in a vertical stack card, maybe thats why the intendention is wrong. The sensors are template sensors that show the average price today and the average price tomorrow. the today sensor gets it’s value at 00:00:00 and the tomorrow sensor gets its value when nordpool releases the new prices

1 Like

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.

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

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.

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:

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?

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.

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

Grafana is build for this, HA frontend is not

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

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)

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 
1 Like

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

daily by month

and 31 days for March, etc ?

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 !! :slightly_smiling_face:

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?
image
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