ApexCharts card - A highly customizable graph card

[joriws]

This made it work for me, I created two const but maybe one could have been created live on main return

    data_generator: |
      const today = entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]]
      });
      const tomor = entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]]
      });
      return ([...today, ...tomor])

[joriws]

And the output after experimenting the fix…

[moelito (Fredric Moestedt)]

Sure, no problem.
It seems to be sensitive to hiding things dynamically in the graph (ie using the graph legend). No clue why but not a real issue.
Here is the config for the stacked hourly graph:

type: custom:apexcharts-card
graph_span: 1day
stacked: true
span:
  end: hour
header:
  show: true
  title: Hourly Energy Usage
  show_states: false
  colorize_states: true
all_series_config:
  type: column
  float_precision: 3
  transform: return x * 1000;
  unit: Wh
  opacity: 0.7
  group_by:
    func: last
    duration: 1h
apex_config:
  legend:
    position: right
series:
  - entity: sensor.computer_desk_hourly_energy
    name: Workdesk
  - entity: sensor.washing_machine_hourly_energy
    name: Washingm
  - entity: sensor.dishwasher_hourly_energy
    name: Dishw
  - entity: sensor.fridge_and_freezer_hourly_energy
    name: Freezer
  - entity: sensor.heatpump_hallway_hourly_energy
    name: Heat Ds
  - entity: sensor.heatpump_livingroom_hourly_energy
    name: Heat us
  - entity: sensor.it_network_hourly_energy
    name: IT Netw
  - entity: sensor.kitchen_media_hourly_energy
    name: Kitchen media
  - entity: sensor.media_bench_hourly_energy
    name: Livingr meadia
  - entity: sensor.ps4_setup_hourly_energy
    name: PS4 setup
  - entity: sensor.drying_machine_hourly_energy
    name: Dryer
  - entity: sensor.kitchen_radiator_hourly_energy
    name: Kitchen Radiator
  - entity: sensor.unknown_energy_hourly
    name: Other

[nikla (Niklas)]

Thanks a lot! I will try it out later today.

I see that you have a sensor called sensor.unknown_energy_hourly. How have you defined this one?

[Boulder]

@RomRider

type: custom:apexcharts-card
graph_span: 8d
span:
  start: hour
header:
  show: true
  title: Precipitation Forecast
series:
  - entity: weather.openweathermap  ## Need a weather entity here which provides precipitation forecast
    type: area
    extend_to_end: false
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
        return [new Date(entry.datetime).getTime(), entry.precipitation];
      });

This is almost spot on my usecase!
How can i replicate this for forecasting rain, using the precipitation forecast from the met.no integration ( weather.home_hourly)

I’m not really skilled enough to set up the data_generator code

The data from the integration looks like this:

[moelito (Fredric Moestedt)]

I created template sensors for hourly and daily unknown energy, just substracting the known energy entities from my total house consumption (using a Frient pulse conter), Electricity Meter Interface - smart Zigbee meter for home electricity monitoring - frient).
I also created utility meters for every known energy sensor (daily and hourly) that I use in my example above, ie not using the energy usage readings directly from the plug sensors.

Utility sensor example:

utility_meter:
  washing_machine_hourly_energy:
    source: sensor.washing_machine_energy
    name: Washing machine Hourly Energy
    cycle: hourly
  washing_machine_daily_energy:
    source: sensor.washing_machine_energy
    name: Washing machine Daily Energy
    cycle: daily

Unknown hourly energy template example:

template:
  - sensor:
    - name: "Unknown Energy Hourly"
      unit_of_measurement: "kWh"
      state: >
        {% set house = states('sensor.hourly_energy') | float %}
        {% set computer_desk = states('sensor.computer_desk_hourly_energy') | float(default=0.000) %}
        {% set dishwasher = states('sensor.dishwasher_hourly_energy') | float(default=0.000) %}
        {% set fridgefreeze = states('sensor.fridge_and_freezer_hourly_energy') | float(default=0.000) %}
        {% set heatpump_hallway = states('sensor.heatpump_hallway_hourly_energy') | float(default=0.000) %}
        {% set heatpump_livingroom = states('sensor.heatpump_livingroom_hourly_energy') | float(default=0.000) %}
        {% set itnetwork = states('sensor.it_network_hourly_energy') | float(default=0.000) %}
        {% set kitchenmedia = states('sensor.kitchen_media_hourly_energy') | float(default=0.000) %}
        {% set mediabench = states('sensor.media_bench_hourly_energy') | float(default=0.000) %}
        {% set ps4setup = states('sensor.ps4_setup_hourly_energy') | float(default=0.000) %}
        {% set washingmachine = states('sensor.washing_machine_hourly_energy') | float(default=0.000) %}
        {% set dryer = states('sensor.drying_machine_hourly_energy') | float(default=0.000) %}
        {% set kitchen_radiator = states('sensor.kitchen_radiator_hourly_energy') | float(default=0.000) %}
        {% set known_energy = kitchen_radiator + computer_desk + dishwasher + fridgefreeze + heatpump_hallway + heatpump_livingroom + itnetwork + kitchenmedia + mediabench + ps4setup + washingmachine + dryer| float %}
        {% set u_energy = (house - known_energy) | round(2, default=0) %} 
        {% if u_energy < 0 %} 0
        {% else %} {{ u_energy }}
        {% endif %}

