ApexCharts card - A highly customizable graph card

One more thing @RomRider
On the iOS app I have this kind of glitch on the “now” label.

Is that my fault?

Probably safari’s fault :man_shrugging: nothing I can or you can do about it.

Ok no problem :slightly_smiling_face: Label removed

How do I remove future values from the graph if the X axis is time?

image

I don’t want this horizontal line

type: 'custom:apexcharts-card'
graph_span: 24h
span:
  start: day
header:
  show: true
  title: Napięcie paneli
  show_states: true
  colorize_states: true
series:
  - entity: sensor.pv_voltage_a
    curve: smooth
    fill_raw: 'null'
    group_by:
      duration: 20min
      func: avg
y_axis_precision: 1

Under “series”:

extend_to_end: false

Similar to some others in this thread, I wanted to make a radial graph for CPU/RAM/Disk usage. The problem so far is the bottom of the graph being cut off:

Adjusting the offset can make the graph visible, but the legends are still cut off with an adorable little scroll bar. It looks like a “foreignobject” container is causing this, but I can’t seem to adjust with the ApexCharts options or card-mod:

Any suggestions to fix this? :slight_smile:

Not much we’ll be able to help with without your config :wink:

type: 'custom:apexcharts-card'
chart_type: radialBar
graph_span: 1s
header:
  show: false
apex_config:
  chart:
    foreColor: 'rgb(148,148,148)'
    offsetY: -50
    height: 350
  legend:
    show: true
    position: left
    floating: true
    offsetX: 200
    offsetY: 200
  plotOptions:
    radialBar:
      inverseOrder: true
      offsetY: 0
      startAngle: -180
      endAngle: 90
      hollow:
        size: 35%
        background: transparent
      dataLabels:
        name:
          show: true
        value:
          show: true
series:
  - entity: sensor.golfquest_pc_cpu_usage
    name: CPU
  - entity: sensor.golfquest_pc_cpu_usage
    name: CPU
  - entity: sensor.golfquest_pc_cpu_usage
    name: CPU

Wow, I made a mental note at least three times to not forget that when I was scanning through this thread. :neutral_face:

Hello everybody.
Is it possible to create a monthly chart (12 months) with the ApexCharts Card?

type: 'custom:apexcharts-card'
span:
  end: day
graph_span: 7d
header:
  show: true
  title: Fatura
  show_states: true
  colorize_states: true
apex_config:
  tooltip:
    enabled: true
  yaxis:
    - show: true
      decimalsInFloat: 0
      axisTicks:
        show: true
      opposite: true
      axisBorder:
        show: false
        color: '#e74c3c'
      labels:
        style:
          colors: '#e74c3c'
          fontSize: 12px
          fontWeight: bold
          fontFamily: Raleway
      forceNiceScale: true
series:
  - entity: sensor.total_pagar_shelly_em_casa
    type: column
    name: ' '
    show:
      extremas: true
    group_by:
      func: last
      duration: 1d
    color: '#e74c3c'

Hello

Anyone know why my charts suddenly wont show up anymore? They do if i create a new one, but not with this exact code. Is there anything in my code that has change that makes it break?

type: 'custom:apexcharts-card'
update_interval: 15min
graph_span: 1d
layout: minimal
header:
  show: true
  show_states: true
  floating: true
  colorize_states: true
now:
  show: false
  label: Stua
  color: white
series:
  - entity: sensor.multi_stua_temp
    color: '#e74c3c'
    type: line
    name: Stua
    group_by:
      func: max
      duration: 30min
    extend_to_end: true
  - entity: sensor.multi_stua_fuktighet
    show:
      datalabels: true
    color: '#3279a8'
    type: line
    name: ' '
    group_by:
      func: max
      duration: 30min
    extend_to_end: true
apex_config:
  chart:
    height: 180px
  xaxis:
    tickAmount: null
    labels:
      format: HH
  stroke:
    width: 3
    curve: smooth
  dataLabels:
    enabled: false
  legend:
    show: false

loving your graphs, but on my side the redering is very bad!

any idea ?
image

Have you figured it out? I’m also looking for this

I tried asking about this 10 days ago but I got no answer .
you want it like this chart right?

It is not possible at the moment because grouping by month doesn’t group by actual months but by some number of days which is fixed.
I have no plan at the moment to introduce that feature, but will think about it for the future.

1 Like


I don’t know what is wrong, but when I try to use the min and max for the y-axis, I cannot get it to work. As soon as I change a min or max value, I see the correct values on the y-axis for 0.1 second, and then it seems some auto-range is performed?

It is said in the documentation that min and max shouldn’t be under apex_config but straight under your yaxis entry.

Sorry, I looked through all the examples multiple times, I don’t know how I missed that… :blush:

Is it possible to show when a sensor was updated? The right one below shows how much hot water there is still left but the value isn’t always updated in real time, so I would like that it showed “Varmvatten 17:38” so I know if the value is accurate and valid.

Can this be done? I guess not but had to ask :slight_smile:

Edit:
The data might be retrieved accordint to this but how to I make it show in the chart?

It’s there, but not released :grin:

But this displays the chart last update, not the sensor last update. Maybe I’ll add it too.

My first post here… Having difficulty with Apex Charts. (I am a week into HA.)

Here is my entry in the /config/ui-lovelace.yaml file:

views:
  - title: Main
    cards:
      - type: custom:apexcharts-card
        series:
          - entity: sensor.building_temperature

…and here is the error I see on the Overview page

Custom element doesn't exist: apexcharts-card.
type: 'custom:apexcharts-card'
series:
  - entity: sensor.building_temperature

BACKGROUND INFO

  1. I use HACS and load apexcharts-card v1.9.0
    It says…
    When installed, this will be located in ‘/config/www/community/apexcharts-card’
    When you add this to your lovelace configuration use this
    url: /hacsfiles/apexcharts-card/apexcharts-card.js
    type: module

  2. Server Controls
    Check configuration, then reboot HA

  3. This is my configuration.yaml

homeassistant:
  name: Home
  unit_system: imperial
  time_zone: America/New_York
frontend:
  themes: !include themes.yaml
lovelace:
  mode: yaml
calendar:
  - platform: todoist
    token: 
# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:
# Text to speech
tts:
  - platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
  1. Here is my Config / Info
    System Health
    version: core-2021.5.5
    installation_type: Home Assistant OS
    dev: false
    hassio: true
    docker: true
    virtualenv: false
    python_version: 3.8.9
    os_name: Linux
    os_version: 5.4.83-v8
    arch: aarch64
    timezone: America/New_York
    GitHub API: ok
    Github API Calls Remaining: 4949
    Installed Version: 1.12.4
    Stage: running
    Available Repositories: 822
    Installed Repositories: 2
    can_reach_server: ok
    remaining_requests: 9
    logged_in: false
    can_reach_cert_server: ok
    can_reach_cloud_auth: ok
    can_reach_cloud: ok
    host_os: Home Assistant OS 5.13
    update_channel: stable
    supervisor_version: supervisor-2021.05.4
    docker_version: 19.03.15
    disk_total: 28.6 GB
    disk_used: 3.3 GB
    healthy: true
    supported: true
    board: rpi4-64
    supervisor_api: ok
    version_api: ok
    installed_addons: File editor (5.3.1), ESPHome (1.18.0), Terminal & SSH (9.1.3)
    dashboards: 1
    resources: 0
    views: 5
    mode: yaml