u can use 2 sensors.
use the show options to hide one from chart, and hide the other one from header.
1 Like
thanks to @vingerha and @CumpsD to format the tooltip on the X axis
card:
type: custom:apexcharts-card
header:
show: true
title: Current month usage
show_states: true
colorize_states: false
graph_span: ${ {{ span }} + 'd'}
span:
start: day
offset: ${'-' + {{ offset }} + 'd'}
apex_config:
tooltip:
x:
format: dd MMM
hi guys, my graph is calculated per day and I face a new issue now. It seems that the X axis labels are only correct for min span of 4 days and above. If it is below 4 days, the X axis labels are weird. How should i make it to display only dates?
span = 1d
span = 2d
span = 3d
span = 4d
Hello!
Is there a way to keep the data series at the top and turn off the legend at the bottom?
I’ve looked and looked and just can’t find the option, any help will be appreciated!
Thanks!
apex_config:
legend:
show: false
1 Like
@vingerha you’re the best!!! thanks much, I was getting so frustrated
if i use xaxis.type: category, then i will get the correct ticks and alignment but how do i convert the timestamp value back to dd MMM? The formatter function does not seem to work.
picture for span of 1d:
# lovelace_gen
type: custom:apexcharts-card
header:
show: true
title: {{ chart_title }}
show_states: true
colorize_states: false
graph_span: {{ chart_span }}
span:
start: day
offset: {{ chart_offset }}
apex_config:
# tooltip:
# x:
# format: dd MMM
xaxis:
type: category
labels:
# format: dd MMM
# formatter: |
# EVAL:function(value,timestamp) {
# return "123";
# }
showDuplicates: false
rotate: -60
rotateAlways: true
# hideOverlappingLabels: false
# tickAmount: 1
tickPlacement: on
# title:
# text: Date
# axisTicks:
# show: true
series:
- entity: {{ chart_entity }}
type: column
group_by:
func: max
duration: 1d
float_precision: 3
show:
extremas: true
in_header: false
- entity: {{ chart_header_entity }}
show:
in_chart: false
name_in_header: false
float_precision: 3
Why do you use this then
@vingerha
if i use type: datetime, the xaxis labels are wrong if my span is less than 4 days
You are looking in the wrong direction, not saying there are no issues with this chart. start simple and remove e.g. span: start: day, no offset, etc. it is quite a challenge to guess why this goes wrong without having the same dataset
Was asking myself the same thing. Did you find out if this is possible?
Nope, never figured it out.
I found a possible bug where the toolbar icons from apex chart overlay on top of other windows. Is there a way to avoid this?
Below is a more info window from a Tile Card. HA 2025.5.3, apexcharts-card v2.1.2 via HACS. It occurs in both desktop browsers and the mobile app.
Code:
graph_span: 14d
span:
offset: +0s
header:
show: false
apex_config:
chart:
zoom:
enabled: true
type: x
autoScaleYaxis: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
reset: true
pan: true
download: false
legend:
show: false
floating: false
tooltip:
show: true
xaxis:
tooltip:
enabled: false
yaxis:
- id: first
decimals: 0
all_series_config:
stroke_width: 1.5
series:
- entity: sensor.humidity
color: "#e6194b"
statistics:
type: mean
period: hour
card_mod:
style: |
ha-card.type-custom-apexcharts-card {
overflow: visible !important;
}
I just re-discovered that one can also do this in single series
The documentation of this card is really falling behind, most of it can be found in this huge post but one has to be resilient in searching 
show:
in_legend: false
1 Like
What can I do to prevent the Column width to change over time?
like on 10:01 they are slim and on 10:59 they are wide.
type: column
group_by:
func: avg
duration: 1h
FOUND THE REASON
it happens when
extend_to: now
is used
I recommend using
extend_to: false
until its fixed
Not sure if one would call this a bug but imo it is…likely this is related to not having the same datetime values.
One solution I found is to group all entities the same way (not ‘raw’ and same duration) but this may disturb the others… trial/error
not sure if I got it right.
under the entitys I removed all
group_by:
func: avg
duration: 1h
and then added this
all_series_config:
group_by:
func: avg
duration: 1h
But I see no difference in the behavior. The columns are still changing in width over time.
I never use all_series_config so no clue how that behaves, I only saw that having the same duration grouping resolved things for me, maybe not in all cases, start with simple code, donot use formatting/trickery and work your way upward, adding 1 series at the time…no guarantees and do note that Romrider is not responding since ages
Try this too
apex_config:
plotOptions:
bar:
columnWidth: 20Thanks I will try it