ApexCharts card - A highly customizable graph card

moelito · October 10, 2022, 10:49am

Hi!
I’m playing around with my own energy usage graph and found one strange issue. I want to use a stacked bar graph but the stacking doesn’t work as intended, it’s missing some values!
The strange thing is that for my hourly usage it seems to work, but not for my daily graph.

Look here:

For example, “Freezer” is missing in the daily graph.

Here is the configuration:

type: custom:apexcharts-card
graph_span: 2days
stacked: true
header:
  show: true
  title: Daily Energy Usage
  show_states: false
all_series_config:
  type: column
  group_by:
    func: last
    duration: 1day
series:
  - entity: sensor.computer_desk_daily_energy
    name: Workdesk
  - entity: sensor.washing_machine_daily_energy
    name: Washingm
  - entity: sensor.dishwasher_daily_energy
    name: Dishw
  - entity: sensor.fridge_and_freezer_daily_energy
    name: Freezer
  - entity: sensor.heatpump_hallway_daily_energy
    name: Heat Ds
  - entity: sensor.heatpump_livingroom_daily_energy
    name: Heat us
  - entity: sensor.it_network_daily_energy
    name: IT Netw
  - entity: sensor.kitchen_media_daily_energy
    name: Kitchen media
  - entity: sensor.media_bench_daily_energy
    name: Livingr meadia
  - entity: sensor.ps4_setup_daily_energy
    name: PS4 setup
  - entity: sensor.drying_machine_daily_energy
    name: Dryer
  - entity: sensor.unknown_energy_daily
    name: Other

Anyone have a clue?

EDIT: Found it, for some unknown reason, my hourly utility meters were set to 0 when created but not all of the daily ones (was N/A). Using the utility meter calibration service setting the N/A values to 0 fixed the problem.

flemmingss · October 10, 2022, 9:12pm

I have a problem with one of my graphs. This is a wall-display always visible in my living room, running on a rasperry pi.
after some time the blue graph (energy kwh just dissapair, if I F5/refresh browser it comes back.
anyone know why?

code:

Fettkeewl · October 11, 2022, 10:42am

Ay yo! Great card. Im using it to show the current electricity prices. I also have a toggle switch which affects the graph shown to toggle with/without VAT on electricity prices. The toggle however does not force update the graph I instead must refresh the page.

Is there a way to force update the graph?

The code is not mine, i just added the VAT toggle.

type: custom:apexcharts-card
graph_span: 48h
span:
  start: day
  offset: +0H
header:
  title: Spotpris EL för Mellansverige, Zon E3 (ink. moms)
  show: true
  show_states: false
  colorize_states: true
hours_12: false
stacked: false
experimental:
  color_threshold: true
all_series_config:
  show:
    legend_value: false
    datalabels: false
    extremas: true
    in_brush: true
  float_precision: 3
  type: area
  invert: false
  fill_raw: last
  color_threshold:
    - value: -1
      color: 1E90FF
    - value: 2.5
      color: '008000'
    - value: 3.5
      color: DAA520
    - value: 4.5
      color: FF0000
now:
  show: true
  label: NU
  color: purple
series:
  - entity: sensor.spotpris_se3
    name: Current day
    opacity: 0.5
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"] * (hass.states["input_boolean.nordpool_vat"].state == "on" ? 1:0.8)];
      });
  - entity: sensor.spotpris_se3
    name: Tomorrow
    opacity: 0.5
    data_generator: |
      return entity.attributes.raw_tomorrow.map((start, index) => {

        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"] * (hass.states["input_boolean.nordpool_vat"].state == "on" ? 1:0.8)];

      });
apex_config:
  chart:
    height: 400px
    animations:
      enabled: true
      easing: easeinout
      speed: 800
      animateGradually:
        enabled: true
        delay: 150
    zoom:
      enabled: true
      type: x
      autoScaleYaxis: true
      zoomedArea:
        fill:
          color: '#90CAF9'
          opacity: 0.4
        stroke:
          color: '#0D47A1'
          opacity: 0.4
          width: 1
  legend:
    show: false
    floating: true
    offsetY: 25
  yaxis:
    opposite: false
    reversed: false
    logarithmic: false
    decimalsInFloat: 2
    labels:
      show: true
    tooltip:
      enabled: true
    crosshairs:
      show: true
  xaxis:
    labels:
      show: true
      rotate: -45
      rotateAlways: true
    logarithmic: true
  stroke:
    show: true
    curve: stepline
    lineCap: butt
    colors: undefined
  plotOptions:
    candlestick:
      colors:
        upward: '#00B746'
        downward: '#EF403C'
      wick:
        useFillColor: true
  markers:
    size: 1
  grid:
    show: true
    strokeDashArray: 1
    position: front
    xaxis:
      lines:
        show: true

Holdestmade · October 11, 2022, 11:00am

Not sure if you still need this but I was searching and found you post and found the answer

yaxis:
  - min: 0
    max: 800
    decimals: 0
    apex_config:
      tickAmount: 100

AleXSR700 · October 11, 2022, 8:25pm

Anyone know?

Mariusthvdb · October 12, 2022, 9:55am

think I searched all and everywhere…
is there really no easy way to color graphs entities based in being above/below 0? I need to graphs my 3 grid phases, and want them to show their historic state color. Purple when above 0, green when below.
like HomeWizard does it:

14aa49f187d2090de66a15a59a80f6752e5acd99_2_690x268

see: How to re-create HomeWizard 3-phase graphs in (core or custom) graph card

Apex would seem the to go to card, but there’s no option for this? I did try something like the color_threshold, but again, that colors the whole graph based on the current state.

Please help me out if you have a suggestion? thx!

Lunkobelix · October 12, 2022, 11:08am

All of a sudden my graphs takes forever to load, anyone else with this issue?

Mariusthvdb · October 12, 2022, 12:36pm

yep, especially when having more than 1 apexcharts card. it stalls the view and needs a forced reload to get going again
been like that since the beginning though, a very hard card for the system, beautiful as it is

Lunkobelix · October 12, 2022, 1:47pm

Strange that it has been working since day one and but the last couple of days started being slow. I have about 6 Apex Charts per page and it has been working like a charm until now…

Mariusthvdb · October 12, 2022, 2:01pm

well, dont let my troubles be yours
maybe its the size of the system, or other cards on the same page. Could be it doesnt love to be on a view with mini-graph card, or the core cards for that matter. And, its not consistent. Currently I can quickly load the test page, this morning it completely broke the dashboard.

joriws · October 12, 2022, 8:50pm

As Javascripts nor it’s structures are not my cup of tea, I am asking for a help for data_generator.

These top level return-lines with *.map works individually, but how do I combine two attribute tables together to form 48h data from two 24h tables (today and tomorrow)?

    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
      return entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
      });

For apex I’d like to populate the rest of graph

i.e. combine these two apex cards into one

jimscheel · October 13, 2022, 10:02am

I have this mystery issue. My x axis is not starting from zero?

nordpool

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 24h
header:
  title: Energy price today (snt/kWh)
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_kwh_dk1_dkk_3_095_025
    type: column
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
    color_threshold:
      - value: 0
        color: green
      - value: 2
        color: yellow
      - value: 4
        color: red

Anyone knows whats wrong?

Holdestmade · October 13, 2022, 10:08am

I think if you don’t specify a value for the y axis, it will auto fit. If you want to force it to use 0 add this:

    yaxis:
      - min: 0

jimscheel · October 13, 2022, 10:50am

Thanks that worked. - But I have orher graphs where i also don’t specify the min. value and they work - so it is a bit strange…

uowis · October 13, 2022, 12:36pm

Do you things it’s possible to for exemple have a button for change span.offset ?

arva · October 13, 2022, 3:32pm

Hi, maybe someone can help me:

i’m using code:

type: custom:apexcharts-card
graph_span: 1d
experimental:
  color_threshold: true
apex_config:
  chart:
    height: 170px
header:
  title: Electricity prices tomorrow (c/kWh)
  show: true
span:
  start: day
  offset: +1d
series:
  - entity: sensor.nordpool_kwh_ee_eur_3_05_02
    show:
      extremas: true
    type: column
    data_generator: |
      return entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
      });
    color_threshold:
      - value: 0.06
        color: darkgreen
        opacity: 1
      - value: 0.1
        color: goldenrod
      - value: 0.25
        color: darkred

Data:

current_price: 0.37
average: 0.255
off_peak_1: 0.192
off_peak_2: 0.242
peak: 0.277
min: 0.113
max: 0.411
unit: kWh
currency: EUR
country: Estonia
region: EE
low price: false
tomorrow_valid: true
today:
  - 0.113
  - 0.162
  - 0.162
  - 0.162
  - 0.162
  - 0.194
  - 0.262
  - 0.315
  - 0.351
  - 0.398
  - 0.362
  - 0.322
  - 0.186
  - 0.163
  - 0.162
  - 0.306
  - 0.316
  - 0.295
  - 0.37
  - 0.381
  - 0.411
  - 0.274
  - 0.162
  - 0.12
tomorrow:
  - 0.114
  - 0.039
  - 0.041
  - 0.044
  - 0.055
  - 0.126
  - 0.275
  - 0.341
  - 0.386
  - 0.267
  - 0.393
  - 0.357
  - 0.312
  - 0.314
  - 0.286
  - 0.266
  - 0.291
  - 0.31
  - 0.33
  - 0.348
  - 0.366
  - 0.269
  - 0.262
  - 0.216
raw_today:
  - start: '2022-10-13T00:00:00+03:00'
    end: '2022-10-13T01:00:00+03:00'
    value: 0.113
  - start: '2022-10-13T01:00:00+03:00'
    end: '2022-10-13T02:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T02:00:00+03:00'
    end: '2022-10-13T03:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T03:00:00+03:00'
    end: '2022-10-13T04:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T04:00:00+03:00'
    end: '2022-10-13T05:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T05:00:00+03:00'
    end: '2022-10-13T06:00:00+03:00'
    value: 0.194
  - start: '2022-10-13T06:00:00+03:00'
    end: '2022-10-13T07:00:00+03:00'
    value: 0.262
  - start: '2022-10-13T07:00:00+03:00'
    end: '2022-10-13T08:00:00+03:00'
    value: 0.315
  - start: '2022-10-13T08:00:00+03:00'
    end: '2022-10-13T09:00:00+03:00'
    value: 0.351
  - start: '2022-10-13T09:00:00+03:00'
    end: '2022-10-13T10:00:00+03:00'
    value: 0.398
  - start: '2022-10-13T10:00:00+03:00'
    end: '2022-10-13T11:00:00+03:00'
    value: 0.362
  - start: '2022-10-13T11:00:00+03:00'
    end: '2022-10-13T12:00:00+03:00'
    value: 0.322
  - start: '2022-10-13T12:00:00+03:00'
    end: '2022-10-13T13:00:00+03:00'
    value: 0.186
  - start: '2022-10-13T13:00:00+03:00'
    end: '2022-10-13T14:00:00+03:00'
    value: 0.163
  - start: '2022-10-13T14:00:00+03:00'
    end: '2022-10-13T15:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T15:00:00+03:00'
    end: '2022-10-13T16:00:00+03:00'
    value: 0.306
  - start: '2022-10-13T16:00:00+03:00'
    end: '2022-10-13T17:00:00+03:00'
    value: 0.316
  - start: '2022-10-13T17:00:00+03:00'
    end: '2022-10-13T18:00:00+03:00'
    value: 0.295
  - start: '2022-10-13T18:00:00+03:00'
    end: '2022-10-13T19:00:00+03:00'
    value: 0.37
  - start: '2022-10-13T19:00:00+03:00'
    end: '2022-10-13T20:00:00+03:00'
    value: 0.381
  - start: '2022-10-13T20:00:00+03:00'
    end: '2022-10-13T21:00:00+03:00'
    value: 0.411
  - start: '2022-10-13T21:00:00+03:00'
    end: '2022-10-13T22:00:00+03:00'
    value: 0.274
  - start: '2022-10-13T22:00:00+03:00'
    end: '2022-10-13T23:00:00+03:00'
    value: 0.162
  - start: '2022-10-13T23:00:00+03:00'
    end: '2022-10-14T00:00:00+03:00'
    value: 0.12
raw_tomorrow:
  - start: '2022-10-14T00:00:00+03:00'
    end: '2022-10-14T01:00:00+03:00'
    value: 0.114
  - start: '2022-10-14T01:00:00+03:00'
    end: '2022-10-14T02:00:00+03:00'
    value: 0.039
  - start: '2022-10-14T02:00:00+03:00'
    end: '2022-10-14T03:00:00+03:00'
    value: 0.041
  - start: '2022-10-14T03:00:00+03:00'
    end: '2022-10-14T04:00:00+03:00'
    value: 0.044
  - start: '2022-10-14T04:00:00+03:00'
    end: '2022-10-14T05:00:00+03:00'
    value: 0.055
  - start: '2022-10-14T05:00:00+03:00'
    end: '2022-10-14T06:00:00+03:00'
    value: 0.126
  - start: '2022-10-14T06:00:00+03:00'
    end: '2022-10-14T07:00:00+03:00'
    value: 0.275
  - start: '2022-10-14T07:00:00+03:00'
    end: '2022-10-14T08:00:00+03:00'
    value: 0.341
  - start: '2022-10-14T08:00:00+03:00'
    end: '2022-10-14T09:00:00+03:00'
    value: 0.386
  - start: '2022-10-14T09:00:00+03:00'
    end: '2022-10-14T10:00:00+03:00'
    value: 0.267
  - start: '2022-10-14T10:00:00+03:00'
    end: '2022-10-14T11:00:00+03:00'
    value: 0.393
  - start: '2022-10-14T11:00:00+03:00'
    end: '2022-10-14T12:00:00+03:00'
    value: 0.357
  - start: '2022-10-14T12:00:00+03:00'
    end: '2022-10-14T13:00:00+03:00'
    value: 0.312
  - start: '2022-10-14T13:00:00+03:00'
    end: '2022-10-14T14:00:00+03:00'
    value: 0.314
  - start: '2022-10-14T14:00:00+03:00'
    end: '2022-10-14T15:00:00+03:00'
    value: 0.286
  - start: '2022-10-14T15:00:00+03:00'
    end: '2022-10-14T16:00:00+03:00'
    value: 0.266
  - start: '2022-10-14T16:00:00+03:00'
    end: '2022-10-14T17:00:00+03:00'
    value: 0.291
  - start: '2022-10-14T17:00:00+03:00'
    end: '2022-10-14T18:00:00+03:00'
    value: 0.31
  - start: '2022-10-14T18:00:00+03:00'
    end: '2022-10-14T19:00:00+03:00'
    value: 0.33
  - start: '2022-10-14T19:00:00+03:00'
    end: '2022-10-14T20:00:00+03:00'
    value: 0.348
  - start: '2022-10-14T20:00:00+03:00'
    end: '2022-10-14T21:00:00+03:00'
    value: 0.366
  - start: '2022-10-14T21:00:00+03:00'
    end: '2022-10-14T22:00:00+03:00'
    value: 0.269
  - start: '2022-10-14T22:00:00+03:00'
    end: '2022-10-14T23:00:00+03:00'
    value: 0.262
  - start: '2022-10-14T23:00:00+03:00'
    end: '2022-10-15T00:00:00+03:00'
    value: 0.216
unit_of_measurement: EUR/kWh
icon: mdi:flash
friendly_name: nordpool_kwh_ee_eur_3_05_02

With the result:

I have two isues:

Graph is rounding the numbers to one decimal place. I would like to see data with three decimal places.
I would like to see the graph starting from 0 not the lowest value. Tomorrows graph does not show it very well, because there isa rounded value of 0 which actually is 0.041. Here is a example of today’s graph with the issue of starting from 0.1 instead of 0:

Screenshot 2022-10-13 at 18.31.31978×632 34.7 KB

trueKAMi · October 14, 2022, 7:43am

Hey @arva

For the decimals you can add:
float_precision: 3
to the - entity

You can define y-axis behaviour as follows:

yaxis:
  - id: y1
    decimals: 3
    min: 0

And then you have to add
yaxis_id: y1
To all - entity entries in your graph

which would make the relevant section something like:

span:
  start: day
  offset: +1d
yaxis:
  - id: y1
    decimals: 3
    min: 0
series:
  - entity: sensor.nordpool_kwh_ee_eur_3_05_02
    show:
      extremas: true
    type: column
    yaxis_id: y1
    float_precision: 3

Hope this helps

Holdestmade · October 14, 2022, 7:45am

Maybe some of the data has a zero value ?

arva · October 14, 2022, 8:12am

Thank you very much. Now everything is perfect!

webosa · October 14, 2022, 10:21am

Hey

if you only want the box border gone, change the

borderWidth: 0

or if you want to hide the whole “background box” gone then set

background:
  enabled: false