ApexCharts card - A highly customizable graph card

Hi @benm7 could you share the full code please, really like what you’ve done here!

Hi. I have a display bug with line charts. First, the first data of the day doesn’t show and then tooltip box show only one information point for one line, normally the information of all the line will be show in the same tooltip.

EDIT : When I am in “Dashboard Edit” I have no bug. But when I exit “Dashboard edit”, so in normal, the bug is here.

Code below:

type: custom:apexcharts-card
graph_span: 24h
span:
  end: day
show:
  last_updated: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Température intérieure
now:
  show: true
  label: Now
all_series_config:
  type: line
  extend_to: now
  curve: smooth
  fill_raw: last
  group_by:
    func: avg
    duration: 5min
series:
  - entity: sensor.bureau_heating
  - entity: sensor.chambre_baptiste_heating
  - entity: sensor.chambre_laurent_heating
  - entity: sensor.sejour_heating
  - entity: sensor.cuisine_heating
  - entity: sensor.couloir_heating
  - entity: sensor.sejour_bas_heating
yaxis:
  - min: 0
    max: 100
apex_config:
  yaxis:
    - show: true
      decimalsInFloat: 0
  responsive:
    - breakpoint: 769
      options:
        chart:
          height: 500px
    - breakpoint: 1025
      options:
        chart:
          height: 710px
    - breakpoint: 10000
      options:
        chart:
          height: 750px
  stroke:
    width: 3
  markers:
    size: 0
  chart:
    zoom:
      enabled: true
    toolbar:
      show: true
    tools:
      zoom: true
      zoomin: true
      zoomout: true
      pan: true
      reset: true
  legend:
    show: true

Got it :slight_smile: (RTFM).
Group By features a methods as delta or diff, which give exactly what you want in such situation for total_increasing sensors, respectively:

Will return the delta between the biggest and smallest state in each bucket
Will return the difference between the last and the first entry in the bucket

(as for utility meters you have ever increasing values, so both functions are identical for this use case)
So what I have is now just

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

It was turned in to an official custom card for UI Minimalist :slight_smile: You can find the code/template here:

https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_apexcharts/

1 Like

hi @benm7 im with @Airyphyla on this. However the code/link you’re referring too doesn’t help me too much. I struggle getting everything right, and the example doesn’t seem to have the doughnut thingy on the right. My skills are not sufficient to make something similar myself. Could you paste your code so i can copy/paste it into my setup? Heck, ill buy you a coffee :coffee:

Can I use the transform function to provide the state of another sensor for that point in time (rather than a fixed number)?

I have the following graph:

  • The grey areas represent the times that my heating system is actually heating (as opposed to being idle).
  • The green areas represent the target temp of the heating system

I am creating the grey and green as follows:

- entity: sensor.hive_heating_reported_action
  name: "Hive action"
  type: area
  color: grey
  stroke_width: 0
  opacity: 0.5
  curve: stepline
  transform: "return x === 'heating' ? 25 : 5;"
  show:
    in_header: false
- entity: sensor.hive_heating_reported_target_temp
  name: "Hive Target"
  type: area
  curve: stepline
  color: DarkSlateGray 
  stroke_width: 2
  opacity: 0.5

Can the transform function return the result of sensor.hive_heating_reported_target_temp for the same point in time? This would result in the grey areas only going as high as the top of the green area. It would also be great if the !='heating' result was the y-axis min, but that’s secondary.

I have tried the following but the graph will not render.

transform: "return x === 'heating' ? states['sensor.hive_heating_reported_target_temp'].state : 5;"

Thanks.


Edit:
So - typically - as soon as I posted the above, I saw what I think is the answer in the docs:

Your javascript code will receive:

  • x: a state or a value of the attribute if you defined one (it can be a string, null or a number depending on the entity type you’ve assigned)
  • hass: the full hass object (hass.states['other.entity'] to get the state object of another entity for eg.)
  • entity: the full state object of the entity from the history entry currently being transformed

So I wrote this:

transform: "return x === 'heating' ? hass.states['sensor.hive_heating_reported_target_temp'] : 5;"

…but nothing renders (for that sensor).


Edit 2:
A bit of a wild guess, but I added .state to the end as follows:

transform: "return x === 'heating' ? hass.states['sensor.hive_heating_reported_target_temp'].state : 5;"

