Yeah - the problem seems to be that there is no way to set the center point or origin for area graphs (that I can find anyway) - zero is just assumed and it looks like it would take multiple workarounds to get the display I’m trying for. Maybe I’ll put in a feature request for this.
Is it possible to show all values when hovering? It does show all values when you have group by last:
group_by:
func: last
Without that it only shows 1 value:
I tried setting the tooltip options, but it doesn’t seem to do anything:
apex_config:
tooltip:
shared: true
intersect: false
Hey, I am having problem with the style for my apex card. For some reason when I do the style as I should in the apex charts style-element, it simply refuses to use it. But if I do it the way I shouldnt do it, with card_mod, then it works. The problem is that the chart background flashes and shakes for a moment when it reloads. I would prefer to do it using the style: element, but why doesnt it work?
I added both examples in the same code, naturally I only try them one at a time.
type: custom:apexcharts-card
style: |
ha-card {
border: none;
margin-top: 10px;
margin-left: 0px;
background: transparent;
}
chart_type: donut
show:
loading: false
header:
title: ''
show_states: false
colorize_states: true
show: false
series:
- entity: sensor.qubino_3_phase_smart_meter_electric_consumption_kwh
name: Climate
statistics:
type: change
period: day
- entity: sensor.easee_lifetime_energy
name: Easee
statistics:
type: change
period: day
- entity: sensor.ovrigt_lifetime_energy
name: Övrigt
statistics:
type: change
period: day
unit: kWh
- entity: sensor.diskmaskin_lifetime_energy
name: Diskmaskin
statistics:
type: change
period: day
- entity: sensor.frysbox_lifetime_energy
name: Frysbox
statistics:
type: change
period: day
- entity: sensor.honshus_lifetime_energy
name: Honshus
statistics:
type: change
period: day
color_list:
- '#F18303' # Climate
- '#EA23FB' # Easee
- '#4287f5' # Övrigt
- '#42f5d1' # Diskmaskin
- '#42f584' # Frysbox
- '#f5a142' # Honshus
graph_span: 24h
span:
start: day
offset: 1d
apex_config:
card:
background: transparent
chart:
height: 310px
width: 310px
animations:
enabled: false
stroke:
show: true
width: 0
curve: smooth
plotOptions:
pie:
donut:
size: '65%'
labels:
show: true
total:
fontFamily: "Amazon Ember Light, sans-serif"
fontSize: 30px
show: true
showAlways: true
label: Total
dataLabels:
enabled: false
legend:
show: false
card_mod:
style: |
.apexcharts-datalabel-value {
font-family: "Amazon Ember Bold" !important;
font-size: 24px !important;
}
ha-card {
border: none;
margin-top: 10px;
margin-left: 0px;
background: transparent;
}
I am trying to create a graph that progressively shows the monthly consumption of various energy devices. Unfortunately, since I am still a beginner with apexchart, I still can’t figure out how to configure this graph. I have sensors that tell me the energy consumption of the previous month and I would like to have a column-type graph with y and x axis that show the months and the Kwh consumed.
Has anyone already made such a graph or can help me create it?
Thanks in advance.
I thought I’d share my code for electricity pricing. Maybe it’ll make someone happy 
NOTE! I made two cards where an input helper and automation hides one and shows the other at 13:00 (when the prices for the next day normally are available).
NOTE2! I’m no programmer but a tinkerer so bear that in mind 
This is what my price template sensor looks like:
- platform: rest
name: "Tibber Combined Prices"
resource: https://api.tibber.com/v1-beta/gql
payload: '{"query": "{viewer {homes {currentSubscription{priceInfo{today {total startsAt} tomorrow {total startsAt}}}}}}"}'
headers:
Authorization: Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Content-Type: application/json
method: POST
value_template: >
{% set prices = value_json.data.viewer.homes[0].currentSubscription.priceInfo.today %} {% if prices | length > 0 %}
{{ prices[now().hour].total }}
{% else %}
0
{% endif %}
json_attributes_path: "$.data.viewer.homes[0].currentSubscription.priceInfo"
json_attributes:
- today
- tomorrow
unit_of_measurement: "SEK/kWh"
device_class: monetary
state_class: measurement
scan_interval: 30
And outputs:
state_class: measurement
today:
- total: 1.6816
startsAt: '2025-03-14T00:00:00.000+01:00'
- total: 1.5257
startsAt: '2025-03-14T01:00:00.000+01:00'
- total: 1.4815
startsAt: '2025-03-14T02:00:00.000+01:00'
- total: 1.4296
startsAt: '2025-03-14T03:00:00.000+01:00'
- total: 1.4513
startsAt: '2025-03-14T04:00:00.000+01:00'
- total: 1.6382
startsAt: '2025-03-14T05:00:00.000+01:00'
- total: 2.1335
startsAt: '2025-03-14T06:00:00.000+01:00'
- total: 2.3233
startsAt: '2025-03-14T07:00:00.000+01:00'
- total: 2.3022
startsAt: '2025-03-14T08:00:00.000+01:00'
- total: 1.9305
startsAt: '2025-03-14T09:00:00.000+01:00'
- total: 1.6164
startsAt: '2025-03-14T10:00:00.000+01:00'
- total: 1.5235
startsAt: '2025-03-14T11:00:00.000+01:00'
- total: 1.2628
startsAt: '2025-03-14T12:00:00.000+01:00'
- total: 1.2555
startsAt: '2025-03-14T13:00:00.000+01:00'
- total: 1.023
startsAt: '2025-03-14T14:00:00.000+01:00'
- total: 1.2322
startsAt: '2025-03-14T15:00:00.000+01:00'
- total: 1.7844
startsAt: '2025-03-14T16:00:00.000+01:00'
- total: 2.1814
startsAt: '2025-03-14T17:00:00.000+01:00'
- total: 2.2797
startsAt: '2025-03-14T18:00:00.000+01:00'
- total: 2.1378
startsAt: '2025-03-14T19:00:00.000+01:00'
- total: 1.7863
startsAt: '2025-03-14T20:00:00.000+01:00'
- total: 1.6056
startsAt: '2025-03-14T21:00:00.000+01:00'
- total: 1.6238
startsAt: '2025-03-14T22:00:00.000+01:00'
- total: 1.5004
startsAt: '2025-03-14T23:00:00.000+01:00'
tomorrow:
- total: 0.8713
startsAt: '2025-03-15T00:00:00.000+01:00'
- total: 0.882
startsAt: '2025-03-15T01:00:00.000+01:00'
- total: 0.8006
startsAt: '2025-03-15T02:00:00.000+01:00'
- total: 0.7454
startsAt: '2025-03-15T03:00:00.000+01:00'
- total: 0.7372
startsAt: '2025-03-15T04:00:00.000+01:00'
- total: 0.7403
startsAt: '2025-03-15T05:00:00.000+01:00'
- total: 0.7468
startsAt: '2025-03-15T06:00:00.000+01:00'
- total: 0.5125
startsAt: '2025-03-15T07:00:00.000+01:00'
- total: 0.4735
startsAt: '2025-03-15T08:00:00.000+01:00'
- total: 0.4686
startsAt: '2025-03-15T09:00:00.000+01:00'
- total: 0.47
startsAt: '2025-03-15T10:00:00.000+01:00'
- total: 0.4718
startsAt: '2025-03-15T11:00:00.000+01:00'
- total: 0.4684
startsAt: '2025-03-15T12:00:00.000+01:00'
- total: 0.4663
startsAt: '2025-03-15T13:00:00.000+01:00'
- total: 0.467
startsAt: '2025-03-15T14:00:00.000+01:00'
- total: 0.4768
startsAt: '2025-03-15T15:00:00.000+01:00'
- total: 0.483
startsAt: '2025-03-15T16:00:00.000+01:00'
- total: 0.4878
startsAt: '2025-03-15T17:00:00.000+01:00'
- total: 0.4974
startsAt: '2025-03-15T18:00:00.000+01:00'
- total: 0.4925
startsAt: '2025-03-15T19:00:00.000+01:00'
- total: 0.4874
startsAt: '2025-03-15T20:00:00.000+01:00'
- total: 0.4824
startsAt: '2025-03-15T21:00:00.000+01:00'
- total: 0.4721
startsAt: '2025-03-15T22:00:00.000+01:00'
- total: 0.4645
startsAt: '2025-03-15T23:00:00.000+01:00'
unit_of_measurement: SEK/kWh
device_class: monetary
friendly_name: Tibber Combined Prices
The automation:
alias: Klocka är >13:00
description: ""
triggers:
- trigger: time
at: "13:00:00"
conditions: []
actions:
- action: input_boolean.turn_on
metadata: {}
data: {}
target:
entity_id: input_boolean.klockan1300
mode: single
And here is my apex code. It
- type: conditional
conditions:
- condition: state
entity: input_boolean.klockan1300
state: "off"
card:
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
grid:
show: true
borderColor: '#E0E0E0'
chart:
height: 200px
xaxis:
type: 'datetime'
tooltip:
enabled: false
labels:
datetimeUTC: false # Viktigt för att hantera lokal tid korrekt
tooltip:
enabled: true
followCursor: false
x:
show: false
fixed:
enabled: true
offsetX: -75
offsetY: -25
custom: |
EVAL:(data) => {
const { series, seriesIndex, dataPointIndex, w } = data;
const price = series[seriesIndex][dataPointIndex].toFixed(1);
const timestamp = new Date(w.globals.seriesX[seriesIndex][dataPointIndex]);
// Hämta timintervallet (ex. 07:00 - 08:00)
const startHour = timestamp.getHours().toString().padStart(2, '0');
const endHour = (timestamp.getHours() + 1).toString().padStart(2, '0');
const timeRange = `${startHour}:00 - ${endHour}:00`;
// Färg från color_threshold (ApexCharts sparar den i w.globals.colors)
const color = w.globals.colors[seriesIndex] || "#FFFFFF"; // Standardfärg om inget hittas
return `
<div style="
background: #2D2D2D;
padding: 6px 10px;
border-radius: 8px;
color: #FFFFFF;
font-family: Arial, sans-serif;
text-align: center;
min-width: 80px;
">
<div style="font-size: 18px; font-weight: bold; color: ${color};">${price} öre</div>
<div style="font-size: 12px; color: #B0B0B0; margin-top: 2px;">${timeRange}</div>
</div>
`;
}
header:
show: true
title: Elpris
show_states: true
colorize_states: true
standard_format: false
graph_span: 24h
now:
show: true
color: 9E9E9E
span:
start: day
#offset: +48h
series:
- entity: sensor.tibber_combined_prices
extend_to: false # Stäng av denna
unit: öre/kWh
header_actions:
tap_action:
action: none
show:
in_header: before_now
in_chart: true
name_in_header: false
color_threshold:
- value: -50
color: 1565C0 # Mörkblå (negativa priser – extremt billigt)
- value: 0
color: 4DD0E1 # Ljusblå (gratis eller nära 0)
- value: 10
color: 43A047 # Mjuk grön (väldigt billigt)
- value: 25
color: 4CAF50 # Standardgrön (billigt)
- value: 50
color: 7CB342 # Ljusgrön (fortfarande lågt)
- value: 75
color: FBC02D # Gul (nu börjar det bli lite dyrt)
- value: 100
color: FF9800 # Orange (högre pris, men normalt vid toppar)
- value: 125
color: E65100 # Mörkare orange (dyrt)
- value: 150
color: B71C1C # Röd (mycket dyrt)
- value: 200
color: 880E4F # Mörkröd/lila (extremt dyrt)
- value: 300
color: 6A1B9A # Mörklila (krisnivå)
type: line
curve: stepline
extend_to: false
stroke_width: 2
float_precision: 1
data_generator: |
const noon = new Date()
noon.setHours(0, 0, 0, 0)
const prices = entity.attributes.today;
const data = [];
for(let i = 0; i < prices.length; i++) {
data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
}
return data;
yaxis:
- min: ~0
decimals: 0
- type: conditional
conditions:
- condition: state
entity: input_boolean.klockan1300
state: "on"
card:
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
grid:
show: true
borderColor: '#E0E0E0'
chart:
height: 200px
xaxis:
type: 'datetime'
tooltip:
enabled: false
labels:
datetimeUTC: false # Viktigt för att hantera lokal tid korrekt
tooltip:
enabled: true
followCursor: false
x:
show: false
fixed:
enabled: true
offsetX: -75
offsetY: -25
custom: |
EVAL:(data) => {
const { series, seriesIndex, dataPointIndex, w } = data;
const price = series[seriesIndex][dataPointIndex].toFixed(1);
const timestamp = new Date(w.globals.seriesX[seriesIndex][dataPointIndex]);
// Hämta timintervallet (ex. 07:00 - 08:00)
const startHour = timestamp.getHours().toString().padStart(2, '0');
const endHour = (timestamp.getHours() + 1).toString().padStart(2, '0');
const timeRange = `${startHour}:00 - ${endHour}:00`;
// Färg från color_threshold (ApexCharts sparar den i w.globals.colors)
const color = w.globals.colors[seriesIndex] || "#FFFFFF"; // Standardfärg om inget hittas
return `
<div style="
background: #2D2D2D;
padding: 6px 10px;
border-radius: 8px;
color: #FFFFFF;
font-family: Arial, sans-serif;
text-align: center;
min-width: 80px;
">
<div style="font-size: 18px; font-weight: bold; color: ${color};">${price} öre</div>
<div style="font-size: 12px; color: #B0B0B0; margin-top: 2px;">${timeRange}</div>
</div>
`;
}
header:
show: true
title: Elpris
show_states: true
colorize_states: true
standard_format: false
graph_span: 48h
now:
show: true
color: 9E9E9E
span:
start: day
#offset: +48h
series:
- entity: sensor.tibber_combined_prices
extend_to: false # Stäng av denna
unit: öre/kWh
header_actions:
tap_action:
action: none
show:
in_header: before_now
in_chart: true
name_in_header: false
extremas: true
color_threshold:
- value: -50
color: 1565C0 # Mörkblå (negativa priser – extremt billigt)
- value: 0
color: 4DD0E1 # Ljusblå (gratis eller nära 0)
- value: 10
color: 43A047 # Mjuk grön (väldigt billigt)
- value: 25
color: 4CAF50 # Standardgrön (billigt)
- value: 50
color: 7CB342 # Ljusgrön (fortfarande lågt)
- value: 75
color: FBC02D # Gul (nu börjar det bli lite dyrt)
- value: 100
color: FF9800 # Orange (högre pris, men normalt vid toppar)
- value: 125
color: E65100 # Mörkare orange (dyrt)
- value: 150
color: B71C1C # Röd (mycket dyrt)
- value: 200
color: 880E4F # Mörkröd/lila (extremt dyrt)
- value: 300
color: 6A1B9A # Mörklila (krisnivå)
type: line
curve: stepline
extend_to: false
stroke_width: 2
float_precision: 1
data_generator: |
const noon = new Date()
noon.setHours(0, 0, 0, 0)
const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
const data = [];
for(let i = 0; i < prices.length; i++) {
data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
}
return data;
yaxis:
- min: ~0
decimals: 0
Hello,
Strange behavior here.
I want to compare energy consumption from current vs last week
When I apply a “-7 days” offset on the first serie (dark gray), the datalabels of the second serie (orange) is fully offset.
If I remove the offset of the first serie, everything is ok.
Has someone got an idea ?
Thx
With offset on the serie (current vs last week consumption)
span:
start: isoWeek
series:
- entity: sensor.conso_gaz_jour
unit: kWh
type: column
color: rgb(75, 75, 75)
offset: "-7d"
group_by:
func: max
duration: 24h
show:
datalabels: true
statistics:
type: state
period: day
align: start
- entity: sensor.conso_gaz_jour
unit: kWh
type: column
color: orange
group_by:
func: max
duration: 24h
show:
datalabels: true
With no offset on the first serie
span:
start: isoWeek
series:
- entity: sensor.conso_gaz_jour
unit: kWh
type: column
color: rgb(75, 75, 75)
group_by:
func: max
duration: 24h
show:
datalabels: true
statistics:
type: state
period: day
align: start
- entity: sensor.conso_gaz_jour
unit: kWh
type: column
color: orange
group_by:
func: max
duration: 24h
show:
datalabels: true
The headline value in the chart is not showing a zero after the decimal place, such as “23.0”, it shows “23”. I have set the float_precision: 1. Should I be using a different parameter?
type: custom:apexcharts-card
graph_span: 24h
header:
show: true
title: B3 Temp Today vs B3 Window
show_states: true
span:
start: minute
offset: "-24h"
series:
- entity: sensor.ws_b3_b3_temp
name: B3 Today
type: line
stroke_width: 2
float_precision: 1
group_by:
func: last
duration: 5m
- entity: sensor.ws_white_temp
name: B3 Window
type: line
stroke_width: 2
float_precision: 1
group_by:
func: last
duration: 5m
I had this problem as well… I tried to display the time there but it only showed the hour…
I build a PV storage from a old Nissan Leaf battery. It’s controlled by Dala’s Battery Emulator which controls communication between battery and solar inverter. It connects to HomeAssistant through mqtt for additional control options. When I open MQTT Explorer, I see a topic “spec_data” that holds an array with 96 individual battery cell levels.
In HomeAssistant this data shows up as 96 individual sensors.
Now I would like to plot a simple graph in ApexCharts like this, with X=index# and Y=cell level.
Something like this.
What’s the easiest way to get this done? I was thinking to get the mqtt array and use it as a datagenerator in ApexCharts. Can I have your comment on his?
I’m rather new on this…
Only y-axis / values are not enough, as you need the date(time) (x-axis) for these values and every time they change, I think you are stuck with individual sensors.
Seeing there are 96 it would likely be unreadable to put in one graph so what would be your visualization plan?
There is possibly some trick to show the current (current only) 96 values in one graph but 96 values changing over time…good luck
I’m trying to plot humidity as a function of temperature based on 6 total temperature/humidity points that can be modified by input_number helpers. I’m pretty close based on the below chart, but can’t figure out how to get the x-axis to behave. 64.0, 67.0, and 68.0 are the temperatures for the “Lower Profile” curve, but the temperatures for the “Upper Profile” should be 68.0, 74.0, and 80.0, based on the values of the corresponding entities listed in the “data2” series. Any ideas why this isn’t behaving? It looks like it’s plotting the correct “y-data” for the second series, but using the incorrect “x-data” that is defined by the first series. I’m also not sure why the x-axis is only showing 3 ticks (where are 65.0 and 66.0?). I’ve spent a fair amount of time on google and this thread, but can’t seem to find a solution. Thanks in advance for any insights.
type: custom:apexcharts-card
chart_type: line
apex_config:
xaxis:
type: numeric
tickAmount: dataPoints
tickPlacement: between
min: 0
max: 100
title:
text: Temperature (°F)
yaxis:
type: numeric
title:
text: Humidity (%)
markers:
size: 5
header:
show: true
title: Comfort Profile
show_states: false
colorize_states: true
series:
- entity: input_number.comfort_profile_humidity_lower_min
name: Lower Profile
type: line
yaxis_id: first
data_generator: |
const data1 = [];
data1.push(
{ x: hass.states['input_number.comfort_profile_temperature_lower_min'].state,
y: hass.states['input_number.comfort_profile_humidity_lower_max'].state },
{ x: hass.states['input_number.comfort_profile_temperature_lower_mid'].state,
y: hass.states['input_number.comfort_profile_humidity_lower_mid'].state },
{ x: hass.states['input_number.comfort_profile_temperature_lower_max'].state,
y: hass.states['input_number.comfort_profile_humidity_lower_min'].state }
);
return data1;
- entity: input_number.comfort_profile_humidity_upper_min
name: Upper Profile
type: line
yaxis_id: first
data_generator: |
const data2 = [];
data2.push(
{ x: hass.states['input_number.comfort_profile_temperature_upper_min'].state,
y: hass.states['input_number.comfort_profile_humidity_upper_max'].state },
{ x: hass.states['input_number.comfort_profile_temperature_upper_mid'].state,
y: hass.states['input_number.comfort_profile_humidity_upper_mid'].state },
{ x: hass.states['input_number.comfort_profile_temperature_upper_max'].state,
y: hass.states['input_number.comfort_profile_humidity_upper_min'].state }
);
return data2;
EDIT/UPDATE: Adding “fill_raw: last” to the series section seems to have fixed this. Apparently gaps in the data can mess with the scale and cause issues with color thresholds. I didn’t see any noticeable gaps in my sensor source data, but maybe there was still some kind of issue.
Anyone have any idea why this is happening with my line colors? Seems like randomly sometimes it will color parts of the line at a lower threshold. There aren’t any peculiarities in the raw sensor data that I can see.
- type: custom:apexcharts-card
graph_span: 7d12h
span:
end: hour
header:
show: true
title: Weekly Temperature
show_states: false
colorize_states: true
series:
- entity: sensor.ecowitt_wh90_outdoor_temperature
float_precision: 2
color_threshold:
- value: 32
color: white
- value: 33
color: violet
- value: 35
color: blue
- value: 50
color: green
- value: 65
color: yellow
- value: 80
color: orange
- value: 90
color: red
stroke_width: 3
curve: smooth
type: line
experimental:
color_threshold: true
view_layout:
grid-area: graph
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-top: -15px;
margin-bottom: 0px;
}
No idea. Maybe try hex codes?
hi,
what about (last two lines):
yaxis:
- show: true
opposite: false
decimals: 2
min: "|-50|"
max: "|+50|"
Good luck !
hi everybody out there,
i have a problem and no solution for that. Crossreadings didn’t help either.
Here is my chart:
Two problems:
The values (Aktuell, Max, Min) only display two decimals, if the real fetched value has two decimals, too.
If the real fetched value has no second decimal-digit, then there will not displayed a appended Zero as second decimal-digit.
In the yaml i did (float_precision: 2):
type: custom:apexcharts-card
series:
- entity: sensor.goldpreis_yaml
name: AKTUELL
type: area
curve: straight
stroke_width: 1
color: gold
opacity: 0.2
show:
hidden_by_default: false
legend_value: false
in_header: true
in_chart: true
float_precision: 2
fill_raw: last
group_by:
func: last
- entity: sensor.goldpreis_yaml
name: MAX
fill_raw: last
group_by:
func: max
duration: 7d
color: lightgreen
show:
hidden_by_default: false
legend_value: false
in_header: true
in_chart: false
float_precision: 2
- entity: sensor.goldpreis_yaml
name: MIN
fill_raw: last
group_by:
func: min
duration: 7d
color: tomato
show:
hidden_by_default: false
legend_value: false
in_header: true
in_chart: false
float_precision: 2
But that does not work. No appended 0 digit.
Second problem:
sometimes i get a Zero-value of the fetched gold-price.
To not display this Zero-value in the graph i found this solution (only affected codelines):
fill_raw: last
group_by:
func: last
That works ‘so la la’, because sometimes the Zero-Value is shown in the graph, so the y-axis becomes an update and then the graph seems to be flat, because of the span of the y-labels (before: a span about 120€, after: a span about 1800€, which causes, that the graph seems to be flat).
But the most important issue i was not able to solve is:
how can i exclude the zero-values from the min-value ?
I have a graph-span of about 4 days, an the zero-min-value will displayed for that time. That’s annoying.
Any tipps or solutions for not to display this value ?
Many thanks in advance !
So long
Pc
I would like to display the past 7 days + today energy consumption chart.
I could do it with at least 2 options:
- With utility helper that resets itself daily, and display the max value of the sensor. This sensor is based on the Shelly total energy value, an entity called
sensor.shelly_home_total_energy - Or display total energy directly, and use the
diffgroup
But I am noticing the different result and I don’t know why. When I plot both options (plot max of utility sensor or diff of actual sensor) on the same chart, the values are not the same:
type: custom:apexcharts-card
graph_span: 7d
header:
show: true
title: Daily energy consumption
show_states: true
colorize_states: true
apex_config:
chart:
height: 350px
series:
- entity: sensor.shelly_home_total_energy
type: column
group_by:
func: diff
duration: 1d
- entity: sensor.utility_meter_1d
type: column
group_by:
func: max
duration: 1d
- Utility meter (orange) is correct and is the same value as on the reference chart (see below)
- The
difffunction of the total is higher for last2entries and I don’t know why.
Reference
For reference, if I take the statistics chart, it definitely looks correct:
chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.shelly_home_total_energy
stat_types:
- change
min_y_axis: 0
days_to_show: 7
grid_options:
columns: 24
rows: auto
title: Daily energy consumption
Generates, which ic correct (4.5kWh for March 22nd)
History chart (max) looks the same as on displayed values:
Not sure if this has the aimed effect, add this to your series
transform: if (x == 0) {return null} else {return x};
1 Like
@vingerha :
great, does work, BUT for your information:
i had to place it to the min-entity, not to the series:
code (affected lines):
- entity: sensor.goldpreis_yaml
name: MIN
fill_raw: last
group_by:
func: min
duration: 7d
color: tomato
transform: if (x == 0) {return null} else {return x};
show:
hidden_by_default: false
legend_value: false
in_header: true
in_chart: false
float_precision: 2
many thanks. 1 of 2 is ok right now…
So long
Pc
That is ‘your series’…anyhow…it worked
Issue has been solved. It is a matter of adding a span to start from day, show the 8 days with -7d offset (show past 7 days and today).
New YAML:
type: custom:apexcharts-card
# Part added or modified
graph_span: 8d
span:
start: day
offset: "-7d"
header:
show: true
title: Daily energy consumption
show_states: true
colorize_states: true
apex_config:
chart:
height: 350px
series:
- entity: sensor.shelly_home_total_energy
type: column
group_by:
func: diff
duration: 1d
color: rgb(0, 0, 255)
opacity: 0.6
- entity: sensor.utility_meter_1d
type: column
group_by:
func: max
duration: 1d
color: rgb(255, 127, 0)
opacity: 0.6
Et voila:
2 Likes