For the date I fixed it by adding this:
apex_config:
xaxis:
labels:
format: dd-MMM
Now with the Xaxis it’s changing from time to time, I have or your view with a missing date or a 3 date view, can’t find a way to get changing dates fixed…
3 Likes
The great work continues!
I have converted my binary sensor using a template, and not have a 1 or 0. When I try to plot this to indicate if a heater is on, I can only get curved lines. How do I make these nice and square - ie binary ? I have tried all the graph types I can see!
Indeed, set the graph_span: to 5d will show the dates too, but not the first one.
Added the label format , first day of february is fixed, thanx .
1 Like
That’s a bug in the library I’m using. Not much I can do about it.
That mean February 2021. It’s the default format used for beginning of months in this Library.
That would be with:
curve: stepline
Hello RomRider, thanx for the feedback.
Hopefully that bug from the first day will be fixed someday.
The date has been fixed with the option Fabian_V mentioned.
Managed to set the missing date to the current day which is acceptable to me until there is a fix
settings used:
graph_span: 7d
span:
end: day
offset: -1sec
Now it’s missing the last one, haha 
Did you try now with graph_span: 7d1s ?
Thanks - thats kind of done it. I can make the boolean stepline, but if I try and make other lines smooth, they aren’t… can these be mixed between lines? I was previously setting curve: smooth at the apex_config level and not the series level.
Tried it, ( literally graph_span: 7d1s ) but get strange total values on the left.
Did a CTRL + F5 but remains.
1 Like
Ah yeah… that’s interesting. Seems like a bug also on the ApexCharts library. I’ll see if I can do anything about it.
smooth means it will create a curve between 2 points. You have 180points displayed (24h/8min) for the temperature. That’s a lot for this small space so it doesn’t look smooth. If you increase your group_by.duration to a bigger value, the curve will start to smooth out but at the same time you’ll loose “resolution”
Do you have the code for this? Great job. 
Perhaps some relative information for debugging, when I hover at the most left of the card, it shows a vertical line, like there is a column.
At the most right, the column does not entirely fit
Sure, here it is Tommy Welle, this version with the last day not visible on the X-axis.
type: 'custom:apexcharts-card'
graph_span: 7d
span:
end: day
offset: -1sec
header:
show: true
title: Kosten energie per dag in €
apex_config:
chart:
type: area
height: 400
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
dataLabels:
enabled: true
xaxis:
labels:
format: dd-MM
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- color: 'rgb(138,43,226)'
entity: sensor.energy_total_dagelijks_eur
type: column
group_by:
func: max
duration: 24h
- color: 'rgb(235,10,104)'
entity: sensor.energy_gass_eur
type: column
group_by:
func: max
duration: 24h
- color: 'rgb(128,128,128)'
entity: sensor.energy_gas_en_elektriciteit_eur
type: column
group_by:
func: max
duration: 24h
4 Likes
I did disable the labels, and did some small modifications, looks already good also on mobile view.
the legend is showing costs from today… will probably remove it but looking in possibilities.
2 Likes
That looks great, what did you change/add?
Disabling the dataLabels indeed worked:
Complete code:
type: 'custom:apexcharts-card'
graph_span: 7d1s
span:
end: day
header:
show: true
title: Kosten energie per dag in €
apex_config:
chart:
type: area
height: 400
stroke:
show: true
width: 1
curve: smooth
legend:
show: false
dataLabels:
enabled: false
xaxis:
labels:
format: dd-MM
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- color: 'rgb(138,43,226)'
entity: sensor.energy_total_dagelijks_eur
type: column
group_by:
func: max
duration: 24h
- color: 'rgb(235,10,104)'
entity: sensor.energy_gass_eur
type: column
group_by:
func: max
duration: 24h
- color: 'rgb(128,128,128)'
entity: sensor.energy_gas_en_elektriciteit_eur
type: column
group_by:
func: max
duration: 24h
3 Likes
Use the code from @hreedijk
Extra to enable the legend:
legend:
show: true
And have custom names in it, add name:
- color: 'rgb(128,128,128)'
entity: sensor.energy_gas_en_elektriciteit_dagelijks_eur
type: column
name: Totaal
group_by:
After I zoom into a chart, when the data is refreshed the zoom is reset.
Is there a way to keep the zoom when the data is refreshed?
Configuration
type: 'custom:apexcharts-card'
series:
- entity: sensor.eddi_water
name: Water
type: area
extend_to_end: false
color: '#00bfff'
group_by:
func: max
duration: 5min
- entity: sensor.eddi_immersion
name: Immersion
color: '#ffc000'
curve: stepline
type: area
extend_to_end: false
- entity: sensor.boiler_heating_water
name: Gas boiler
curve: stepline
type: line
color: darkred
extend_to_end: false
group_by:
func: last
duration: 5min
span:
start: day
apex_config:
legend:
position: top
yaxis:
- seriesName: Water
decimalsInFloat: 0
max: 60
min: 30
title:
text: Celsius
- seriesName: Immersion
opposite: true
decimalsInFloat: 0
max: 2500
title:
text: Watts
rotate: 90
- seriesName: Gas boiler
opposite: true
show: false
max: 60
min: 30
stroke:
width: 4
grid:
borderColor: '#7B7B7B'
chart:
foreColor: '#7B7B7B'
zoom:
type: x
enabled: true
autoScaleYaxis: true
toolbar:
show: false
autoSelected: zoom
No, that is unfortunately not possible
1 Like