and it kind of works, but not quite:


edit: 3
I believe it only shows the current value for the sensor in question. I will make this a feature request.

Hello everybody,

i have a problem with apex chart:

When i am in the edition mode in lovelace everything is fine. But if i close the edition mode the values are wrong.

You can see this in the following pictures. The first one ist in the edition mode whith the right values.

Does anyone know whats here the problem?

hi can anyone tell me why this come up wrong?Skærmbillede (137)

type: custom:vertical-stack-in-card
style: |
  ha-card {
  box-shadow: 2px;
  background: transparent:
  margin: 15px:
  }
cards:
  - type: custom:apexcharts-card
    now:
      show: true
    graph_span: 48h
    apex_config:
      chart:
        height: 300px
      legend:
        showForSingleSeries: true
      plotOptions:
        bar:
          borderRadius: 2
      yaxis:
        min: 0
        max: 6
        decimalsInFloat: 3
        tickAmount: 10
        forceNiceScale: true
      xaxis:
        labels:
          datetimeFormatter:
            hour: H
    all_series_config:
      show:
        offset_in_name: false
    header:
      title: ' '
      show: true
      show_states: true
      colorize_states: true
    span:
      start: day
      offset: +0h
    series:
      - entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
        type: column
        color: orange
        float_precision: 3
        stroke_width: 0
        name: Dagens timepris
        show:
          in_header: false
          legend_value: false
          extremas: false
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
          });
      - entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
        type: column
        name: Morgendagens timepris
        show:
          in_header: false
          legend_value: false
          extremas: true
        data_generator: |
          return entity.attributes.raw_tomorrow.map((start, index) => {
            return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
          });
      - entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
        name: Timepris lige nu
        color: orange
        type: column
        show:
          in_chart: false
        float_precision: 3
      - entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
        attribute: average
        type: column
        color: white
        float_precision: 3
        stroke_width: 2
        name: Dagens gennemsnits pris
        group_by:
          duration: 1d
        show:
          in_chart: false
          legend_value: false
      - entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
        attribute: max
        type: column
        color: red
        float_precision: 3
        stroke_width: 2
        name: Dagens højeste pris
        group_by:
          duration: 1d
        show:
          in_chart: false
          legend_value: false
      - entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
        attribute: min
        type: column
        color: green
        float_precision: 3
        stroke_width: 2
        name: Dagens laveste pris
        group_by:
          duration: 1d
        show:
          in_chart: false
          legend_value: false
      - entity: sensor.el_kobt_i_dag_cost
        color: purple
        float_precision: 2
        stroke_width: 2
        name: Pris for dagens strøm
        group_by:
          duration: 1d
        show:
          in_chart: false
          legend_value: false
      - entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
        attribute: tomorrow
        type: column
        color: var(--energy-grid-consumption-color)
        float_precision: 3
        stroke_width: 2
        name: Gennemsnit i morgen
        group_by:
          duration: 48h
        show:
          in_chart: false
          legend_value: false

1 Like

Can it be my additinal cost template there is something wrong with?


{% set costs = {
    "elafgift": 0.008,
    "balancetarif_for_forbrug": 0.00229,
    "systemtarif" : 0.061,
    "transmissions_nettarif": 0.049,
    "netselskab_Elvaerk_C_lavlast" : 0.3947,
    "netselskab_Elvaerk_C_spidslast" : 1.2997,
    "eltillaeg_ellev": 0.015,
    "abonnement_ellev": 23.20 / 30 / 24,
    "abonnement_netlev": 45.00 / 30 / 24
 
    } %}
 
{% if now().month >= 10 or now().month < 4 %}
  {% if now().hour >= 17 and now().hour < 20 %}
{{
  costs.elafgift +
  costs.balancetarif_for_forbrug + 
  costs.systemtarif + 
  costs.transmissions_nettarif + 
  costs.netselskab_Elvaerk_C_spidslast +
  costs.abonnement_ellev +
  costs.abonnement_netlev
}}
  {% else %}
{{
  costs.elafgift + 
  costs.balancetarif_for_forbrug + 
  costs.systemtarif + 
  costs.transmissions_nettarif + 
  costs.netselskab_Elvaerk_C_lavlast +
  costs.abonnement_ellev +
  costs.abonnement_netlev
}}
  {% endif %}
{% else %}
{{
  costs.elafgift + 
  costs.balancetarif_for_forbrug + 
  costs.systemtarif + 
  costs.transmissions_nettarif + 
  costs.netselskab_Elvaerk_C_lavlast +
  costs.abonnement_ellev +
  costs.abonnement_netlev
}}
{% endif %}

