Statistics are hourly, try and remove all the stuff that tries to get shorter timespans…i.e. no group by and you can probably leave type: max (or state)
1 Like
Merry Christmas.
Have you figured out how to make the card respect the new section’s view? I mean, it doesn’t expand horizontally as I would expect.
Found the issue. I had
all_series_config:
show:
in_header: false
stroke_width: 2
type: area
fill_raw: last
opacity: 0
extend_to: now
group_by:
func: avg
duration: 30min
And the group_by was affecting that series too. I had to override it to raw in the series.
thanks for your reply cause I had given up more or less and went ahead by using AREA instead of column. You can see the results in my latest examples.
But your comment encouraged me to try it again and have another look.
So I tried the usual stuff by removing complexity.
This one looks a lot nicer and has been achieved by deleting the second temperature sensor. Nothing else cause I have copied the code from above.
What still make me wonder ist the question which parameter is needed to start on the left at midnight and not at 21 or so .
I guess it is an option part of the span: I had seen before and can not remember properly.
graph_span: 10d
span:
end: day
RIght now I had gone on with type area and curve stepline to get this result, but here the labels are causing a new problem
apex_config:
dataLabels:
offsetY: -5
offsetX: 10
background:
enabled: true
borderColor: black
borderWidth: 2
borderRadius: 0
opacity: 0.8
foreColor: white
dropShadow:
enabled: false
*But how can I apply different Fontsize and colour to the labels ?
Finally I got a small success as seen here in comparison
For the upper one I have deleted the 2nd Sensor, the temp.
But for the lower one I simply added the same grouping lines
group_by:
func: max
duration: 1d
and voila the width looks good.
But the labels for daily consumption = Tagesverbrauch are now based on the right scale and not on the left one which is the kWh scale.
So the only way out is area with stepline to get 2 proper sensors into that chart.
If is a mix of chartypes then the narrow columns will appear
I have written a quite long explanation due to a lot of details missing, but look at your code and do a search for every key word you might be unfamiliar or so.
When you will do that for stacked: true
then you will learn that there is a fault for months already regarding all or most stacked charts. There is an open issue or at least has been in November.
AND 1 SMALL SUCCES in this pic. above you can see a very tiny time with a 5,6 L value on the left which is a value from shortly before midnight cause at midnight 5,6 L consumption per day would be reseted to 0 .
This is caused by my timespan of 23.9h
Not sure why I had needed that but here you can see the difference with 24h
UPDATE:
I had no luck to change the background of the values, this grey. I was able to change the font color to white and I also found a workaround for replacing the grey background with black by adding a 10px frame around it instead of just 1. But then there is in the middle of each label still a white spot.
So here is my most recent solution
on the top I had chosen opacity of 0 and black as font color.
I was also able to adjust the size.
On the bottom quite similiar but this time a whicht on the column. Offset is doing the magic to bring the label into the column.
EXAMPLE ON THE TOP
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:
dataLabels:
style:
fontSize: 16px
fontWeight: bold
color: white
offsetY: -4
offsetX: 9
background:
enabled: true
borderColor: black
padding: 4
borderWidth: 2
borderRadius: 0
opacity: 0
foreColor: black
dropShadow:
enabled: false
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
tooltip:
enabled: false
legend:
show: true
position: bottom
horizontalAlign: center
floating: false
fontSize: 15px
grid:
show: true
borderColor: black
position: front
chart:
height: 224px
tooltip:
enabled: true
followCursor: false
shared: true
x:
show: true
format: HH:mm - ddd. dd. MMM.
fixed:
enabled: true
position: UpperRight
style:
colors: black
fontSize: 16px
fontWeight: normal
card_mod:
style: |
:host {
margin: 8px 8px 8px 8px;
font-size: 18px;
colors: blue;
}
yaxis:
- id: first
min: 0
max: 7
decimals: 0
apex_config:
tickAmount: 7
labels:
style:
colors: black
fontSize: 15px
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: 15px
fontWeight: normal
title:
text: ""
style:
colors: black
fontSize: 16px
fontWeight: normal
series:
- entity: sensor.olverbrauch_today
name: " TAGESVERBRAUCH"
unit: " L"
type: area
yaxis_id: first
color: grey
stroke_width: 4
curve: stepline
float_precision: 1
group_by:
func: max
duration: 24h
show:
datalabels: true
name_in_header: false
in_header: false
in_legend: true
legend_value: false
in_brush: false
in_chart: true
- entity: sensor.olverbrauch_today
name: " TAGESVERBRAUCH"
unit: " L TAGESVERBRAUCH"
type: area
yaxis_id: first
color: grey
stroke_width: 4
curve: stepline
float_precision: 1
group_by:
func: max
duration: 24h
show:
datalabels: false
name_in_header: false
in_header: true
in_legend: true
legend_value: false
in_brush: false
in_chart: false
- entity: sensor.gewachshaus_degc_filter
name: " AUßENTEMP. GEWÄCHSHAUS"
unit: " °C "
yaxis_id: second
color: blue
stroke_width: 2
curve: straight
float_precision: 0
show:
name_in_header: false
in_header: false
in_legend: true
legend_value: false
in_brush: false
in_chart: true
- 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
and EXAMPLE FROM THE BOTTOM
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:
dataLabels:
style:
fontSize: 16px
fontWeight: bold
offsetY: 2
offsetX: 0
background:
enabled: true
borderColor: red
borderWidth: 2
borderRadius: 0
opacity: 0
foreColor: white
dropShadow:
enabled: false
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
tooltip:
enabled: false
legend:
show: true
position: bottom
horizontalAlign: center
floating: false
fontSize: 15px
grid:
show: true
borderColor: black
position: front
chart:
height: 224px
tooltip:
enabled: true
followCursor: false
shared: true
x:
show: true
format: HH:mm - ddd. dd. MMM.
fixed:
enabled: true
position: UpperRight
style:
colors: black
fontSize: 16px
fontWeight: normal
card_mod:
style: |
:host {
margin: 8px 8px 8px 8px;
font-size: 18px;
font-weight: bold;
font-color: yellow
}
yaxis:
- id: first
min: 0
max: 7
decimals: 0
apex_config:
tickAmount: 7
labels:
style:
colors: black
fontSize: 15px
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: 15px
fontWeight: normal
title:
text: ""
style:
colors: black
fontSize: 16px
fontWeight: normal
series:
- entity: sensor.olverbrauch_today
name: " TAGESVERBRAUCH"
unit: " L"
type: column
yaxis_id: first
float_precision: 2
color: dark grey
group_by:
func: max
duration: 1d
show:
datalabels: true
name_in_header: true
in_header: false
in_legend: false
legend_value: false
in_brush: false
in_chart: true
- entity: sensor.olverbrauch_today
name: " TAGESVERBRAUCH"
unit: " L TAGESVERBRAUCH"
type: column
yaxis_id: second
color: dark grey
group_by:
func: max
duration: 1d
show:
datalabels: false
name_in_header: false
in_header: true
in_legend: true
legend_value: false
in_brush: false
in_chart: false
Merry Christmas! Any way I can access my HA logbook with ApexCharts? My goal is to plot certain events (button presses) from logbook timestamps as big dots on the chart next to temperature line. I can do so already on the button, reading the State with data_generator, but this gives me the last button press only.
Maybe there is a way to access logbook?
Hello Tarmo,
Merry Christmas to you too.
I do not know if you can get the data from the logbook.
As far as I understand you need a history of each sensor.
Here is an example how I get the “on” / “off” binary sensor into a Stepline Spline. I used a similar one for my Door / Window sensors in the Screenshot above.
- entity: switch.shelly_plug_2_dryer
transform: 'return x === ''on'' ? 100 : 0;'
yaxis_id: second
type: area
curve: stepline
name: Dryer
color: '#00E396'
stroke_width: 0
opacity: 0.25
extend_to: false
show:
name_in_header: false
in_header: false
legend_value: false
extremas: false
Thank you! Maybe to approach it from different angle - this is the “sensor history” I have (it’s a button that’s state is “last pressed”). In History tab:
What I would like is to plot an “X” (or as you very nicely show with transform - a binary peak) on the moment the datetime value changed for the entity. I have this option likely from the value itself OR from the history. Really not sure how can I detect “new value is different from old, let’s put a X here”.
If you can add something then you should be able to find it here
But that is the full genuine apex chart solution, not everything will be working.
In this datalabel section is an example for Custom DataLabels
“You can use the formatter of dataLabels and modify the resulting label. The below example shows how you can display xaxis categories/labels as dataLabels in a horizontal bar chart.”
And that might bring you quite close to what you want.
Thanks for pointing me in the right direction Typxxi Wolf.
I tried the Styles but looks like they have no effect on the lables.
Maybe you are right that this is not implemented in the ApexChart Card for Homeassistant yet.
Also tried the formatter with a simple text but it did not show up or change the lable.
You might look again on your own on the apex chart site if there are more and other examples cause sometimes a second solution was offered somewhere in the documentation and that did work out.
This one was the first that came to my mind cause I knew that it was capable of replacing things and there was another which allowed a resorting of countries by population, size, gdp and what not which I could not find again.
Right now I am looking to improve the label size whith no luck, I also tried to change the background colour which did not work out till i went the unusual way and lowered the label opacity (the whole form and its border) till it becomes invisible. That way I got at least the full control of the contrast which meant white text on full black column.
Still unable to resize the shapes of the maxima and minima labels at least for now.
But at least my oil consumption has become quite accurate which means a deviation of 20 liter per year based on my method where I use the electricity as the keydriver, in particular I measure the time the heater draws more than 100W cause then the oil is burned.
And from the 20 years plus I know the working hours of the oil condensed heating and its consumption too, so I get a key figure which has been constant over 20 years: 2,21 L per hour
If the energymeter in HA counts the time the heater draws above 100W then I can mulitiply that by 2,21 L and get todays consumption of oil. And we also can count the time the wood oven pump is supporting the heating which is measured by time x watts … just as an indicator of how much weg out of the cubic meter woord.
Next year it will be time for the heatpump.
In the graph headline is the big misconception as you declare there an hourly energy delivered which by default requires kWh
Energy is what you pay for an that is Wh or kWh based on power x time
But you display a 4,2 kW which could be the current power consumption of this second or minute or so but after counting that for draw for every second of the last hour in Watt x 1/3600 h and adding up all those theoretical 3600 measurements you get the consumption of the very last hour in kWh which you might wanna show next to the price for each kWh in that same hour.
I did the same with a different method using lines.
You should use your energy consumption counter and create an hourly reseted counter to get the amount of enery used in the previous hour.
Here you can see the past few hours and the consumption of each hour.
Those are our last charts cause we abandoned tibber which has become crap and completely uncompetitive by hidden fees . We barely made a profit over a year ago and since the last time they had increased prices and fees we made big losses compared to fixed prices valid for 1 year at least.
Now the king is Octopus Intelligent Go which brings us each and every day a price of 18,7 Cent for 365 days which is even cheaper than the cheapest tibber hour in 2024 (incl. all fees).
And that means we can charge batteries for cheap and use those in long winter times during night to avoid the usual 32 Cent octopus price from 5 am to 00 while the cheap of peak hours are vom 0 to 5 am.
Fixed price contracts for 1 year start about 32 cents right now.
Octopus offers a 2 year contract with these fixed prices.
We had paid - beyond what our 20 kWp solar power array delivered - tibber 600 kWh in Nov and Dec each. Price was over 33 Cent per kWh in Octo and Nov., december a bit cheaper, just a bit, not that much.
1 Like
Here is the major part I had found again.
Not documented in apexChart for HA but it works in close to all cases
I have played around with these a lot.
If you read the syntax it is straight forward once you know where such topic belongs to inside the configuration. Usually there is a hint at the end of the side but not in this case.
I have used it here due to some descriptions I had read before
I also started to use the full set all the time and then deactivate what I do not need.
It is much, much more effort to add line by line you might later really need and this way I go for all the options I have checked and might be usefull in the future.
Unfortunatelly there is no way like # to add a description for what an option is important for or a must have.
At least I do not know so far how to comment in such cards. Usually those are not saved.
apex_config:
dataLabels:
style:
fontSize: 16px
fontWeight: bold
offsetY: 2
offsetX: 0
textAnchor: middle
background:
enabled: true
borderColor: red
borderWidth: 2
borderRadius: 0
opacity: 0
foreColor: white
dropShadow:
enabled: false
top: 4
left: 4
blur: 2
color: red
opacity: 1
What I am missing and still have not found out how to control the background colour of such a label like for example I want a white background .
I have found no option to achieve that.
Hello Typxxi Wolf,
looks like the datalables have no influence on the extemas.
I was also not able to get a white background but what I could do was setting the dropshaddow color to white.
apex_config:
dataLabels:
enabled: true
zoom:
enabled: true
toolbar:
show: true
tools:
download: true
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
style:
fontSize: 16px
fontWeight: bold
offsetY: 0
offsetX: 0
textAnchor: middle
background:
enabled: false
foreColor: '#000000'
borderRadius: 3
padding: 5
opacity: 1
borderColor: none
borderWidth: 0
dropShadow:
top: -1
left: -1
blur: 0
color: white
opacity: 1
enabled: true
textAnchor: start
formatter: testtext
name:
show: true
value:
show: true
Highly likely this needs to be done via card-mod. I only advanced a bit as css is not my thing.
As the extrema label is a class I could identify it easily but the box of the label is not static (no class) and I (no css expert, repeating) have no clue how to identify the <rect id=“Svg…”
Youcan have a look here
https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card
EDIT: it seems to work afterall, required a screen-refresh (ctrl-5) and in edit-mode it is a bit iffy 
That’s an awesome graph! Would you mind sharing your config for it?