ApexCharts card - A highly customizable graph card

Try looking for extend to: now in the docs.

Hi, my sensor has to much data, so apexcarts loading really long.

Did Apexcarts has something like “Dots per Hour” like mini graph card or something?
I just have data on each second, if i load a full day, its to much

Any idea how to force my chart Y axis to always start at zero?

Guys need help here.
I am trying to plot apex graph with this code and got error:

Entity not available: nordpool_kwh_oslo_nok_3_10_025
Entity not available: nordpool_kwh_oslo_nok_3_10_025

This is the code:

type: custom:apexcharts-card
header:
  show: true
  title: Nordpool Prize -> 48 hours
  show_states: false
graph_span: 2d
span:
  start: day
series:
  - entity: nordpool_kwh_oslo_nok_3_10_025
    name: Today
    data_generator: |
      return entity.attributes.raw_today.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
    type: column
    show:
      legend_value: false
      in_header: false
    extend_to: end
  - entity: nordpool_kwh_oslo_nok_3_10_025
    name: Tomorrow
    data_generator: |
      return entity.attributes.raw_tomorrow.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
    type: column
    show:
      legend_value: false
      in_header: false

What am I doing wrong?
Entity IS available and I use it in some other chart.

Shouldn’t it be sensor.nordpool_kwh_oslo_nok_3_10_025 rather than just nordpool_kwh_oslo_nok_3_10_025?

1 Like

Hi Mirek and thank you for help.
I figure it out last night and everything set in place. Have had both today and tomorrow prices. But since this morning, I got just today price for some reason…

When using long term statistics I can’t get Apex to show the current month, only previous months. So now in September the chart shows data until end of august, and I wouild like the numbers for September (so far to be shown in the graph. Has anyone been able to solve that?

graph_span: 32w
update_interval: 5min
series:
  - entity: sensor.last_meter_consumption_vagen
    name: ' '
    type: column
    color: 2eb9ff
    statistics:
      type: sum
      period: month
      align: middle
    group_by:
      func: diff
      duration: 4w
      fill: last
      start_with_last: true
2 Likes

Some time ago I tried and failed to embed apexchart into custom button card in a way to fill button card without any margins.
That time I was asking in several places for help but got no answer. Few days ago I decided to do another go and finally, I managed to achieve it myself. Hope it will help others.

There are two crucial things to remember:

  • the parent element which contains the chart, must have set display CSS property to block allowing ApexChart (not the card) to know the wrapping element size. In HA scope it’s display is often set to flex.
  • in order to remove completely various elements allocating space around the graph, sparkline: enabled: true has to be set in ApexChart config (not the card).

Hope it help others

Here is the result:
image

And the code:

    - type: custom:button-card
      template: customcard_31wrapper
      custom_fields:
        graph:
          card:
            type: custom:apexcharts-card
            style: |
              }
              ha-card .apexcharts-legend-text {
                color: var(--tile-state-text-color, rgba(0, 0, 0, 0.4)) !important;
                font-size: 14px !important
              }
            hours_12: false
            graph_span: 72h
            apex_config:
              chart:
                sparkline:
                  enabled: true
              legend:
                position: top
                floating: false
              grid:
                show: false
            yaxis:
              - id: temp
                min: ~0
                max: ~35
                show: false
              - id: hum
                show: false
                min: ~0
                max: ~90
            series:
              - entity: sensor.childroom_temperature
                yaxis_id: temp
                color: var(--accent-color)
                name: temp
                stroke_width: 1
                type: area
                opacity: 0.2
              - entity: climate.trv_childroom
                transform: return entity.attributes.temperature
                yaxis_id: temp
                color: var(--accent-color)
                name: target
                stroke_width: 1
                type: line
                opacity: 0.2
              - entity: sensor.childroom_humidity
                yaxis_id: hum
                color: '#3498db'
                name: hum
                stroke_width: 1
                type: area
                opacity: 0.1

and button card templates used in the snippet above:

  customcard_style:
    styles:
      card:
        - padding: 10px
        - padding-top: 3px
        - padding-bottom: 3px
        - box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px
        - border-radius: var(--ha-card-border-radius, 12px)
        - user-select: none
      name:
        - justify-self: start
        - padding-left: 0px
        - font-weight: 500
        - font-size: 14px
        - align-self: middle
        - padding-top: 20px
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      icon:
        - margin-top: 5px
        - width: 30px
        - height: 30px
  customcard_31wrapper:
    template: customcard_style
    aspect_ratio: 3/1
    variables:
      entity_temp: ''
      entity_hum: ''
    styles:
      card:
        - padding: 0px
      grid:
        - grid-template-areas: '"graph"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr
      custom_fields:
        graph:
          - padding: 0px
          - margin: 0px
          - align-items: end
