ApexCharts card - A highly customizable graph card

Before Update to 2023.4.0b0.

After update:

The time changed slightly …

EDIT: Both Weather-Charts, and the Spot-Price are ApexCharts

I am using this DONUT, but something bothers me (also on other DONUT graphs).
In the history on top the dark green value is displayed on the left side. The Radial part corresponding to it however is on the right side.
Is there any way to switch either the history arrangement (display the 3,8 kWh on right side and 5,9 kWh on left)?
Alternatively rotate the radial bar (switch position), so value and radial bar are aligned?
image

Here is the YAML (the basis for this was copied from an earlier post)

type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  title: Stromnutzung (heute)
  show_states: true
  colorize_states: true
apex_config:
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(0) + " %";
      }
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: Produktion
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(1) + " kWh"
                }
series:
  - entity: sensor.exported_energy_daily
    name: Eigenverbrauch
    float_precision: 1
    color: darkgreen
  - entity: sensor.selfuse_energy_daily
    name: Einspeisung
    float_precision: 1
    color: lightgreen

EDIT:
found it.

apex_config:
  plotOptions:
    pie:
      startAngle: -180
      endAngle: 180
      donut: ...

Super, many thanks for posting the two images. :+1:

Saves me the trouble of doing the same.

I too do not have a problem after upgrading.

But then I do not use HAC’s. Just the javascript installed within /local (www).

I use HACS , But

Home Assistant 2023.4.0b0
Supervisor 2023.03.3
Operating System 10.0.rc2
Frontend 20230329.0 - latest

Don’t know if that is relevant

That’s the problem, my charts are not failing.

See the threads below your response to mine.

well, what can we say… the card uses a dom query selector that no longer exists in 2023.4.
If your cards are not touched, good for you.
maybe if you check the JSinspector?

in any case, be warned.

Well, I’ve just done a restart and refreshed the browser (just in case).

Still cannot get it to fail.

I have over 20 charts, all still working.

Strange that it works for you and me, but not for others.

I just “Reboot” the Host , still looking good, in Both Firefox , EDGE, and Android mobile app

EDIT: And FF & EDGE on another laptop ( first time access, so for sure absolutely nothing cached )

PS: I do however see a peculiar “behavior” … :frowning:

My Header-cards are gone ? , and the right top-menu is moved about 25% , in ALL Views ?

hello please give me code :smiley:

Not sure what you mean by Header-cards are gone.

Sorry, I am none the wiser.

Is it a custom card ?

Yes Custom:header-card

Sorry don’t have pic with the cards “visible”

And notice the Right Menu …moved in a bit, on all views

please keep on topic. this thread is for Apexcharts :wink:

got to report those issues in their respective repos

Hey,
I have 2 issues with the stacked bargraph.

  1. how do I get rid of the boxes on the dataLabels?
  2. According to documentation the total is supported by ApexCharts for stacked bargraph. However I cannot get it to work in HomeAssistant. Is this not supported for HA ?

Here a screenshot from documentation in GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant
JavaScript Stacked Column Chart – ApexCharts.js

My goal is to have the sum of the 2 bars as total, which is as far as I know supported. However I cant gte it to work…This is my config

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
  chart:
    stacked: true
  plotOptions:
    bar:
      borderRadius: 5
      dataLabels:
        position: center
        total:
          enabled: true
graph_span: 7d
span:
  end: day
show:
  last_updated: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Selbstgenutzer PV-Strom (Woche)

image

how do I get rid of the boxes on the dataLabels?

add dataLabels to your apex_config.

Full list of option here.

datalabels

You should be looking at

background:
  borderWidth: 0
apex_config:
  dataLabels:

Hello,

someone who knows how to make a graph from this data.

Values is a array, each array have a timestamp and a number.

Hi,

I’m trying to copy this code and I also paste it into a custom button-card nothing shows. What I’m doing wrong? Please help me !!! Thanks in advance! :wink:

Thanks.
That did the trick for the borders.
I had tried adding that, but under plotOptions. There it did not work.

About the totals you dont happen to have a solution? Or is it simply not supported for the HA-integration?
I tried already putting it in apex_config, and plotOptions, but did not work.

apex_config:
  dataLabels:
    background:
      borderWidth: 0
  legend:
    show: false
  chart:
    stacked: true
  plotOptions:
    bar:
      borderRadius: 5
      dataLabels:
        enabled: true
        position: center
        total:
          enabled: true

Unfortunately I have never used the TOTAL option.

As per the HA documentation, it should work on stacked column charts.

Have you checked the issues. It might be listed as a problem.

It might also be a confliction with the default values set automatically in the apex_config:dataLabels: options.

You could try setting dataLabels:enabled: true to false and see what happens.

Is it possible that this option is not available anymore?

EDIT:
This works for me:

apex_config:
  tooltip:
    enabled: true
    x:
      show: false