[hkapanen (Harri Kapanen)]

I have missing sensor data points displayed differently on column vs other (line/area) modes:

The latter (continuous) behaviour is desired, fill_raw: last does not fix it in column mode. Code is as follows:

      - type: 'custom:apexcharts-card'
        graph_span: 72h
        header:
          show_states: false
          colorize_states: true
        span:
          start: day
          offset: -1day
        now:
          show: true
          label: NOW
        series:
          - entity: sensor.nordpool_kwh_fi_eur
            fill_raw: last
            name: eilen
            yaxis_id: price
            stroke_width: 3
            type: column
        apex_config:
          yaxis:
            - id: price
              min: 0
              max: 0.3
              decimalsInFloat: 2
              show: true
          legend:
            show: false
          tooltip:
            enabled: true

      - type: 'custom:apexcharts-card'
        graph_span: 72h
        header:
          show_states: false
          colorize_states: true
        span:
          start: day
          offset: -1day
        now:
          show: true
          label: NOW
        series:
          - entity: sensor.nordpool_kwh_fi_eur
            name: eilen
            yaxis_id: price
            stroke_width: 1
            type: area
            curve: stepline
            extend_to: false
        apex_config:
          yaxis:
            - id: price
              min: 0
              max: 0.3
              decimalsInFloat: 2
              show: true
          legend:
            show: false
          tooltip:
            enabled: true

Any thoughts?

[o0larry0o (Ludo)]

Hello
I’m running into a problem, that after looking it up, can’t find any solution

I’m trying to do what energy dashboard can’t : setting a specific date for my billing.
I have utility meter running fine with an offset for that.

The problem lies in showing the data.

My monthly utility meter reset on the 9th of the month
And i would like to show the daily value over a month period with a starting point different from the begining of the month.

Currently, my billing of october will end on the 9th of november
so in my chart, I would like that 1 month to be equal from the 9th of october to the 9th of november

I tried with the offset option in span :

type: custom:apexcharts-card
graph_span: 1month
span:
  start: month
  offset: +8d
stacked: true
header:
  show: true
  title: Consommation journalière
  show_states: true
  colorize_states: true
series:
  - entity: sensor.cumulgazeur_daily
    type: column
    color: '#1781d8'
    name: Tarif unique
    group_by:
      duration: 24h
      func: max

but the graph shows only novembre, and start on the 9th, as we are the 3rd, I don’t have any data

I want 1 month to be from the 9th to the 9th, and daily bar for each day between those 2 dates

Same problem for the monthly graph, which shows 1 bar per month over 12 months
as we are now in november, a new month as started, and the cost value stop recording in october and switched in november.

type: custom:apexcharts-card
graph_span: 1year
span:
  start: year
  offset: +8month 
#(here I just wanted to start the year in september because I don't have any data before that)
stacked: true
header:
  show: true
  title: Consommation mensuelle
  show_states: true
  colorize_states: true
series:
  - entity: sensor.cumulgazeur_monthly
    type: column
    color: '#1781d8'
    name: Tarif unique
    group_by:
      duration: 1month
      func: max

I want 1 bar to be from the 9th to the 9th

Is there a way to do this ?

thyx a lot for your help

[AleXSR700 (Alex)]

Maybe I am too think, but why can’t you just define the 9th as start date instead of starting with month + offset?

[AleXSR700 (Alex)]

Question and hopefully someone can help me here as I have not found any help anywhere else

Does anybody know why ‘this.entity_id’ is not being accepted by the apexcharts-card?

type: custom:config-template-card
entities:
  - input_datetime.start_datetime
  - input_datetime.end_datetime
  - input_select.dropdown_wildcards
  - input_select.dropdown_entities
