ApexCharts card - A highly customizable graph card

[dave1041]

Ah, thanks! There’s data available now so it’s showing the graph, but I’ve added it for the next reset at midnight.

However with the data available the graph is… well it’s not wrong but it’s not really right either:

So it’s taking the current values and extending them out for the rest of the day. I think a better option would be to run it like a chart recorder, so it doesn’t display anything beyond the point where there’s data available. However I’m not sure whether the underlying ApexCharts engine supports that.

[dcapslock (Darryn Capes-Davis)]

@dave1041

However I’m not sure whether the underlying ApexCharts engine supports that.

See extend_to in chart series options.

[BlueForrest]

Hi, Created a donut graph with 3 sensors but I would like to have the total of these 3 sensors in the middle of the donut.
I have separate sensor for the total.
How to do this?

Pict1: Current graph

Pict2: What I want to achieve

this is my card configuration:

type: custom:apexcharts-card
chart_type: donut
cache: true
header:
  show: true
  title: Solar Monitor
  show_states: false
  colorize_states: true
graph_span: 1d
experimental:
  color_threshold: true
card_mod:
  style: |
    ha-card {
      background: none;
      border: none;
    }  
series:
  - entity: sensor.daily_hw_socket_import_2
    name: Solar battery charging
    type: column
    color: orange
  - entity: sensor.real_solar_consumption2
    name: Solar Effective Usage
    type: column
    color: green
  - entity: sensor.daily_solar_export_2
    name: Solar Export to grid
    color: red

[dcapslock (Darryn Capes-Davis)]

@BlueForrest

I have separate sensor for the total.
How to do this?

Have a look at How to put text in middle of donut · RomRider/apexcharts-card · Discussion #248 · GitHub

[BlueForrest]

thx for the link!!
This is what I wanted and solved my issue.

[dave1041]

Thanks! For anyone else running into this, it goes into the apex_config section. Also from further experimentation it’s not just before data is available for the day, it’s also after that. So if you’re displaying a graph with data only during the hours of daylight:

graph_span: 13h
span:
  start: day
  offset: +7h

then you’ll get the “Loading…” before sunrise and after sunset. This kind of limits the usefulness of the span options because not displaying a graph at all is worse than displaying a flat line pegged at zero during non-daylight hours.

@ vingerha, this seems to be a bug to me, or at least incorrect behaviour… is it worth opening an issue on Github?

[vingerha]

I have no clue if this is unexpected behavior… when developing I also have loads of data gaps in my db/source but never seen this though…could be a combination of things.
Since RomRider seems return shortly, in his repo please and do add a simple example which one can test, not having the same data makes it often hard to reproduce and without reproduction: no repair. Maybe the issue will allow others to add similar cases.

[dave1041]

Yeah, that’s why I thought I’d ask first :-). If someone else is graphing data that’s only available at certain times, solar power is a good example, can you see what happens when you set something like:

graph_span: 13h
span:
  start: day
  offset: +7h

and check the graph before 7am or after 8pm?

[vingerha]

I tried with my solar power and no (!) issues

[Home-Assistant-User]

Hello! I’ve noticed when using minimal layout, it is displayed differently on Safari compared to Chrome. On Safari, there is a bit of padding at the bottom, so the bars aren’t touching the border of the card. Any suggestions how to fix this?

[vingerha]

First, please donot post code as a picture, no-one likes typing from a screen. Then, you can try to use card-mod and fix certain things…there are a few very large threads out there …these two posts from Ildar are super helpful.
Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community

[dave1041]

Is that during hours of darkness, i.e. outside the given time interval? I get:

That’s with noData to replace the “Loading…” message.

[dave1041]

Reducing the config to the bare minimum:

type: custom:apexcharts-card
graph_span: 13h
span:
  start: day
  offset: +7h
series:
  - entity: sensor.enphase_solar_east
    name: East

I’m getting an empty graph with “Loading…”. I’ll try again in about 20 hours after the given time interval has passed.

[vingerha]

I got just an empty screen, what does your data contain when it is between midnight and 7? Null values or are the entities unavailable …the latter would explain a lot

[dave1041]

It just reports zero, so neither null nor unavailable, just a reading of zero watts:

[vingerha]

in that case you should be able to create it ‘now’ by using different span/offset … does this apply to all values/sources?

EDIT: I used this one with gap and could not see what you are mentioning

[dave1041]

If I remove the span options then it works fine, this is with no span options:

This is with graph_span (different graph colors/labels, I’ve got several to test different options):

This is with:

graph_span: 13h
span:
  start: day

Once I add the offset value I get “Loading…”. I’ll repeat the tests after the span interval has passed, but will have to wait another 22 hours for that to happen.

[vingerha]

I cannot seem to find the whole yaml (maybe blind?), and split the card in the individual entities, it might just be one?

[dave1041]

I’ve now waited until after the graph span interval… and it’s displaying the data as expected, so with the time currently a bit after 11pm (outside the 7am-8pm interval) it shows data from the interval 7am-8pm without the “Loading…” issue. And the config is the same as yesterday, I haven’t changed anything. The only thing I can imagine is that shutting down the browser cleared out some cached data that was causing a problem.

[svenvanrijen]

Hi all, I’m trying to recreate the standard Energy Consumption dashboard, so a stacked bar with solar production and grid import above zero and grid export below zero. Per hour, in one single bar per hour.

Already tried quite some things, but the results are still individual bars, side by side. And all above zero.

Is this even possible and if yes, how?

Thnx in advance!