ApexCharts card - A highly customizable graph card

Mine is still working like a charm. Have you tried to restart HA? Or look at the data you want to display in the dev tools → states section.

This works normally fine … post the whole code please

Why is Apex Charts spamming my console?

Apex Charts

Card .yaml

          - type: custom:apexcharts-card
            graph_span: 24h
            span:
              end: hour
            header:
              show: true
              show_states: true
            apex_config:
              fill:
                type: gradient
                gradient:
                  type: vertical
                  shadeIntensity: 0
                  opacityFrom: 1
                  opacityTo: 0.5
                  stops: 10
              chart:
                height: 150px
              grid:
                show: false
                borderColor: darkslateblue
                strokeDashArray: 2
              dataLabels:
                background:
                  borderWidth: 0
                  opacity: 0
                  foreColor: white
                offsetY: -10
              plotOptions:
                bar:
                  borderRadius: 0
                  dataLabels:
                    position: top
            series:
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_last_hour
                name: Rain Last Hour
                color: deepskyblue
                type: column
                group_by:
                  func: raw
                  duration: 1d
                  fill: zero
                statistics:
                  type: state
                  period: hour
                  align: end
                show:
                  name_in_header: true
                  datalabels: true
                  in_chart: true
                  legend_value: false
                  extremas: false
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_last_hour
                name: Rain Last 24 Hours
                color: deepskyblue
                type: column
                group_by:
                  func: sum
                  duration: 24h
                  fill: zero
                statistics:
                  type: state
                  period: hour
                  align: end
                show:
                  name_in_header: true
                  datalabels: false
                  in_chart: false
                  legend_value: false
          - type: custom:apexcharts-card
            graph_span: 30d
            span:
              end: day
            header:
              show: true
              show_states: true
            apex_config:
              fill:
                type: gradient
                gradient:
                  type: vertical
                  shadeIntensity: 0
                  opacityFrom: 1
                  opacityTo: 0.5
                  stops: 10
              chart:
                height: 150px
              grid:
                show: false
                borderColor: darkslateblue
                strokeDashArray: 2
              dataLabels:
                background:
                  borderWidth: 0
                  opacity: 0
                  foreColor: white
                offsetY: -10
              plotOptions:
                bar:
                  borderRadius: 0
                  dataLabels:
                    position: top
            series:
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_today
                name: Rain Today
                color: deepskyblue
                type: column
                group_by:
                  func: max
                  duration: 1d
                  fill: zero
                statistics:
                  type: state
                  period: day
                  align: end
                show:
                  name_in_header: true
                  datalabels: true
                  in_chart: true
                  legend_value: false
                  extremas: false
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_today
                name: Rain Last 30 Days
                color: deepskyblue
                type: column
                group_by:
                  func: sum
                  duration: 30d
                  fill: zero
                statistics:
                  type: state
                  period: day
                  align: end
                show:
                  name_in_header: true
                  datalabels: false
                  in_chart: false
                  legend_value: false
          - type: custom:apexcharts-card
            graph_span: 12month
            span:
              end: month
              offset: '-0d'
            header:
              show: true
              show_states: true
            apex_config:
              fill:
                type: gradient
                gradient:
                  type: vertical
                  shadeIntensity: 0
                  opacityFrom: 1
                  opacityTo: 0.5
                  stops: 10
              chart:
                height: 150px
              grid:
                show: false
                borderColor: darkslateblue
                strokeDashArray: 2
              dataLabels:
                background:
                  borderWidth: 0
                  opacity: 0
                  foreColor: white
                offsetY: -10
              plotOptions:
                bar:
                  borderRadius: 0
                  dataLabels:
                    position: top
            series:
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_today
                name: Rain This Month
                color: deepskyblue
                type: column
                group_by:
                  func: sum
                  duration: 1month
                  fill: zero
                statistics:
                  type: state
                  period: day
                  align: end
                show:
                  name_in_header: true
                  datalabels: true
                  in_chart: true
                  legend_value: false
                  extremas: false
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_today
                name: Rain Last 12 Months
                color: deepskyblue
                type: column
                group_by:
                  func: sum
                  duration: 12month
                  fill: zero
                statistics:
                  type: state
                  period: day
                  align: end
                show:
                  name_in_header: true
                  datalabels: false
                  in_chart: false
                  legend_value: false

When the value of a series entity is zero, is there any way to show the trailing decimals?
For example, Dryer = 0.00 kWh

  - entity: sensor.dryer_energy_today
    name: Dryer
    float_precision: 2

Here is all the code for the grid import / export.
Note that utility meter only takes positive numbers, my bi-directional meter gives negative for export, positive for import in watts.

The chart for import is correct.

configuration.yaml

sensor:
  - platform: integration
    name: energy_grid_import
    source: sensor.grid_import
    unit_prefix: k
    round: 3
    method: left

  - platform: integration
    name: energy_grid_export
    source: sensor.grid_export
    unit_prefix: k
    round: 3
    method: left

template:
  - sensor:
      - name: grid_import
        unit_of_measurement: W
        device_class: power
        state_class: measurement
        state: >
          {% if states('sensor.energy_grid_power_now')|float(0) >= 0 %}
            {{ states('sensor.energy_grid_power_now')|float(0) }}
          {% else %}
            0
          {% endif %}

       - name: grid_export
        unit_of_measurement: W
        device_class: power
        state_class: measurement
        state: >
          {% if states('sensor.energy_grid_power_now')|float(0) < 0 %}
            {{ states('sensor.energy_grid_power_now')|float(0)|abs }}
          {% else %}
            0
          {% endif %}

