ApexCharts card - A highly customizable graph card

The problem with energy used is that it’s an ever growing number. Is there a way I can offset the energy value with the first value of the graph. So energy will always begin at 0 kWh at the begining of the graph and raise as I see the power bars.

If you want to display the growth of number (eg the “usage of water in period X”), use diff (or delta):


- entity: sensor.power_meter_consumption
    group_by:
      func: diff
      duration: 1h

Or you meant to have the value still ever growing, just starting from 0.0 each day?

After looking at https://elspotpris.dk/ I added the different taxes to my configuration.yaml. (Nordpool integration is prepared for this :sunglasses:)

my configuration.yaml looks like this:

sensor:
- platform: nordpool
  # Should the prices include vat? Default True
  VAT: True

  # What currency the api fetches the prices in
  # this is only need if you want a sensor in a non local currency
  currency: "DKK"

  # Option to show prices in cents (or the equivalent in local currency)
  price_in_cents: false

  # Helper so you can set your "low" price
  # low_price = hour_price < average * low_price_cutoff
  low_price_cutoff: 0.95

  # What power regions your are interested in.
  # Possible values: "DK1", "DK2", "FI", "LT", "LV", "Oslo", "Kr.sand", "Bergen", "Molde", "Tr.heim", "Tromsø", "SE1", "SE2", "SE3","SE4", "SYS", "EE"
  region: "DK1"

  # How many decimals to use in the display of the price
  precision: 3

  # What the price should be displayed in default
  # Possible values: MWh, kWh and Wh
  # default: kWh
  price_type: kWh

  # This option allows the usage of a template to add a tariff.
  # now() always refers start of the hour of that price.
  # this way we can calculate the correct costs add that to graphs etc.
  # The price result of the additional_costs template expects this additional cost to be in kWh and not cents as a float
  # default {{0.0|float}}
  additional_costs: >
      {% set s = {
          "winter_night": (0.036 + 0.723 + 0.00229 + 0.061 + 0.049 + 0.9734)*1.25,
          "winter_day":   (0.036 + 0.723 + 0.00229 + 0.061 + 0.049 + 0.3875)*1.25,
          "summer_day":   (0.036 + 0.723 + 0.00229 + 0.061 + 0.049 + 0.3875)*1.25,
          "summer_night": (0.036 + 0.723 + 0.00229 + 0.061 + 0.049 + 0.3875)*1.25
      }
      %}
      {% if now().month >= 4 and now().month <11 %}
          {% if now().hour >=17 and now().hour <20 %}
              {{s.summer_night|float}}
          {% else %}
              {{s.summer_day|float}}
          {% endif %}
      {% else %}
          {% if now().hour >=17 and now().hour <20 %}
              {{s.winter_night|float}}
          {%else%}
              {{s.winter_day|float}}
          {% endif %}
      {% endif %}

the 1.25 that is multipled to all the prices is a danish tax.
You still have to remember to update it, but now the nordpool entity shows the full price

1 Like

This is weird.
I copied your code and only updating sensor name and I had to delete the entity with cost for today.
It showed the correct price for me.
image

It is wierd
Now I have deleted the nordpool integration > reststarted HA and made the integration again. So far its Working
Dunno why it suddenly did that. Fingers crossed

Is there a way to force apex-charts to use the home time zone?

e.g. this config works while I am at home but when I am travelling the daily cost bars are calculated incorrectly:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 140%
  dataLabels:
    background:
      enabled: false
    style:
      colors:
        - var(--primary-text-color)
graph_span: 1w
span:
  end: day
header:
  show: true
  title: Weekly Energy Cost
experimental:
  color_threshold: true
yaxis:
  - id: left
    min: ~0
    apex_config:
      forceNiceScale: true
series:
  - entity: sensor.total_cost_today
    type: column
    yaxis_id: left
    float_precision: 2
    show:
      datalabels: true
    group_by:
      func: last
      duration: 1d
    color_threshold:
      - color: '#e45e65'
        value: 4.5
      - color: '#e0b400'
        value: 3
      - color: '#0da035'
        value: 1.5
      - color: '#039BE5'
        value: 0