card:
  type: custom:auto-entities
  sort:
    method: state
    numeric: true
    reverse: true
  filter:
    include:
      - name: >-
          ${ states['input_select.dropdown_entities'].state == '-- - --' ?
          states['input_select.dropdown_wildcards'].state + '*' :
          states['input_select.dropdown_entities'].state }                                     
 # working, so Javascript is working
        options:
          yaxis_id: first
          stroke_width: 2
          group_by:
            func: raw
          type: line
          opacity: 1
          curve: smooth
          fill_raw: last
          show:
            extremas: true
            datalabels: false
          name: >-
            ${
            states['this.entity_id'].attributes.friendly_name.replace("Xiaomi
            Humidity", "") }                                        
# not working
  card:

If I replace the this.entity_id with the name of a sensor, it works. So the syntax itself seems to be okay.
But this.entity_id is not being accepted here

[o0larry0o (Ludo)]

Thx for your reply,

I have no idea how do to that nor how do you achieve this view ^^
but that seems to be what I need

Could you explain it please ?

Thx a lot

EDIT : I guess you are using the integration config-template-card ? I’ll look into it

[AleXSR700 (Alex)]

@o0larry0o

I guess you are using the integration config-template-card ? I’ll look into it

You are correct.
And you need input_datetime.

Go ahead and give it a shot.
And when you feel stuck, below is the relevant code you need
But no peeking until you get stuck

Summary

input_datetime:
  start_datetime:
    name: Start Datetime
    has_date: true
    has_time: true
  end_datetime:
    name: End Datetime
    has_date: true
    has_time: true

    graph_span: >-
      ${
      ((states['input_datetime.end_datetime'].attributes.timestamp-states['input_datetime.start_datetime'].attributes.timestamp)/60/60).toFixed(2)+'h'
      }
    span:
      offset: >-
        ${
        (-(states['sensor.timestamp'].state-states['input_datetime.end_datetime'].attributes.timestamp)/60/60).toFixed(2)+'h'
        }

[o0larry0o (Ludo)]

thx a lot,
I found your post on the other thread, which gives me more example ^^

Right now the custom card is not showing up … ressource problem I guess.
Thx again

[cokecan72]

I thought I had this sorted but it seems not. I’m still struggling to get the x-axis of a column chart to display all labels.

My current example is showing the total energy usage per day for 5x days. It looks like the x-axis labels have shifted so the very first one is blank and I now have an additional one for tomorrow that obviously has no data in it because I’m only looking for the last/max value of my sensor for each day.

Any ideas how I can sort this out? I’ve also tried the same thing using group_by and get similar results however I’m just missing the first label and don’t have an extra label at the end

type: custom:apexcharts-card
apex_config:
  xaxis:
    labels:
      format: ddd
      hideOverlappingLabels: false
      showDuplicatges: true
      show: true
experimental:
  color_threshold: true
graph_span: 5d
span:
  end: day
show:
  last_updated: true
header:
  show: true
  show_states: true
  colorize_states: true
yaxis:
  - min: 0
    max: ~12
    decimals: 0
    apex_config:
      tickAmount: 6
series:
  - entity: sensor.server_room_electric_consumption_today
    show:
      header_color_threshold: true
      datalabels: true
    type: column
    statistics:
      type: state
      period: day
      align: start
    color_threshold:
      - value: 7
        color: '#99c140'
      - value: 10
        color: '#e7b416'
      - value: 12
        color: '#cc3232'

[cokecan72]

Should also add that if I set the align to end rather than start, the columns shift and don’t match the days and I still end up with a large gap at the beginning of the chart

[o0larry0o (Ludo)]

ho i’m peeking and stuck ahah

I don’t get it how to create the card that call for the datetime
for the rest I think i got it

[AleXSR700 (Alex)]

You mean the timestamp?

sensor:
  - platform: time_date
    display_options:
      - 'time'
      - 'date'
      - 'date_time'
      - 'date_time_utc'
      - 'date_time_iso'
      - 'time_date'
      - 'time_utc'
      - 'beat'

template:
  - sensor:
    - name: timestamp
      state: "{{ as_timestamp(states('sensor.date_time_iso')) }}"
      icon: "mdi:calendar-clock"

[o0larry0o (Ludo)]

Got it

I’m still strugling with YAML for cards configuration sometime, but it works very fine

That solves the first part of the daily consumption over a month,
Now i need to figure out the 1 bar over 9th to 9th, and be able to display 1 bar for each “month” over a year

Which leads to another question, which maybe does not belong here
Why apex-charts or History for my sensor does not display values past a couple of days ? maybe I did something wrong, because the data is here !!

nothing before the 24th of october
while, statistics shows data on the 9th for example, i don’t understand this behavior ?

The situation is the same for several sensors, same date, almost the same hour

[AleXSR700 (Alex)]

Recorder purges after 10 days by default.

Recorder

If I am not mistaken you have to explicitly tell apexcharts-card to use statistics.

So, if you purge, then the only source of data is statistics, which apexcharts-card does not read by default.

I don’t understand what you mean with one bar per month. Sounds like you want the sum of all data or a mean value or something. Or is it one value or month that is being stored?

Check out the statistics part on the apexcharts-card github. Maybe the mean of month is what you are looking for?

[AleXSR700 (Alex)]

Can anybody think of a way to make the source of data statistics in an apexcharts-card when the charted time is more than 2 weeks without breaking the card when it is less than two weeks?

          statistics:
            type: mean
            period: hour
            align: middle

I have not found a way to disable it by setting them to [] or null without breaking the card.