Hi All,
I have developed a couple of apexcharts-cards for a dashboard which are inconsistent when the mouse pointer is hovered over the details in the graph. I have an hourly and a daily chart. The hourly displays all four figures when you hover over an entry, the daily chart only shows one of the elements of the group. This is the inconsistent behaviour I have noticed. How can I fix it?
I have included the yaml definitions of the charts, plus the grid energy import daily and hourly utility meters, which both source the same grid energy import integral, from the same physical power meter (Shelly 3 phase EM.) I have also added a couple of images of the display as the mouse hovers over the chart.
Apexchart Code
- type: custom:apexcharts-card
header:
show: true
title: Energy Today (by Hour)
show_states: false
colorize_states: true
graph_span: 24hours
section_mode: false
update_interval: 5minute
span:
end: hour
apex_config:
chart:
height: 300
series:
- entity: sensor.grid_energy_import_hourly
name: Import
type: column
statistics:
type: state
period: hour
align: end
color: '#4269D0'
float_precision: 2
- entity: sensor.solar_energy_hourly
name: Solar
type: column
statistics:
type: state
period: hour
align: end
color: '#FF725C'
float_precision: 2
- entity: sensor.solar_energy_to_grid_hourly
name: Solar to Grid
type: column
statistics:
type: state
period: hour
align: end
color: '#6CC5B0'
float_precision: 2
- entity: sensor.battery_energy_to_grid_hourly
name: Battery to Grid
type: column
statistics:
type: state
period: hour
align: end
color: SandyBrown
float_precision: 2
- type: custom:apexcharts-card
header:
show: true
title: Energy last 14 days
show_states: false
colorize_states: true
graph_span: 14day
section_mode: false
update_interval: 15minutes
span:
end: day
apex_config:
chart:
height: 300
series:
- entity: sensor.grid_energy_import_daily
name: Import
type: column
statistics:
type: state
period: day
align: end
color: '#4269D0'
float_precision: 2
- entity: sensor.solar_energy_daily
name: Solar
type: column
statistics:
type: state
period: day
align: end
color: '#FF725C'
float_precision: 2
- entity: sensor.solar_energy_to_grid_daily
name: Solar to Grid
type: column
statistics:
type: state
period: day
align: end
color: '#6CC5B0'
float_precision: 2
- entity: sensor.battery_energy_to_grid_daily
name: Battery to Grid
type: column
statistics:
type: state
period: day
align: end
color: SandyBrown
float_precision: 2
Utility Meters
grid_energy_import_daily:
name: Grid Energy Import Daily
unique_id: grid_energy_import_daily
source: sensor.grid_energy_import
cron: 0 0 * * *
delta_values: false
net_consumption: false
periodically_resetting: false
always_available: true
grid_energy_import_hourly:
name: Grid Energy Import Hourly
unique_id: grid_energy_import_hourly
source: sensor.grid_energy_import
cron: 0 * * * *
delta_values: false
net_consumption: false
periodically_resetting: false
always_available: true
Integral
- name: Grid Energy Import
unique_id: grid_energy_import
platform: integration
source: sensor.grid_power_import
unit_prefix: k
unit_time: h
round: 5
max_sub_interval:
seconds: 5
method: trapezoidal
Templates of Power
- name: Grid Power
unique_id: grid_power
unit_of_measurement: W
device_class: power
state_class: measurement
state: >
{% set power = 0 | float %}
{% set limit = 5 | float %}
{% set answer = states('sensor.mains_power_channel_a_power') %}
{% if is_number(answer) and answer | float | abs > limit %}{% set power = power + answer | float %}{% endif %}
{% set answer = states('sensor.mains_power_channel_b_power') %}
{% if is_number(answer) and answer | float | abs > limit %}{% set power = power + answer | float %}{% endif %}
{% set answer = states('sensor.mains_power_channel_c_power') %}
{% if is_number(answer) and answer | float | abs > limit %}{% set power = power + answer | float %}{% endif %}
{{ power }}
attributes:
location: \templates\sensors\grid\power.yaml
a_phase: "{{ states('sensor.mains_power_channel_a_power') }}"
b_phase: "{{ states('sensor.mains_power_channel_b_power') }}"
c_phase: "{{ states('sensor.mains_power_channel_c_power') }}"
- name: Grid Power Import
unique_id: grid_power_import
unit_of_measurement: W
device_class: power
state_class: measurement
state: >
{% set power = 0 | float %}
{% set answer = states('sensor.grid_power') | float(default=0) %}
{% if is_number(answer) and answer | float > 5 %}{% set power = power + answer | float %}{% endif %}
{{ power }}
attributes:
location: \templates\sensors\grid\power.yaml
grid_power: "{{ states('sensor.grid_power') }}"
Regards,
Craig