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?
This is the sensor data:
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.
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