First, alignment above is off so assume it is better in the card yaml
Second, try this
transform: return x * hass.states['input_number.threshold_1_low'].state / 100;
If you would search 'hass.states" in this thread then you could find it too
did you ever figured out why the graph is skewed to the left?
I have found this ApexCharts card - A highly customizable graph card - #2452 by Erikfluff but that does what i would expect and just shows one huge bar 
EDIT:
so I have found
all_series_config:
group_by:
func: last
duration: 1d
start_with_last: true
this does solve the bar alignment, but datalabels arestill displayed incorrectly to the left. So now datalabels don’t display first label and are all displayed a bit to the left of the bar.
so it is a bug in apex chart with column being datetime Missing first X-Axis label · Issue #475 · apexcharts/apexcharts.js · GitHub
trying this
apex_config:
dataLabels:
position: bottom
dropShadow:
enabled: true
plotOptions:
bar:
dataLabels:
position: bottom
xaxis:
hideOverlappingLabels: false
min: 1ms
type: datetime
labels:
formatter: |
EVAL:function(value, dateObjx) {
const dateObj = new Date(dateObjx);
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
const day = String(dateObj.getDate()).padStart(2, '0');
return `${month}-${day}`;
}
tickAmount: 14
results in
which I do not get at all why
Update:
So what is really happening is that last entry is duplicated and all the labels are moved to the right - ie. -12.8 should be for 10-15
is the workaround you did still working for you in latest version?
Hello
Is there a way to ‘force’ Apex Charts to show average month data, but start form 1st day of the month ?
here is my example:
It shows average data but starting form 16of AUG, but I d like to have start it form 1st of AUG.
Sharing this here in case anyone else wants boolean labels on a Y-axis:
type: custom:apexcharts-card
graph_span: 4h
apex_config:
yaxis:
tickAmount: 1
labels:
formatter: |
EVAL:function(value) {
return value === 1 ? 'On' : 'Off';
}
header:
show: true
title: Fan Required
series:
- entity: binary_sensor.ensuite_fan_required
opacity: 1
type: area
curve: stepline
stroke_width: 1
transform: "return x === 'on' ? 1 : 0;"
show:
legend_value: false
in_header: false
fill_raw: last
5 Likes
Here a usual tibber price chart but I was not able to get more hours on the xaxis or i rather should say no hour at all.
I had chosen a timespan of 50 hours, not days, but it still stays this way
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
grid:
show: true
borderColor: black
position: back
yaxis:
lines:
show: false
xaxis:
lines:
show: true
row:
colors:
- lightgrey
- transparent
opacity: 0.95
column:
colors:
- blue
- transparent
chart:
height: 260px
tooltip:
enabled: true
followCursor: false
x:
show: false
fixed:
enabled: true
graph_span: 50.3h
span:
start: day
offset: +0d
now:
show: true
label: "\_\_\_\_ J\_\_E\_\_T\_\_Z\_\_T \_\_\_\_"
color: red
header:
show: true
show_states: true
colorize_states: false
standard_format: false
yaxis:
- min: 15
max: ~55
decimals: 0
apex_config:
tickAmount: 8
series:
- entity: sensor.tibber_prices
name: Preis
unit: "\_\_Cent / kWh"
show:
in_header: before_now
name_in_header: false
extremas: true
color_threshold:
- value: 0
color: 4DD0E1
- value: 10
color: 26A69A
- value: 15
color: 4CAF50
- value: 20
color: 7CB342
- value: 25
color: FBC02D
- value: 30
color: EF6C00
- value: 40
color: B71C1C
type: line
curve: stepline
extend_to: false
stroke_width: 4
float_precision: 1
data_generator: |
const noon = new Date()
noon.setHours(0, 0, 0, 0)
const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
const data = [];
for(let i = 0; i < prices.length; i++) {
data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
}
return data;
And is there a way to replace that “now” feature label with the current time ?
Right now I am using protected spaces with the simple word “now” in german but I would prefer to see the current time
now:
show: true
label: "\_\_\_\_ J\_\_E\_\_T\_\_Z\_\_T \_\_\_\_"
color: red
but I could not figure it out cause my attempts with
{% set zeit = now().strftime('%H:%M') %}
and
chatgpt
were finally unsusccessfull
Thanks a lot! I didn’t think off searching through this thread, I got to admit, I’m not used to having a single support thread for things…
How is it that the Readme shows quotation marks " in each example but they can be left out? Shouldn’t this be clearly communicated there? Or is this some languages behaviour?
And what about the alignment? Two spaces here as indent seems to be consistent (and suggested for yaml) ?
Not without tweaking, here is an example
ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community
1 Like
Well, it looked so simple but after reading the cards guide and playing around with 3 attempts I had no luck cause the card would not have been even saved.
I have tried these
type: custom:config-template-card
variables:
- myTime: now().strftime('%H:%M')
now:
show: true
label: ${vars[0]}
and
type: custom:config-template-card
variables:
- now().strftime('%H:%M')
now:
show: true
label: ${vars[0]}
and then this (based on a former if elseif example)
type: custom:config-template-card
variables:
- mTime: |
{{now().strftime('%H:%M')}}
now:
show: true
label: ${ mTime}
The example with the sensor in this config-template-card looked that it could be easy but then I tried and tried but without success
As you can see I am not really familiar with the syntax to use and I usually would use this {% set a = now().strftime(‘%H:%M’) %} thing but was not sure when the 3rd did not work out which was based on a temperature function as demo in the config-template-card
Any suggestions ?
Thanks a lot
@vingerha
UPDATE:
and this last one failed too, but a bit differently with an error and the code had been saved, but not in any successfull way as you can see here cause the apex part is indented by the system
type: custom:config-template-card
variables:
- mTime: |
{% set tmpX = now().strftime('%H:%M') %}
{{ tmpX }}
now:
show: true
label: ${ mTime }
Yeah, seems now() does not work on this card (?), try this other card as an alternative
gadgetchnnel/lovelace-card-templater: Custom Lovelace card which allows Jinja2 templates to be applied to other cards
1 Like
I have installed the card and rebooted, then I have tried this but the whole code change are not saved in particular these lines
type: custom:card-templater
...
and also
...
label_template: |
{{ now().strftime('%H:%M') }}
I can not find out what I had done wrong that it can not been even stored or do I have to put the apex “inside” a custom:card-templater, I mean this indentation in the example here .
type: custom:card-templater
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
grid:
show: true
borderColor: black
position: back
yaxis:
lines:
show: false
xaxis:
lines:
show: true
row:
colors:
- lightgrey
- transparent
opacity: 0.95
column:
colors:
- blue
- transparent
chart:
height: 260px
tooltip:
enabled: true
followCursor: false
x:
show: false
fixed:
enabled: true
graph_span: 48.6h
span:
start: day
offset: +0d
now:
show: true
label_template: |
{{ now().strftime('%H:%M') }}
color: red
header:
show: true
show_states: true
colorize_states: false
standard_format: false
yaxis:
- min: 15
max: ~55
decimals: 0
apex_config:
tickAmount: 8
series:
- entity: sensor.tibber_prices
name: Preis
unit: "\_\_Cent / kWh"
show:
in_header: before_now
name_in_header: false
extremas: true
color_threshold:
- value: 0
color: 4DD0E1
- value: 10
color: 26A69A
- value: 15
color: 4CAF50
- value: 20
color: 7CB342
- value: 25
color: FBC02D
- value: 30
color: EF6C00
- value: 40
color: B71C1C
type: line
curve: stepline
extend_to: false
stroke_width: 4
float_precision: 1
data_generator: |
const noon = new Date()
noon.setHours(0, 0, 0, 0)
const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
const data = [];
for(let i = 0; i < prices.length; i++) {
data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
}
return data;
I will try it with the indentation or card in a custom card as it looks like
a bit of progress with this - at least a tiny change, but no readable time
and if I zoom in I get this
type: custom:card-templater
card:
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
grid:
show: true
borderColor: black
position: back
yaxis:
lines:
show: false
xaxis:
lines:
show: true
row:
colors:
- lightgrey
- transparent
opacity: 0.95
column:
colors:
- blue
- transparent
chart:
height: 260px
tooltip:
enabled: true
followCursor: false
x:
show: false
fixed:
enabled: true
graph_span: 48.6h
span:
start: day
offset: +0d
now:
show: true
label_template: |
{{ now().strftime('%H:%M') }}
color: red
header:
show: true
show_states: true
colorize_states: false
standard_format: false
yaxis:
- min: 15
max: ~55
decimals: 0
apex_config:
tickAmount: 8
series:
- entity: sensor.tibber_prices
name: Preis
unit: "\_\_Cent / kWh"
show:
in_header: before_now
name_in_header: false
extremas: true
color_threshold:
- value: 0
color: 4DD0E1
- value: 10
color: 26A69A
- value: 15
color: 4CAF50
- value: 20
color: 7CB342
- value: 25
color: FBC02D
- value: 30
color: EF6C00
- value: 40
color: B71C1C
type: line
curve: stepline
extend_to: false
stroke_width: 4
float_precision: 1
data_generator: >
const noon = new Date()
noon.setHours(0, 0, 0, 0)
const prices =
entity.attributes.today.concat(entity.attributes.tomorrow);
const data = [];
for(let i = 0; i < prices.length; i++) {
data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
}
return data;
UPDATE: final change did not work out either where I replaced " by ’ just out of pure hope
label_template: |
{{ now().strftime('%H:%M') }}
Read the f manual please, do not just copy things and start small …you forgot the entities
1 Like
When I had the entities I got an error that it was not an array so I left that out.
And I had read the github page but could not figure out the array error - lesson learned.
I have to check the real message, just from my memory that it was an array problem.
simple but beautifull - now it works
For others struggling:
my mistake was this
type: 'custom:card-templater'
entities: sensor.tibber_prices
and will give you this array error mentioned before
tiny but small error cause the
sensor itself has to be in the next line
like in the example screenshot
A simple copy and paste error by the brain believing to type exactly the same seen in the screenshot when I had not typed the same.
And if you might not believe it: I had even found the ’ ’ and replaced those with “” while running out of hope but not seen that new line and missing dash error
type: 'custom:card-templater'
entities:
- sensor.tibber_prices
thanks for listening to my big 
@vingerha
1 Like
Try below 2 days… then it works
1 Like
Yes, I know cause I had that before but needed a value over 48 for a specific reason last week, when we had hoped to retrieve that way the data of the past day too which did not work out that way.
THANKS for reminding me again. Luckily things have changed since then when I went above the 48 hour mark last week so it might work, but
HOW can i control or reduce the amount of ticks / labels along the xaxis which exploded from 3 to 30 or so ?
I have tried to use xaxis and tickAmount as I did for the yaxis and checked also the apex chart java website which offered something which this apex chart HA version seemed to no like.
yaxis:
- min: 15
max: ~55
decimals: 0
apex_config:
tickAmount: 8
Any suggestions to get at least a few labels less along the now crowded xaxis without reducing the amount of hours ?
And now I just even remembered why I had stayed above 48 hours or in particular in my productice dashboard at 50.76h (or higher) after the tests last weeks which tried to incl. the data from yesterday which had not worked out:
If you use 50.76 hours then you have 3 labels along the xaxis. If you use just 50.75 you get only 2 labels for today on the left and tomorrow in the middle while the right position is empty which looked weird where you can see below the nice symetrical one with 50.76 hours (I had tried it out cause I found the behaviour strange when I tried to understand where and why there could be such turning point in the behaviour)
I have expanded the “now” or now “clock bar” with protected, bigger spaces where the usual ones are not useable if you need more than just one.
and in particular the big red vertical pillar here
I have added usual spaces before and after the “:” and then added 2 different sized protected spaces which was the only chance to achieve that cause the usual solution “___” did not work.
This is part of these lines
now:
show: true
label_template: |
{% set spacers = " ⠀" %}
{{ spacers }} {{ now().strftime("%H : %M") }} {{ spacers }}
ATTENTION AGAIN: set spacers contains 2 different wide spaces (none of them a a genuine SPACE from the keyboard) cause those both together fit the best for me at this spot.
You can check that by putting the cursor in the middle between these 2 spaces and then HOLD SHIFT and PRESS left and right CURSOR for an easy comparison. The right one is wider.
type: custom:card-templater
entities:
- sensor.tibber_prices
card:
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
tickAmount: 8
grid:
show: true
borderColor: black
position: back
yaxis:
lines:
show: false
xaxis:
lines:
show: true
row:
colors:
- lightgrey
- transparent
opacity: 0.95
column:
colors:
- blue
- transparent
chart:
height: 260px
tooltip:
enabled: true
followCursor: false
x:
show: false
fixed:
enabled: true
graph_span: 50.76h
span:
start: day
offset: +0d
now:
show: true
label_template: |
{% set spacers = " ⠀" %}
{{ spacers }} {{ now().strftime("%H : %M") }} {{ spacers }}
color: red
header:
show: true
show_states: true
colorize_states: false
standard_format: false
yaxis:
- min: 15
max: ~55
decimals: 0
apex_config:
tickAmount: 8
series:
- entity: sensor.tibber_prices
name: Preis
unit: "\_\_Cent / kWh"
show:
in_header: before_now
name_in_header: false
extremas: true
color_threshold:
- value: 0
color: 4DD0E1
- value: 10
color: 26A69A
- value: 15
color: 4CAF50
- value: 20
color: 7CB342
- value: 25
color: FBC02D
- value: 30
color: EF6C00
- value: 40
color: B71C1C
type: line
curve: stepline
extend_to: false
stroke_width: 4
float_precision: 1
data_generator: >
const noon = new Date()
noon.setHours(0, 0, 0, 0)
const prices =
entity.attributes.today.concat(entity.attributes.tomorrow); const data =
[]; for(let i = 0; i < prices.length; i++) {
data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
} return data;
The only missing piece is a nice clean labeling of the xaxis with maybe a label every 3th / 4th / 6th hours which would equal 8 / 6 / 4 time labels.
Anyone a suggestion ?
Chatgpt offered a xaxis tickamount and whatsoever which does not exist in the apex chart HA edition cause the xaxis parameter will be rejected.
3777 th comment in this topic done.
Hi,
I have been googling alot and is stuck so i am trying here to see if someone has an idea on how i can do this
I would like to be able to only show the top three values from this entity:
- entity: sensor.ellevio_effect_fee_import_power
name: Average Hourly Usage
unit: kW
type: column
yaxis_id: kw
show:
datalabels: true
extremas: false
legend_value: false
color: cyan
color_threshold:
- value: 0
color: Lime
- value: 2
color: Green
- value: 4
color: Yellow
- value: 8
color: Red
statistics:
type: mean
period: hour
align: start
So currently it shows every hour, but i would like to only show the top three values from it. Is it someone that have done that in the past? guess it should be possible with the data_generator somehow? What is important is that it must be possible to get the values from statistics as i will change the period to days and graph span to month later on.
Thanks
Hi - I have a chart with two y axis - one showing kWh - and one showing temp. The temp is a line - with color thresholds enabled. This works fine. Unfortunately - when I try to add a third series (using the kWh axis) and stack this - the color thresholds no longer seems to work. Wonder if I’ve done something wrong - any help much appreciated!!!
type: custom:apexcharts-card
header:
show: true
title: Hot Water Consumption Year
apex_config:
chart:
height: 150px
grid:
show: false
xaxis:
show: true
labels:
format: MMM
show: true
as_duration: month
yaxis:
- title:
text: kWh
seriesName:
- Heat Pump
- Immersion
decimalsInFloat: 0
- opposite: true
title:
text: Temp (°C)
seriesName:
- Temp
decimalsInFloat: 0
legend:
show: false
position: top
show_states: false
value: false
stacked: true
graph_span: 8month
span:
end: week
series:
- entity: sensor.altherma_domestichotwatertank_heating_weekly_electrical_consumption
name: Heat Pump
color: orange
type: column
unit: kWh
extend_to: false
group_by:
func: diff
duration: 1week
statistics:
type: sum
period: hour
- entity: sensor.mixergy_electrical_energy_energy_daily
name: Immersion
type: column
color: red
unit: kWh
extend_to: false
group_by:
func: diff
duration: 1week
statistics:
type: sum
period: hour
- entity: sensor.altherma_climatecontrol_outdoor_temperature
name: Temp
type: line
yaxis_id: second
stroke_width: 2
group_by:
func: avg
duration: 1week
statistics:
type: mean
period: hour
show:
legend_value: false
color_threshold:
- value: -10
color: steelblue
- value: 5
color: midnightblue
- value: 10
color: green
- value: 11
color: orange
- value: 15
color: orangered
- value: 20
color: red