view_layout:

Correct (at home):

Screenshot 2022-11-24 at 11-03-46 Overview – Home Assistant

Incorrect (same graph viewed when in a different time zone):

Screenshot 2022-11-24 at 07-05-18 Overview – Home Assistant

I noticed that you can do this, but I don’t understand this “The price result of the additional_costs template expects this additional cost to be in kWh and not cents as a float”. I have no idea what it means to have additional cost as kWh instead of cents. How should I convert 3.21 cents per kWh to kWh? If you could use cents there, I think I could just add the value of sensor.electricity_additions_total in that configuration.

I got it to work by using
additional_costs: "{{ (states('input_number.electricity_margin_price') | float + states('input_number.electricity_transfer_price') | float) / 100 | float }}"
where the input_numbers are the additional costs. For some weird reason, it didn’t work using the sensor I’ve got that adds those input numbers together. However, this is good enough since now the only config is in the input numbers that I can use everywhere.

The help text for the additional costs is really weird…

Hello,
thanks for this great work. I have two question.

Is it possible to configure the sizes of states in header? I couldn’t find an option here or at ApexCharts documentation. I would like to change the state size, the unit size and the name size.

Is there an easy option to show the card without a graph. I really like how the states are printed. I used height:0 in apex chart config, but was wondering if there will be still some calculation done in background that would lead to unnecessary load.

Config:

type: custom:apexcharts-card
graph_span: 1s
apex_config:
  chart:
    height: 0
all_series_config:
  show:
    in_chart: false
header:
  show: true
  title: Schlafzimmer
  show_states: true
  colorize_states: true
  floating: false
series:
  - entity: sensor.temperature_8
    name: Temp
  - entity: sensor.humidity_9
    name: Humidity
  - entity: sensor.schlafzimmer_absolutehumidity
    name: Abs. H

I am plotting some donut charts:

  • Is it possible to have %ages instead of sensor values in the donut series labels (and then keep the raw values in the legend)
  • Is it possible to have the total of the sensors in the donut in the title of the card, or even in the middle hole somehow? Or, alternatively, the value of another sensor not in the donut at all.

Thanks!

Is there a way in the data_generator to access values from other sensor? I need to compare values from the time series with a sensor.

Is it in anyway possible to have a max number of states per row in the header? I don’t want to go and combine a different card to get the states properly aligned. Ideally I want to limit this to 3 states per row.

I have existing data from 4 or 5 temperature sensors, and I would like to do a line graph showing the difference between 1 sensor and all the others (i.e. have 1 sensor be y=0 on the graph and all others show their difference from the first sensor). Is there a way to do this with my existing data?

I looked at using transform, but it seems like you can only access the current value of another sensor, not the value as of the timestamp on the data point being transformed.

If I didn’t want existing data it seems like I could set up a template sensor for each one that returns the difference, but my understanding is that there’s no way to retroactively calculate the template sensor data from existing values.

I’m open to other ways of displaying the data as well if there’s another approach that would make it easy to see how the relative temperature changes over time between the sensors.

Just a thought, but have you consider changing your browser Time Zone when travelling. It might work.

This is not possible with all browsers e.g. Safari.

How to use an entity instead of fixed value?

Like this:

apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': sensor.my_sensor_number
        yAxisIndex: 1
        strokeDashArray: 5
        borderColor: '#888888'
        borderWidth: 1```

Hi!

Does anyone know how to remove the repeated value of the last data in 24h format, of a time that has not yet passed.

type: custom:apexcharts-card
header:
  show: true
  title: Consumo actual
  show_states: true
  colorize_states: true
update_interval: 1m
series:
  - entity: sensor.contadorluz_energy_power
    type: line
    group_by:
      func: max
      duration: 2m
now:
  show: true
  color: red
  label: Ahora
graph_span: 24h
span:
  end: day

Hi, did you manage to solve it? I have the same problem too

Would you like to share the code for those?

With template card. Search this thread for custom:config-template-card, there are plenty examples.

1 Like

Perfect! Thanks! :slight_smile: