Provide details (properly formatted) so people can help and not guess
Of course, sorry!
type: custom:apexcharts-card
graph_span: 40d
span:
start: year
offset: +318d
now:
show: true
label: Heute
header:
show: true
title: Gewichtsentwicklung
colorize_states: false
show:
last_updated: true
series:
- entity: sensor.gewichtsentwicklung
type: column
show:
datalabels: true
unit: g
data_generator: |
return entity.attributes.results.map((entry) => {
if (entry.child == 2) {
return [new Date(entry.date), entry.weight];
} else {
return [null, null];
}
});
So, as you see, I now start from the beginning of this year, with an offset to reach a specific date. I have a graph_span of 40 days, so the graph isn’t too empty, which I would get with a higher span. So at the moment I would have to increase the span value ever so often, and when a new year starts I would have to change the offset.
So my question is: Is it possible to start on a specific date and show all values up until today?
[
{
"id": 30,
"child": 2,
"weight": 4337,
"date": "2024-12-18",
"notes": "",
"tags": []
},
{
"id": 29,
"child": 2,
"weight": 4465,
"date": "2024-12-13",
"notes": "",
"tags": []
},
{
"id": 28,
"child": 2,
"weight": 4555,
"date": "2024-12-09",
"notes": "",
"tags": []
}
]
I’ve shortened the raw data a bit.
hello, I have a problem that the variable that I assign to yaxis first does not react to the assignment and still remains dependent on yaxis second. below is a fragment of the code that I am talking about, maybe someone will notice the error and tell me what is wrong. additionally, the question is whether it is possible to somehow use as_duration to display the variable on the chart, e.g. transformed from 192 minutes to 3h 12 min?
apex_config:
chart:
height: 350px
legend:
show: false
position: top
horizontalAlign: center
fontSize: 16
markers:
size: 0
labels:
useSeriesColors: true
yaxis:
- id: first
max: 25
min: 0
decimals: 0
apex_config:
tickAmount: 4
labels:
style:
fontSize: 16
- id: second
max: 100
min: 0
decimals: 0
opposite: true
apex_config:
tickAmount: 4
labels:
style:
fontSize: 16
xaxis:
labels:
style:
fontSize: 16
- entity: sensor.obciazenie_pompy_daikin
yaxis_id: second
type: line
name: Obciążenie
group_by:
func: max
duration: 1d
stroke_width: 6
show:
datalabels: true
For the offset you can use card template, e.g. find the last date in the data and calc. days between that and the beginning of that year.
For the date, not sure how the date would be determined, you could either use card template or tweaking the java-script
In this long/huge post there are a few examples on using the below.
iantrich/config-template-card: 
Templatable Lovelace Configurations
Wrong indent, look carefully at the doc(s)
Team,
After trying to fix my chart challenges I have to pick your brains 
GOAL: have the chart below
- show nice yaxis values (0, 50, 100, 150, 200)
- show hour “0” instead of “22 dec”
- show the exact same y-axis on both sides (to make the right bars easier to read)
Code:
type: custom:apexcharts-card
header:
show: true
title: Room Power usage
show_states: true
colorize_states: true
graph_span: 24h
span:
start: hour
offset: "-23h"
apex_config:
xaxis:
type: datetime
labels:
datetimeFormatter:
hour: H
yaxis:
forceNiceScale: true
series:
- entity: sensor.shellyplug_4_power
type: column
name: " "
group_by:
func: avg
duration: 1h
yaxis:
- min: 0
decimals: 0
align_to: 0.25
apex_config:
tickAmount: 5
Any ideas?
Do you mean, yaxis out of apex_config?
yaxis:
- id: first
max: 25
min: 0
decimals: 0
apex_config:
tickAmount: 4
labels:
style:
fontSize: 16
- id: second
max: 100
min: 0
decimals: 0
opposite: true
apex_config:
tickAmount: 4
labels:
style:
fontSize: 16
apex_config:
chart:
height: 350px
legend:
show: false
position: top
horizontalAlign: center
fontSize: 16
markers:
size: 0
labels:
useSeriesColors: true
xaxis:
labels:
style:
fontSize: 16
When im trying like this, result:
/// apexcharts-card version 2.1.2 /// value.yaxis[0] is not a ChartCardYAxisExternal; value.yaxis[0].labels is extraneous
No clue as you paste part of the card, check many (!) examples above
I have read many cases, used AI and nothing helps, that’s why I turn to the forum. Before I wrote, I was working on it for a week and I can’t find any solution.
Below full code.
type: custom:apexcharts-card
graph_span: 5d
header:
standard_format: true
show: true
title: Daikin Altherma 3
show_states: true
colorize_states: true
span:
end: day
series:
- entity: counter.compressor_on_time
transform: return (x / 60).toFixed(2)
yaxis_id: first
type: column
name: Czas pracy
group_by:
func: max
duration: 1d
show:
datalabels: true
as_duration: hour
- entity: counter.compressor_on
yaxis_id: first
type: column
name: Ilość włączeń
group_by:
func: max
duration: 1d
show:
datalabels: true
- entity: counter.defrost_operation_count
yaxis_id: first
type: line
name: Defrost
group_by:
func: max
duration: 1d
stroke_width: 6
show:
datalabels: true
- entity: sensor.obciazenie_pompy_daikin
yaxis_id: second
type: line
name: Obciążenie
group_by:
func: max
duration: 1d
stroke_width: 6
show:
datalabels: true
apex_config:
chart:
height: 350px
legend:
show: false
position: top
horizontalAlign: center
fontSize: 16
markers:
size: 0
labels:
useSeriesColors: true
xaxis:
labels:
style:
fontSize: 16
yaxis:
- id: first
max: 25
min: 0
decimals: 0
apex_config:
tickAmount: 4
labels:
style:
fontSize: 16
- id: second
max: 100
min: 0
decimals: 0
opposite: true
apex_config:
tickAmount: 4
labels:
style:
fontSize: 16
#Edit:
Okay i found issue.
labels:
style:
fontSize: 16
It cant be in yaxis without apex_config…
Thanks for all 
Proper code:
yaxis:
- id: second
max: 100
min: 0
decimals: 0
opposite: true
apex_config:
tickAmount: 4
labels:
style:
fontSize: 16
- id: first
max: 25
min: 0
decimals: 0
apex_config:
tickAmount: 4
labels:
style:
fontSize: 16
1 Like
Servus,
I am trying to do a history of my daily PV generation. The Data already looks good and are the same as in the sungrow app.
The Picture for the realtime current day (left ) , and for the “last/offset -x Days” . (right )
But i have some problems/quirks with the chart for the history .
- Why does the ToolTip show the current Date and not the offset -1d in this case
- Would it be possible to show a Current Date -offset in the Header
- I want to remove the “-1d” in all the Legends.
I would need some hints on this .
type: custom:apexcharts-card
header:
show: true
title: PV Statistik
show_states: true
colorize_states: true
update_interval: 5m
span:
start: day
graph_span: 24h
show:
loading: false
apex_config:
tooltip:
enabled: true
enabledOnSeries: undefinded
shared: Boolean
chart:
height: 250px
grid:
show: true
strokeDashArray: 0
borderColor: "#444444"
position: back
xaxis:
lines:
show: true
yaxis:
lines:
show: true
yaxis:
forceNiceScale: true
xaxis:
tooltip:
enabled: false
type: datetime
axisTicks:
show: true
tickAmount: 6
labels:
format: HH:mm
lines:
show: true
fill:
type: gradient
gradient:
type: vertical
shade: dark
stops:
- 0
- 90
opacityFrom:
- 1
- 0.2
opacityTo:
- 0.2
- 1
series:
- entity: sensor.daily_battery_charge_from_pv
color: blue
name: Batterie Aufladung
invert: false
extend_to: now
group_by:
func: last
duration: 24h
fill: last
offset: "-1d"
show:
in_chart: false
- entity: sensor.daily_consumed_energy
color: red
name: Verbraucht
invert: false
extend_to: now
group_by:
func: last
duration: 24h
fill: last
offset: "-1d"
show:
in_chart: false
- entity: sensor.daily_pv_generation
color: green
name: PV Ertrag
invert: false
extend_to: now
group_by:
func: last
duration: 24h
fill: last
offset: "-1d"
show:
in_chart: false
- entity: sensor.battery_charging_power
color: green
name: Batterie Laden
invert: false
extend_to: now
group_by:
func: last
duration: 10m
fill: last
offset: "-1d"
show:
in_header: false
- entity: sensor.total_dc_power
color: orange
name: PV Ertrag
invert: false
extend_to: now
group_by:
func: last
duration: 10m
fill: last
offset: "-1d"
show:
in_header: false
- entity: sensor.battery_discharging_power
color: red
name: Batterie Entladen
invert: true
extend_to: now
group_by:
func: last
duration: 10m
fill: last
offset: "-1d"
show:
in_header: false
all_series_config:
stroke_width: 1
type: area
Hi,
I have much better result not mixing column and line, and use show: Datalabel: total in one of the series . This gives me a total on the chart by day. Also the filter works as expected then.
type: custom:apexcharts-card
stacked: true
header:
show: true
title: " "
show_states: true
colorize_states: true
apex_config:
chart:
height: 350
zoom:
type: x
enabled: true
autoScaleYaxis: false
toolbar:
show: true
autoSelected: zoom
xaxis:
tooltip:
enabled: false
xaxis.type: datetime
series:
- entity: sensor.daily_battery_discharge
name: Batterieverbrauch
type: column
group_by:
func: max
duration: 23.9h
color: green
- entity: sensor.daily_imported_energy
name: Netzverbrauch
type: column
group_by:
func: max
duration: 23.9h
color: red
- entity: sensor.daily_direct_energy_consumption
name: Solarverbrauch
color: orange
type: column
group_by:
func: max
duration: 23.9h
show:
datalabels: total
graph_span: 8d
span:
end: day
Thx for spending time .
Best regards, Dietmar
1 Like
For sure,
cause these tiny tweaks do not make them powerfull by function but by athetics.
I had thought it would be just another of your 3 lines and so easy it could be, but I guess I can understand what you mean that this becomes more and more a mixture of multiple tweaks.
But the idea to have a dedicated layout tweaking seems to be quite good cause the more focussed such topic is by title the more people it will attrack and then also some who we have not heard of which are using these for business cases and have developed different ways of tweaking.
Might be hard to draw a line in the beginning of the separation, but it would help all of us, those who search and read to learn and those also contributing with workarounds.
I have abused the “unit” as seen here “39 %” and replaced that by the real title for example by adding protected spaces for a certain separation before the title would be used like an extension of the unit
unit = “%__Humidity (-365d)”
That worked great and I got the size right, but another day tweaking on the tooltip functions I realised the negative impact I could not fix on my own:
When hovering along a graph line over a full day (other sensors are turned off) then I can see the proper valu and date & time in that fixed upper right corner except that I now would not get the usual "39% " but my special edition aka “39% Humidity 1 year ago”
I have recreated one of the issues here which shows the consequences
Look at the red 0.86 kWh in the previous hour.
You can see the red dot on the Y axis and on the upper right chart area the issue.
By abusing the unit as a unit and sensor title at once it cause a complete nonsense in the tooltip cause that is using the genuine title or name of the sensor and my unit abusage too.
Looked so nice, I have implemented a lot on all apex chart till I started to redo the tool tip cause I wanted that hh:mm style and then the date plus in the next line the tooltip sensor and data of cause.
When I got fixed it I was happy cause I had fixed that with a different chart where I had not abused the unit. But therefore I could not see any issues yet till I arrived here in the big graphs where I had to realize that it will not work this way.
But still I like the tinkering and therefore take the benefits with me. Still worth to think about and how else I could try or which search item I would need to get close to others possible solution.
Thanks for trying and explaing it to me.
Hello,
here is my consumption chart and I had hoped to get proper columns .
It has been an area with stepline before but now after using column those columns are so small, but why ?
I did not find out.
Any ideas?
Code below
type: custom:apexcharts-card
experimental:
color_threshold: true
brush: true
graph_span: 10d
span:
end: day
brush:
selection_span: 6 h
apex_config: null
all_series_config:
show:
name_in_header: true
legend_value: false
header:
show: true
title: ""
show_states: true
colorize_states: true
apex_config:
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
legend:
show: true
position: bottom
horizontalAlign: center
floating: false
fontSize: 14px
grid:
show: true
borderColor: black
position: front
chart:
height: 224px
tooltip:
enabled: true
followCursor: false
x:
show: false
fixed:
enabled: false
yaxis:
- id: first
min: 0
max: 7
decimals: 0
apex_config:
tickAmount: 7
labels:
style:
colors: black
fontSize: 14px
fontWeight: normal
title:
text: ""
style:
colors: black
fontSize: 16px
fontWeight: normal
- id: second
opposite: true
min: 0
max: 14
decimals: 0
apex_config:
tickAmount: 7
labels:
style:
colors: black
fontSize: 14px
fontWeight: normal
title:
text: ""
style:
colors: black
fontSize: 16px
fontWeight: normal
series:
- entity: sensor.olverbrauch_today
name: " TAGESVERBRAUCH"
unit: " L TAGESVERBRAUCH"
type: column
yaxis_id: first
color: dark grey
group_by:
func: max
duration: 23.9h
show:
datalabels: total
name_in_header: false
in_header: true
in_legend: true
legend_value: false
in_brush: false
in_chart: true
- entity: sensor.gewachshaus_degc_filter
name: " AUßENTEMP. GEWÄCHSHAUS"
unit: " °C GEWÄCHSHAUS"
yaxis_id: second
color: blue
stroke_width: 2
curve: straight
float_precision: 0
show:
name_in_header: false
in_header: true
in_legend: true
legend_value: false
in_brush: false
in_chart: true
Hey @silentnomad could you check why your approach doesn’t show the short bursts of heat like my old version does?
Old:
- entity: sensor.graph_heating
name: Heating
color: red
opacity: 0.2
stroke_width: 0
curve: stepline
group_by:
func: raw
New:
- entity: binary_sensor.wiser_hub_heating
yaxis_id: heating
name: Heating
opacity: 0.2
transform: "return x === \"on\" ? 100 : 0;"
type: area
color: orangered
stroke_width: 0
curve: stepline
show:
extremas: false
in_header: false
name_in_header: false
legend_value: false
Hi. I don’t see any obvious reasons in the YAML. My original screenshot shows those short-bursts of heating using the same code so I’m at a loss to explain why you’re not seeing them.
Here it is again but I’ve stripped it back:
type: custom:apexcharts-card
graph_span: 3d
show:
last_updated: true
apex_config:
xaxis:
labels:
style:
colors: grey
fontSize: 15px
legend:
show: true
grid:
borderColor: black
strokeDashArray: 0
yaxis:
lines:
show: true
header:
standard_format: true
show: true
title: Central Heating
show_states: true
colorize_states: true
yaxis:
- id: heating
show: false
opposite: true
max: 100
min: 0
series:
- entity: binary_sensor.central_heating
yaxis_id: heating
name: Heating
opacity: 0.2
transform: "return x === \"on\" ? 100 : 0;"
type: area
color: orangered
stroke_width: 0
curve: stepline
show:
extremas: false
in_header: false
name_in_header: false
legend_value: false
**NICE COMPACT & FEATURE RICH HEADER : 7°C GREENHOUSE **
#1
The issue is that the sensors name option will show the title below the value in a far too small fontsize.
Solution: Reuse or abuse the unit of measurement Option by adding the titles name
It would look like this , but there is a catch
#2
I have to deal with a lot of elderly and while I am also getting older like we all do the readyability has become a serious topic and hovering is a great solution for those who are struggling. So this was a solution with an ugly side when you started hovering along a graph.
You might not get it in the very first second, what is happening, so here is an explanation.
The usual hovering would show “sensors name:” and in BOLD “value unit”
btw. sometimes it can be usefull to put a bit bigger space between Value and unit where I would format the unit this way with 2 protected spaces as separator for readability reasons
“__° C”
But in the example it says outside temperature: -7°C GREENHOUSE
and this bold “GEWÄCHSHAUS” is disturbing and looks and feels wrong
#3
So I have lookd for a workaround which will give you all you need, the best of both worlds: a nice well readible compact headline with all sensors and a nice fontsize
But how has that been achieved ?
Easy, not complicated once you get the idea behind. The more sensors you have the more you might not like it, but let me explain.
If I abuse the greenhouse sensor unit for “°C GREENHOUSE” this unit abouse will be used everywhere in such graphic, even there where you do not want it .
But what if you would be able to separate these 2 use cases then you would have a unit for the nice headline incl. coloured values too and another “pure unit” with “°C” required for the hoovering.
Of cause ( even though I can not judge that, but I assume it) you can not do it this way, but in general quite simliar this way:
#1.1 You have added the first and pure greenhouse sensor with proper title and unit
#1.2 Now hide the proper pure greenhouse sensor for the in_header
- entity: sensor.gewachshaus_degc_filter
name: " AUßENTEMP. GEWÄCHSHAUS"
unit: " °C"
show:
name_in_header: false
in_header: false
in_legend: true
legend_value: false
in_brush: false
in_chart: true
You will get the result you are used to if you hover along the blue line of the sensor.
Everything is fine except it would be so much nicer to see Greenhouse Temperatue in the header we are hiding now.
#2 now add that sensor a second time and hide it except for “in_header” cause thise sensors unit will be used to show its unit in the header.
That is the only purpose.
But be aware in_header is the key point.
- entity: sensor.gewachshaus_degc_filter
unit: " °C GEWÄCHSHAUS"
yaxis_id: second
color: blue
float_precision: 0
show:
name_in_header: false
in_header: true
in_legend: false
legend_value: false
in_brush: false
in_chart: false
This is a stripped version, so do not remove color or float precision cause it will effect you header .
without floatprecision you might end up with 3,71 °C in the header you will not really like.
SUMMARY of pro and cons:
adds a bit of work and prolongs the dashboard code lines by 40% or so cause for every sensor to be displayed in the header you would need to add a copy which is not used to chart a line or so, only to be displayed in the header.
there fore this sensor does not have a huge impact on the performance afaik . Experience is good: best of both worlds cause I was not able to get a similiar space efficient solution.
I believe it is a bug and/or something hard to resolve. Likely (guessing loudly) because the data-points mismatch
If you set the grouping as well for the line then it should/could work.
1 Like
I updated to the current version of HA (docker image), and downloaded the newest apexcharts code.
Now the problem I encounter is that, as soon as I use templates, on the web page “t is null” is displayed:
Without the template, the data is correctly shown.
Unfortunately, I cannot figure out what the reason is. Here is my yaml file (abbreviated):
apexcharts_card_templates:
default:
graph_span: 2d
span:
start: day
offset: -1d
now:
show: true
title: Thermostate
views:
- title: Keller
type: panel
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
config_templates: default
header:
title: Keller
series:
- entity: sensor.max_keller_temperature
name: Ist
Hi,
I have succeeded in implementing a buttons to “scroll” in history for my PV.
Used an counter to update the offset value in the used entities .
This all works until the retention is over. ( currently 10 days default ) .
So i thought i need to implement the “statistics” in the entity query. But this seems not to work …
I have compared the output of the raw data chart ( group by only ) with the one with additional statistics - the later is already “leveled” on the graph. So it is used.
Still if i go the the last -10 offset Day where the retention ends i have no Data . And -11 does only load with no data …
So is there something wrong, or does the offset part only works with raw data ?
The left chart is for simplication , one entity with offset -10 in that case . No data from 00:00 to about 06:00 ( again -11 offset does not load at all )
This is the entity part:
series:
- entity: sensor.battery_charging_power
color: green
name: Batterie Aufladen
invert: false
group_by:
func: last
duration: 5m
fill: last
statistics:
type: max
period: 5minute
align: start
extend_to: now
offset: ${'-' + states['counter.dail_offset_value'].state +'d'}
type: area
opacity: 0.6
stroke_width: 2
show:
in_header: false
offset_in_name: false
Any help would be great on this.
Best regards, Dietmar
2 Likes