utility_meter:
  grid_import_hourly:
    name: Energy Grid Import Hourly
    source: sensor.energy_grid_import
    cycle: hourly
  grid_export_hourly:
    name: Energy Grid Export Hourly
    source: sensor.energy_grid_export
    cycle: hourly

mqtt:
  sensor:
    # SHELLY GRID CLAMP
    - name: "energy_grid_power_now"
      state_topic: "energy/grid"
      value_template: '{{ value_json.power }}' 
      device_class: power
      unit_of_measurement: 'W'

apexcard

type: custom:apexcharts-card
header:
  standard_format: false
  show: true
  show_states: true
  colorize_states: true
  title: Grid Import/Export
graph_span: 24h
show:
  last_updated: true
apex_config:
  chart:
    height: 395
    extend_to: now
  yaxis:
    show: true
    forceNiceScale: true
  stroke:
    show: true
    width: 1
  legend:
    show: true
stacked: true
series:
  - entity: sensor.energy_grid_import_hourly
    type: column
    name: Import
    float_precision: 2
    group_by:
      func: delta
      duration: 1h
  - entity: sensor.energy_grid_export_hourly
    type: column
    name: Export
    transform: return -x;
    float_precision: 2
    group_by:
      func: delta
      duration: 1h

The result of the current code is below, however I would like the export ( blue ) columns to be negative - same as energy dashboard

thanks

I missed the func: delta and this is for some reason not working (same for func: diff). Also additions provide odd results, so suggest to raise a Issue
Issues · RomRider/apexcharts-card

I have raise and issue on github.

Do you know if it can be done using generate_data. I tried but I don’t really understand what I am doing and just produced errors.

I had a look but can’t find a solution easily, which for sure does not mean there is one but it will be a complex one too.
EDIT to explain this a bit better, datagenerator seems (no 100% sure) to run entry by entry so the script needs to start collecirng values to define max & min …and then subtract max - min values for a specific range (e.g. group_by duration) and whilst this is easy in the core code of apexcharts, re-doing this in javascript is not s imple thing.
So, let’s see if GH Issue returns something

Hi, when “HomeEnergy total power” is negative then “Central Heating power” columns are moved from zero offset to negative offset.

How to force columns to start from zero and not from the bottom of the graph? Thanks!

This is my code:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 350
    width: 95%
graph_span: 8h
update_interval: 10sec
experimental:
  brush: true
brush:
  selection_span: 30min
header:
  show: false
stacked: true
show:
  loading: true
  last_updated: true
all_series_config:
  type: column
  group_by:
    func: avg
    duration: 2min
  transform: return x /1000
  unit: kW
  show:
    in_brush: true
    in_chart: true
series:
  - entity: sensor.houseenergy_total_active_power
    type: line
    stroke_width: 2
    extend_to: false
  - entity: sensor.centralheating_power
  - entity: sensor.bathroom1wash_power
  - entity: sensor.bathroom2ceiling_switch_0_power
  - entity: sensor.bathroom2ceiling_switch_1_power
  - entity: sensor.bathroomradiator_switch_0_power

Is there any way to call a variable in the color threshold?

I tried using var(–primary-color) and it doesn’t work.

code is:

              experimental:
                color_threshold: true

                color_threshold:
                  - value: 18
                    color: var(--primary-color)
                  - value: 20
                    color: hsl(from var(--primary-color) calc(h + 90) s calc(l + 25))
                  - value: 24
                    color: hsl(from var(--primary-color) calc(h + 120) s calc(l + 25))
                  - value: 27
                    color: hsl(from var(--primary-color) calc(h + 180) s calc(l + 25))

I see this has been reported as a bug over a month ago.
https://github.com/RomRider/apexcharts-card/issues/841

I’ve been using this card for quite a while with huge success, but recently something is going awry with it (despite no changes by me) and I’m not quite sure where the problem is.

Essentially one of my sensors (battery) keeps disappearing. It’s obviously getting data, because it shows it’s 100%, and if I click on it I see the full history that is not showing on the chart. I’ve made no changes to this chart in about 4 months, but the problem is fairly new, yet does not seem to be impacting a different chart showing the same sensor. Any thoughts?
Screenshot 2025-02-04 151910
This is the sensor data:
Screenshot 2025-02-04 152006

This is the one that’s working:

Actually, just a reply to myself showing that the other graph isn’t always working either. Now 30 minutes later it’s missing some data at the front.

@vingerha Thanks for all your help, hopefully there is a fix in apexcharts.

How to show the daily diff values in a graph?
I have tried with group_by: func: diff, but it seems this was not the solution.

type: custom:apexcharts-card
graph_span: 7d
series:
  - entity: sensor.power_consumption
    type: column
    color: blue
    float_precision: 1
    group_by:
      func: diff
      duration: 1d

The first picture shows the daily values and the 2nd should show the grouped by diff-values.

diff v1.4.0 Will return the difference between the last and the first entry in the bucket
So if your values are daily then it will always return 0

It’s not my goal to show zero values, I would like to show the diff from one day to the day before. You can see in the first diagram that on most of the days there is an increase, this delta I would like to show.

Anybody who has an idea on how to solve this?

Your bucket is 1d…change the bucket

ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community