ApexCharts card - A highly customizable graph card

Hi,

I just upgraded to the latest version and it seems the “entity” label being showed is not mapping to the “Friendly” name if you will. Is this a bug?

Do you think someone will be able to answer your question without a screenshot and your config?

Given I thought the question was “basic”, I assumed the answer was yes, but fair enough.

Pre-update:

image

Post-update:

image

Code:

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
graph_span: 3hr
series:
  - entity: sensor.verizon_fios_g1100_internetgateway_kib_s_sent
    stroke_width: 2
    curve: stepline

Yes, that’s a bug, I’ll fix it

Edit: Fixed in 2.0.1

2 Likes

Thanks. The 2.0.0 update solved the problem.

Y-Axis scale seems off in my config. It would appear it is basing its scale based on the last 24 hours, not the visible range (start: day). Is there any way to correct this? Can I base the Y-Axis scale based on the value of another template sensor’s value?

image

type: custom:apexcharts-card
span:
  start: day
header:
  show: true
  title: Door Opens Today
  show_states: true
  colorize_states: true
all_series_config:
  stroke_width: 2
  fill_raw: last
series:
  - entity: sensor.front_door_open_count
    name: Front Door
  - entity: sensor.back_door_open_count
    name: Back Door

FYI…for context…here’s the YAML for the template sensors:

  - platform: history_stats
    name: "Front Door Open Count"
    entity_id: sensor.front_door_opn
    state: "Open"
    type: count
    start: "{{ today_at('00:00') }}"
    end: "{{ today_at('23:59') }}"
  - platform: history_stats
    name: "Back Door Open Count"
    entity_id: sensor.back_door_opn
    state: "Open"
    type: count
    start: "{{ today_at('00:00') }}"
    end: "{{ today_at('23:59') }}"

Thanks!

Have you managed to get this working ?
I’ve got various energy related sensors for usage and costs but I’m just getting loading when trying the statistics option, but if i remove that and add the group by it will show up.
Thanks

Long term statistics is not available for every sensor. You should check if it exists in dev tools → statistics. Also not every type of value is available for every statistics entry.

1 Like

I do get long term statistics but I cannot have it show energy consumption per day, it is just an increasing accumulated graph. My sensor is the one I use in HA Energy and it is available under Dev tools > Statistics.

Depending on if I select sum/state I get different looks of the graph. But what I want to achive is the same visualization as in the HA Energy dashboard.

statistics:
  type: state
  period: day
  align: end

statistics:
  type: sum
  period: day
  align: end

This is what I would like to have:

1 Like

Ah ! Apparently the default statistics card does something specific when it’s “sum” which I didn’t implement, that’s why you are seeing this behavior. Let me fix that soon! :slight_smile:

1 Like

It’s been almost a year so I don’t know if you or anyone else might still have this problem, but I just implemented this and was having the same problem as you, where very short instances of heating/cooling weren’t showing up on the graph. Apparently the graph doesn’t like very short time spans of data. I figured out a workaround by adding “fill_raw: zero” which made all those missing parts show up, but they showed up as a curve, not like the other parts. I fixed that by adding the avg func with a duration of 1s.

So everything I added is:

fill_raw: zero
group_by:
  func: avg
  duration: 1s

The first image with no indication that the A/C was on was before the fix. Second image with a curved blue A/C indication is from fill_raw, and the third image with a proper blue bar that matches the others is from the addition of the avg func.

hi ,

i a m trying to plot a static graph like this one :

Is it possible to do that ?

Could you share you transform code please ? Been trying to do similar…

I copied and pasted from keilorca’s post then added everything else I wanted, and tweaked a few things. Also, one thing that’s still bugging me, the transform using “null” as the lower limit should let it auto-scale the axis to the other values on the graph, but it doesn’t do that, and I’m still figuring that out.

Here’s my whole card:

type: custom:apexcharts-card
update_delay: 3s
all_series_config:
  stroke_width: 2
graph_span: 10h
header:
  title: ApexCharts-Card
apex_config:
  chart:
    height: 600px
series:
  - entity: climate.downstairs
    attribute: current_temperature
    color: purple
    show:
      legend_value: false
    name: Downstairs
    curve: smooth
  - entity: sensor.meadow_st_inside_temp
    name: Office
    show:
      legend_value: false
    group_by:
      func: avg
      duration: 5min
  - entity: climate.downstairs
    attribute: fan
    transform: 'return x === ''on'' ? entity.attributes.current_temperature : null;'
    curve: smooth
    type: area
    opacity: 0.5
    color: gray
    show:
      legend_value: false
    name: Central Fan
    group_by:
      func: avg
      duration: 10s
    stroke_width: 0
    fill_raw: zero
  - entity: climate.downstairs
    attribute: hvac_action
    transform: 'return x === ''heating'' ? entity.attributes.current_temperature : null;'
    curve: smooth
    type: area
    opacity: 0.5
    color: orange
    show:
      legend_value: false
    name: Heating
    group_by:
      func: avg
      duration: 10s
    stroke_width: 0
    fill_raw: zero
  - entity: climate.downstairs
    attribute: hvac_action
    transform: 'return x === ''cooling'' ? entity.attributes.current_temperature : null;'
    curve: smooth
    type: area
    opacity: 0.8
    color: '#788fff'
    show:
      legend_value: false
    name: A/C
    group_by:
      func: avg
      duration: 10s
    stroke_width: 0
    fill_raw: zero
  - entity: climate.downstairs
    attribute: target_temp_low
    color: orange
    curve: stepline
    name: ' '
    show:
      legend_value: false
  - entity: climate.downstairs
    attribute: target_temp_high
    curve: stepline
    color: teal
    name: ' '
    show:
      legend_value: false
yaxis:
  - min: 60

Brilliant thanks, that’s the steer I needed. I’m using this for my heating as I think you are and I just set my Y axis to fixed at always at 0 (in degree C) and have the second state as -1 so it doesn’t show it

I am trying without success to obtain the azimuth and elevation attribute data from sun.sun but it doesn’t work display any data, is this a limitation of the ApexCharts card? I can view the data using the standard entity card. If sun.sun is supported, I wonder whether it is something to do with my HA configuration

type: custom:apexcharts-card
header:
  standard_format: true
  show_states: true
  show: true
  title: Sun
graph_span: 1day
span:
  start: day
series:
  - entity: sun.sun
    attribute: azimuth
    type: line
    name: Azimuth
  - entity: sun.sun
    attribute: elevation
    type: line
    name: Elevation

No limitation. But what is the real problem ? It doesn’t work is not very explicit…

Yes, with min: |-200|. See here

It seems the last value of the previous day is in the current day (if you look at the beginning of the chart).
There might be one way, but not guaranteed to work:

yaxis:
  - min: auto
    max: auto

Not sure I understand. Static as in the data doesn’t come from an entity?

@RomRider thanks for your response and good work :grinning:, it just doesn’t display any sun.sun data. I’ve updated the original post with picture.

I think you need to use the utility meter integration to have the daily sensors calculated then add that sensor to this graph.
I didn’t realise these utility meter sensors wouldn’t be used with long term statistics I’m going to look at trying to edit them like described Here