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.
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.
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?
Here is my sun graph. It requires;
stack-in-card
button-card
card-mod
sun2
Improvements welcome 
type: custom:stack-in-card
title: Sun
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
cards:
- type: custom:button-card
name: Sunrise
entity: sensor._sun_rising
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
label: |
[[[ return (entity.attributes.today).substring(11,16); ]]]
show_state: false
show_name: true
show_label: true
show_icon: false
- type: custom:button-card
name: Daylight
entity: sensor._sun_daylight
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
label: |
[[[ return Math.round(entity.attributes.today) + ' hrs';]]]
show_state: false
show_name: true
show_label: true
show_icon: false
- type: custom:button-card
name: Sunset
entity: sensor._sun_setting
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
label: |
[[[ return (entity.attributes.today).substring(11,16); ]]]
show_state: false
show_name: true
show_label: true
show_icon: false
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
experimental:
color_threshold: true
header:
standard_format: true
show: false
show_states: false
show:
loading: false
graph_span: 16h
span:
start: day
offset: +5h
series:
- entity: sensor._sun_elevation
type: area
opacity: 0.8
name: Elevation
extend_to: now
group_by:
func: avg
duration: 5min
color_threshold:
- value: 50
color: white
- value: 20
color: yellow
- value: 5
color: orange
- value: 0
color: steelblue
apex_config:
chart:
type: area
height: 125
legend:
show: false
grid:
show: false
stroke:
width: 2
xaxis:
labels:
format: HH
yaxis:
min: 0
labels:
show: false
axisTicks:
show: false
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
cards:
- type: custom:button-card
name: Dawn
entity: sensor._sun_dawn
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
label: |
[[[ return (entity.attributes.today).substring(11,16); ]]]
show_state: false
show_name: true
show_label: true
show_icon: false
- type: custom:button-card
name: Solar Noon
entity: sensor._sun_solar_noon
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
label: |
[[[ return (entity.attributes.today).substring(11,16); ]]]
show_state: false
show_name: true
show_label: true
show_icon: false
- type: custom:button-card
name: Dusk
entity: sensor._sun_dusk
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
label: |
[[[ return (entity.attributes.today).substring(11,16); ]]]
show_state: false
show_name: true
show_label: true
show_icon: false
columns: 1
Awesome, thank you
Two questions.
sensor._sun_daylight is a template sensor?I am using card-mod to remove the borders. I forgot to mention it, sorry.
The sun daylight sensor is provided by the Sun2 integration (not template). You may need to enable it through the integration options. Note, the sun sensors are prefixed with your chosen name.
How can I set the width of an ApexChart in the new “sections view” to full view width?
You could try searching for ‘full width’
Thank you!!
I’m almost there, yesterday it showed the sun but today I’m only getting this blue box.
Also yesterday the edged where a step line, not smooth as yours. Idea idea what could be causing this?
Wow looks great! Willing to share the code? Certainly for the button/date scroll
I’ll reply to myself. I found a workaround, the problem is with the gradient and when the sun elevation is negative. There will always be a thin line and where there is no max y set that thin line becomes rather big.
One workaround is to update the gradient config and add
- value: 0
color: "#1C1C1C"
Now that won’t work in light mode or with other background colors, but I couldn’t figure out how to make it transparent so I just took the background color to see if it worked, which it did.
Maybe someone knows a better way to solv this?
I tried using transform on the series data and remove all negative values but that instead left the yellow stroke line at 0 all the time.
OMG, only 4 hours of daylight! 
You must live in the artic circle. The short daylight period is most likely why it appears stepped.
Regarding the blue-light block, I’ve noticed that issue too. I think it’s a glitch in the apexcharts-card. It seems to correct itself once the sun rises. You could try removing the blue gradient to see whether it fixes the issue.
To be exact it’s 3h 39min of daylight today 
Try adding the extra gradient step I posted above, it more or less fixed it without messing with the blue fill in the positive area.
Hi Tim,
sure , you could check it up there .
I made some changes already again - will update .
Hope it works for you .
Best regards, Dietmar