3 Likes

Is it possible to plot a point every time a sensor changes?

I track my mileage between charges on my ev. This value is set every time the EV is plugged in. This might be often or might be not so often. No set schedule.

Right now my graph is covered over a period of time and the value is tracked daily which isn’t what I want.

Question from a ApexCharts noob. I would like to color my thresholds using a state, like the example below. Is this supporded and if so, what would that syntax for that be?

color_threshold:
  - value: 2
    color: midnightblue
  - value: { { states('sensor.mysensor) } }
    color: steelblue

And/or is it possible to achieve this using an state_attr?

Wouldn’t be every 30m or 1h often enough?

I don’t think so, for example

01/01 = 80
07/01 = 75
10/01 = 25
20/01 = 100

The sensor value stays the same until it’s changed. I would want the 4 points above plotted but instead I get 7 points at 80 then 3 at 75 and then 10 at 25 and so on….

Does someone know how to have sensor value as well as the mean over 7 days of that sensor value in the same graph?


Here my config:

type: custom:apexcharts-card
card_mod:
  class: top-level-graph
graph_span: 28d
span:
  end: day
header:
  show: true
  title: Reproduktionswert r0 [4w]
  show_states: true
  colorize_states: true
yaxis:
  - align_to: 0.1
    decimals: 2
apex_config:
  yaxis:
    forceNiceScale: true
  markers:
    size: 2
    colors: white
    strokeColors: black
    strokeWidth: 2
    hover:
      size: 7
  stroke:
    width: 3
  annotations:
    position: back
    yaxis:
      - 'y': 0
        y2: 1
        fillColor: green
        opacity: 0.5
      - 'y': 1
        y2: 50
        fillColor: red
        opacity: 0.5
  legend:
    show: false
  tooltip:
    x:
      format: ddd dd MMM
series:
  - entity: sensor.rki_covid_germany_r7
    type: column
    float_precision: 2
    name: Aktuell
    group_by:
      func: last
      duration: 1d
  - entity: sensor.rki_covid_germany_r7
    type: line
    float_precision: 2
    name: 7 Tage
    group_by:
      func: avg
      duration: 7d
style: |
  ha-card {
    font-size: 20px;
  }

But with that, I see a value for tomorrow and it displays only one value every 7 days but not the 7 day mean for all days.

I eventually managed to solve it myself. Just add another sensor with the correct attribute/value and hide it from the chart.

header:
  show_states: true

series:
  - entity: sensor.nordpool_kwh_se3_sek_0_10_0
    name: Timpris just nu
    color: orange
    type: column
    show:
      in_chart: false

I would love this as well. The energy dashboard uses it for the tracked device chart. I don’t think we can apply that style yet though.

1 Like

Hey! I have a montly utility meter that resets each month. How could I get this to show montly usage in Apex Chart?

Thanks!

2 Likes

Hi, Nice graphs. How do you get the max and min values marks?

Thanks :blush:
Take a look at “extremas” here:

1 Like

I set my ac cooling state as represented with the blue lines to 70 for each time its cooling with this
transform: ‘return x === ‘‘cooling’’ ? 70 : 0;’.
how can I represent the blue lines to equal the current temperature of? so instead of the on off states set to 70 no matter what, I would like it to match the current temperature.
could someone guide me

type: custom:apexcharts-card
update_delay: 3s
update_interval: 1min
apex_config:
  chart:
    height: 250px
    yaxis:
      - id: first
        opposite: true
      - id: second
now:
  show: true
  label: Now
  color: red
graph_span: 1d
series:
  - entity: climate.lyricstat3db4c9
    attribute: current_temperature
    stroke_width: 3
    curve: stepline
    color: rgb(125, 0, 250)
    yaxis_id: first
    type: area
    opacity: 0.1
    show:
      extremas: true
  - entity: climate.lyricstat3db518
    attribute: current_temperature
    stroke_width: 3
    curve: stepline
    color: rgb(69, 0, 196)
    yaxis_id: second
    type: area
    opacity: 0.1
    show:
      extremas: true
  - entity: climate.lyricstat3db4c9
    attribute: hvac_action
    transform: return entity.attributes.current_temperature
    stroke_width: 1
    color: rgb(157, 154, 252)
    type: column
    show:
      legend_value: false
  - entity: climate.lyricstat3db4c9
    attribute: hvac_action
    transform: 'return x === ''heating'' ? 70 : 0;'
    stroke_width: 1
    color: rgb(252, 154, 154)
    type: column
    show:
      legend_value: false
yaxis:
  - min: 60
    max: 80

Thank you!

Much appreciated.

I copied the “Now” feature and it works but only copying “extremas: true” didn’t change anything. Maybe it will come later when the data is actually updated?