Hi all.

Stupid questions I suppose :slight_smile:

I created a template to use with config_template and this applies to all series, but it’s possible to create a template for single series?

Regards

Just in case this helps anyone, I think I’ve figured out a way of making this graph display what I want. I don’t fully understand why this is working but so far so good!

I can only get this working with Group_By and not Statistics; I noticed that playing around with the duration started making all the X-axis labels for all days of the week show (including today). If I set the duration to 1d, then the current day label was missing. Setting the Func to Max and duration to 23h59m59s has sorted this out. The max value of this sensor for each day is always going to be the maximum amount of energy used and configuring the duration like this still seems to work out the usage per day as accurately as it did when setting it to 1d. My assumption is that because “today’s” usage isn’t complete yet, i.e. there isn’t 1 day’s worth of data yet, it hid the X-axis label. I don’t know why setting it to 23h59m59s works though! If anyone can shed light on that, it’d be good to understand better

type: custom:apexcharts-card
apex_config:
  xaxis:
    tickAmount: 7
    labels:
      format: ddd
      hideOverlappingLabels: true
      showDuplicatges: true
      show: true
experimental:
  color_threshold: true
graph_span: 7d
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
    group_by:
      func: max
      duration: 23h59m59s
    color_threshold:
      - value: 7
        color: '#99c140'
      - value: 10
        color: '#e7b416'
      - value: 12
        color: '#cc3232'
1 Like

Can you do background colours in this integration?

I know in Apexcharts you can do this through annotations, ie:

How would I implement this in Home Assistant?

Hi guys,

Im trying to record the amount and duration of times that my boiler is heating our house. However, im stuck, i need a second pair of eyes on this because im unable to generate data here.

Would someone help me?

      - type: custom:apexcharts-card
        apex_config:
          chart:
            height: 170px
        experimental:
          color_threshold: true
        graph_span: 7d
        span:
          end: day
        show:
          last_updated: true
        header:
          show: true
          show_states: true
          colorize_states: true
          title: Total Time Heating Per Day
        yaxis:
          - min: 0
            max: ~11
            decimals: 0
            apex_config:
              tickAmount: 5
        series:
          - entity: binary_sensor.boiler_burner
            show:
              header_color_threshold: true
              extremas: true
              as_duration: hour
            type: column
            name: Duration
            group_by:
              func: last
              duration: 1d
            color_threshold:
              - value: 1
                color: dodgerblue
              - value: 3
                color: darkcyan
              - value: 5
                color: goldenrod
              - value: 7
                color: orangered
              - value: 10
                color: darkred

you’re using a binary_sensor which can only ever be ‘on’ or ‘off’. You’'ll need to use the transform function to change ‘on’ into ‘1’ and ‘off’ into ‘0’. Take a look at my post above where I am doing exactly the same thing.

1 Like

Hi, thanks for responding so fast. I’ve tried your suggestion but the code only seems to spit out what im putting in. Other than that i have no idea where i can define On = 1 and Off = 0

        transform: "return x === 'on' ? hass.states['binary_sensor.boiler_burner'].state : 5;"            

results:

OK, so you are doing it differently from me. Did you check the pictures from my link (to my post above)?

You want to show how many hours in any given day (and a binary_sensor cannot do that). I was showing when it is on and off (and a binary sensor can do that).

Really? The graph itself can’t record the time of that sensor being on? That’s a shame, maybe I can work it with a helper?

Yes it can. However it appears (looking at your graph) that you are showing hrs/day not when off and on.

Please see my post above to see how I am doing it.

1 Like

I am, but is that the whole code? I think im missing something there.

OK, try something like this:

- type: custom:apexcharts-card
  apex_config:
  chart:
    height: 170px
  graph_span: 168h
  title: 'Heating'
  yaxis:
    - min: 0
      max: 1
  series:
    - entity: binary_sensor.boiler_burner
      transform: "return x === 'on' ? 1 : 0;"

note: I’m not sure if the ‘on’ in the last line needs capitalisation or not.