ApexCharts card - A highly customizable graph card

Realelwood · October 18, 2021, 7:14am

I have a sensor that gives the total amount of energy used, it restarts at 02:00 every night. Would it be possible to show the value from 02:00 only, and with history for the last 7 or 30 days?

pedromargarido · October 22, 2021, 11:15am

Question:

Why isn’t it 0 the minimum in my y axis and why does it have 3 digits of precision? What am I doing wrong?

type: custom:apexcharts-card
apex_config:
  chart:
    height: 480px
graph_span: 24h
span:
  start: day
header:
  title: Consumo horário
  show: true
update_interval: 1h
y_axis_precision: 2
yaxis:
  - id: a
    min: 0
series:
  - entity: sensor.total_energy_hour
    yaxis_id: a
    type: column
    name: Energia
    float_precision: 2
    group_by:
      func: max
      duration: 60min

arifroni · October 22, 2021, 1:21pm

are you sure your indentation is right? i am using like below

pedromargarido · October 22, 2021, 2:46pm

Thanks, it’s working now. I guess it’s necessary to have min and max defined, just the min doesn’t work.

RomRider · October 24, 2021, 5:16pm

New Release

1.10.0 (2021-10-24)

Features

uses the time format defined in Home Assistant user profile (78df800), closes #213
yaxis: Align the extremas to the closest align_to value. (a46c812), closes #170
pie/donut now shows the value of the serie instead of the percentage. Old behavior with datalabels: percent (7591aba)
actions: header_actions support for actions in header (#171) (bd6a497), closes #61
display the chart’s last update time using last_updated (2dd84ff)
yaxis: Set the number of decimals shown on the yaxis. Deprecate y_axis_precision. (33fc474), closes #164
update from lit-html/lit-element to lit (5a7d944)
yaxis: id and yaxis_id no longer needed with only 1 yaxis defined (e5e8904)

Bug Fixes

color_threshold would sometimes render weirdly (d7063a5), closes #177
extremas would not display with offset applied on series (4d7d77a), closes #177
Floats were not truncated properly for radialBar (0c789ff), closes #174
history data could be modified in some rare cases (d38fd6e)
Ignore recorder when not required (c28a7a6), closes #169
the hass object could sometimes be null (ff27baf), closes #191
When recorder was skipped, attributes were ignored (15e5372)
yaxis: auto scale was not taking the serie’s offset into account (f82f7e0), closes #172
yaxis: Fixed + unfixed bounds on the same yaxis is now working (f7e4668)

Documentation

align_to description update (4471469)
Missing doc for last_updated (93ae54a)

RomRider · October 24, 2021, 5:30pm

Sorry, I was quite absent lately, will try to do better in the future

bochelork · October 25, 2021, 2:18pm

I try to combine the chart with auto-entities. It works if I want to show each series in one graph, but how do I create separate graphs for each series, like in with mini-graph card:

type: custom:auto-entities
card:
  type: grid
  columns: 2
  square: false
card_param: cards
filter:
  include:
    - entity_id: '*b*usd*'
      state: '>2'
      options:
        type: custom:mini-graph-card

If I try the filter method I get 1 chart with different series.

type: custom:auto-entities
card:
  type: custom:apexcharts-card
  header:
    show: true
  apex_config:
    chart:
      height: 410px
    stroke:
      show: true
      width: 1
  graph_span: 12h
filter:
  include:
    - name: Binance*USD
      state: '> 0'
      options:
        group_by:
          func: avg
          duration: 10min
  exclude: []
sort:
  method: none

hajo62 · October 25, 2021, 3:22pm

Thanks.
That’s a perfect alternative to the big number card!

Nobody an idea, how to send the big numbers to the back?

Floo · October 25, 2021, 4:06pm

Thanks for this release, especially the yaxis features and bug fixes.

I had problems with decimals but with your latest version of ApexCharts everything is working perfect now!

withanHdammit · October 25, 2021, 5:48pm

I use the “headers” in my charts. But in one of them, the label that comes from the sensor is too long. Is there a way to edit the label in the header?

Example: in this card, I’m doing a grid with two apexcharts-card, the left card shows ‘kB/s’, the right card shows ‘packets/s’, but the word is long and I’d like to abbreviate it to ‘pkts/s’ to keep the header to two lines instead of four lines.

The code for the card is:

type: grid
cards:
  - type: custom:apexcharts-card
    apex_config:
      yaxis:
        show: true
        forceNiceScale: true
        decimalsInFloat: 0
      stroke:
        width: 3
        curve: smooth
      legend:
        show: false
    graph_span: 2d
    header:
      show: true
      show_states: true
      colorize_states: true
      title: pfSense WAN usage
    series:
      - entity: sensor.pfsense_interface_wan_inbytes_kilobytes_per_second
        name: Inbound
        group_by:
          func: avg
          duration: 60min
      - entity: sensor.pfsense_interface_wan_inbytes_kilobytes_per_second
        name: Inbound avg 7h
        group_by:
          func: avg
          duration: 7h
      - entity: sensor.pfsense_interface_wan_outbytes_kilobytes_per_second
        name: Outbound
        invert: true
        group_by:
          func: avg
          duration: 60min
      - entity: sensor.pfsense_interface_wan_outbytes_kilobytes_per_second
        name: Outbound avg 7h
        invert: true
        group_by:
          func: avg
          duration: 7h
  - type: custom:apexcharts-card
    apex_config:
      yaxis:
        show: true
        forceNiceScale: true
        decimalsInFloat: 0
      stroke:
        width: 3
        curve: smooth
      legend:
        show: false
    graph_span: 2d
    header:
      show: true
      show_states: true
      colorize_states: true
      title: pfSense WAN packets
    series:
      - entity: sensor.pfsense_interface_wan_inpkts_packets_per_second
        name: Inbound
        group_by:
          func: avg
          duration: 60min
      - entity: sensor.pfsense_interface_wan_inpkts_packets_per_second
        name: Inbound avg 7h
        group_by:
          func: avg
          duration: 7h
      - entity: sensor.pfsense_interface_wan_outpkts_packets_per_second
        name: Outbound
        invert: true
        group_by:
          func: avg
          duration: 60min
      - entity: sensor.pfsense_interface_wan_outpkts_packets_per_second
        name: Outbound avg 7h
        invert: true
        group_by:
          func: avg
          duration: 7h
columns: 2
square: false

wixoff · October 25, 2021, 6:35pm

Hooray for header_actions!

RomRider · October 26, 2021, 1:21am

Same as your mini-graph-card example, just replace csutom:mini-graph-card with custom:apexcharts-card

In each serie, you can redefine the unit:

type: custom:apexcharts-card
series:
  - entity: sensor.packets
    unit: pkts/s

bochelork · October 26, 2021, 7:54am

This is my code:

type: custom:auto-entities
card:
  type: grid
  columns: 2
  square: false
card_param: cards
filter:
  include:
    - entity_id: '*b*usd*'
      state: '>2'
      options:
        type: custom:apexcharts-card
        series:
          - entity: this.entity_id

This is generated by the auto-entities:

entity: sensor.binancehotusd
type: custom:apexcharts-card
series:
  - entity: sensor.binancehotusd

The line ‘entity: sensor.binancehotusd’ causes this error:

/// apexcharts-card version 1.10.0-dev.6 /// value.entity is extraneous

Code below shows a card as expected:

type: custom:apexcharts-card
series:
  - entity: sensor.binancehotusd

bochelork · October 27, 2021, 7:12am

Is it possible to ignore ‘extraneous’ values? If the value is ignored things will work as expected. Or do you have any other advice?

RomRider · October 28, 2021, 1:52pm

You can disable the configuration check

experimental:
  disable_config_validation: true

sergio_pt · October 28, 2021, 4:00pm

Hi all!!

Is it possible to use a sensor value to define the “max” in a graph?
I would like something like below:

type: custom:apexcharts-card
chart_type: radialBar
header:
  show: true
  floating: false
  show_states: true
  colorize_states: true
apex_config:
  title:
    floating: false
    align: center
    style:
      fontSize: 20px
      fontWeight: bold
  chart:
    fontFamily: Julius Sans One
    foreColor: rgb(148,148,148)
    offsetY: 5
  legend:
    show: false
    position: top
series:
  - entity: sensor.teams_stat_activity_in_a_call
    name: In a Call
    max: 9
    color: '#a45a52'
  - entity: sensor.teams_stat_activity_in_a_conference_call
    name: In a Conf Call
    max: 9
    color: '#8b0000'
  - entity: sensor.teams_stat_activity_busy
    name: Busy
    max: 9
  - entity: sensor.teams_stat_activity_idle
    name: Idle
    max: 9
    color: '#fada5e'
  - entity: sensor.teams_stat_activity_available
    name: Available
    max: |
      return 42;
    color: '#008000'
style: |
  ha-card {
    border: 0px solid green;
    #background-color: var(--dwains-theme-primary);
    box-shadow: none;
    font-size: 15px;
    color: rgb(148,148,148);
  }

This fails with error:

/// apexcharts-card version 1.10.0 /// value.series[4] is not a ChartCardSeriesExternalConfig; value.series[4].max is not a number

Anton-Ka · October 28, 2021, 9:13pm

Guys, I’m trying to use a map with this code:

        - type: custom:apexcharts-card
          header:
            title: Загрузка CPU
          series:
          - entities: sensor.processor_use_percent

But I get the error:

auto-entities.js:210 card custom:apexcharts-card Error: /// apexcharts-card version 1.10.0 /// value.series[0] is not a ChartCardSeriesExternalConfig; value.series[0].entities is extraneous
    at HTMLElement.setConfig (apexcharts-card.js:829)
    at s (hui-state-label-badge.ts:14)
    at hui-state-label-badge.ts:14
    at d (hui-state-label-badge.ts:14)
    at c (hui-state-label-badge.ts:14)
    at g (hui-state-label-badge.ts:14)
    at HTMLElement.value (hui-stack-card.ts:16)
    at hui-light-card.ts:35
    at Array.map (<anonymous>)
    at HTMLElement.value (hui-light-card.ts:35)

Tell me, what am I doing wrong?

Lunkobelix · October 29, 2021, 7:43am

I love that this feature is available now, something I have wanted for a long time:

display the chart’s last update time using last_updated (2dd84ff )

Would it be possible to integrate the time stamp in the name as shown below? Would make it look a bit nicer and better integrated in the overall layout.

CDRX2 · October 31, 2021, 1:47pm

Hi,

Has anybody managed to get header_actions to work with a radial bar chart?

RomRider · October 31, 2021, 6:23pm

It’s supposed to be:

series:
  - entity: sensor.xyz

Not entities

That is not possible but you can create a feature request on github

That should work the same as with other charts, if not open a bug on github

Open a feature request on github, I’ll look into it