Anyone know how to use xaxis annotations? I cannot get it to work.
I want to draw a vertical line at certain point in the xaxis. I tried ‘20:00’ and ‘20:00:00’, both don’t work.
That looks like a total from feeding a newborn. Do you have an integration behind these sensors? if so, which is it?
As you might have seen a few posts above, I am also struggling with xaxis annotations.
I used a timestamp for the x-value, though. Didn’t work.
Maybe it’s a bug?
I don’t know, but @markcocker was able to create xaxis annotations in the past, see his post below. Probably it must use “template” and use function call to get the correct X timestamp? I tried many different values, no luck.
Thanks for this sample.
Tried to do the same. But to no avail. 
My vertical annotation example. I will paste the code on Saterday. Time for a late dinner !!
type: custom:config-template-card
variables:
mytime: new Date().getTime()
entities:
- sensor.time
card:
type: custom:apexcharts-card
graph_span: 4h
cache: true
span:
end: hour
show:
last_updated: false
loading: false
yaxis:
- show: false
min: ~0
max: ~1
decimals: 0
apex_config:
tickAmount: 6
series:
- entity: sensor.energy_consumption_hourly_total
float_precision: 3
type: column
name: Electric
fill_raw: zero
group_by:
fill: last
duration: 1h
func: last
color: '#90EE90'
show:
legend_value: true
in_header: true
name_in_header: true
header_color_threshold: false
in_chart: true
datalabels: true
hidden_by_default: false
extremas: false
apex_config:
annotations:
position: front
yaxis:
- 'y': 0.51
y2: 0.52
strokeDashArray: 0
borderColor: '#0000bb'
fillColor: '#0000bb'
opacity: 0
label:
borderColor: '#8B4000'
borderWidth: 2
text: My vertical annotation example - Current time >
position: right
offsetX: 0
offsetY: -35
style:
background: '#0000bb'
color: '#ffffff'
fontSize: 16px
xaxis:
- x: ${{ mytime }}
strokeDashArray: 0
borderColor: '#0000bb'
fillColor: '#0000bb'
opacity: 0.9
offsetX: 0
offsetY: 10
label:
borderColor: '#8B4000'
borderWidth: 1
text: ${{states['sensor.time'].state}}
position: top
orientation: vertical
textAnchor: middle
style:
background: '#0000bb'
color: '#ffffff'
fontSize: 16px
chart:
height: 250
type: bar
plotOptions:
bar:
borderRadius: 5
dataLabels:
position: top
dataLabels:
enabled: false
zoom:
enabled: false
toolbar:
show: false
tools:
download: true
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
tooltip:
enabled: false
theme: light
style:
fontsize: 6px
onDatasetHover:
highlightDataSeries: true
x:
show: true
format: ddd dd MMM yyyy HH:mm
marker:
show: true
fixed:
enabled: true
position: topRight
offsetX: -10
offsetY: 0
grid:
show: true
strokeDashArray: '0'
borderColor: '#666666'
xaxis:
lines:
show: false
yaxis:
lines:
show: true
xaxis:
labels:
show: true
rotate: 10
rotateAlways: true
style:
colors: '#ffffff'
fontSize: 14px
format: HH:mm
offsetX: 0
offsetY: 5
position: bottom
showDuplicates: false
axisBorder:
show: true
color: yellow
height: 1
width: 100%
offsetX: 0
offsetY: 5
axisTicks:
show: true
color: yellow
height: 6
offsetX: 0
offsetY: 0
title:
text: ${{'ApexCharts X & Y Annotation Example'}}
style:
fontSize: 20px
color: '#fff000'
legend:
show: true
showForSingleSeries: false
position: top
horizontalAlign: center
fontSize: 30px
offsetX: 0
offsetY: 0
labels:
useSeriesColors: true
onItemClick:
toggleDataSeries: false
onItemHover:
highlightDataSeries: false
1 Like
Thank you sooo much, @Kertz1954 !
The issue is: x-Axis annotations don’t work, if you have now enabled.
As soon, as I set
now:
show: false
label: Now
all the other vertical annotations became visible!!
2 Likes
I have a wired issue with some of the old data in one series not loading until I edit the dashboard. So when loaded normally some time (most of the times) older data is not loaded (or at least shown as 0), but when I then click edit dashboard I see how the chart is refreshing data and the old missing data point show up. Click done and it goes blank again.
In the video you can see what I mean, look at the left part of the graph where the grey area comes and goes.
This is the whole data used to configure the graphs.
type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
align_state: center
name: Electricity
decimals: 1
entities:
- entity: sensor.electricity_price_total
show:
icon: false
graph: false
- type: custom:apexcharts-card
now:
show: true
color: red
graph_span: 3d
hours_12: false
span:
start: day
offset: '-1d'
all_series_config:
type: area
extend_to: false
yaxis:
- id: SEK
min: 0
apex_config:
tickAmount: 5
- id: Heater
min: 0
max: 1
show: false
apex_config:
tickAmount: 5
- id: kWh
min: 0
max: 10
show: false
apex_config:
tickAmount: 5
apex_config:
chart:
type: area
height: 300
legend:
show: false
tooltip:
x:
format: dddd HH:00
xaxis:
type: datetime
labels:
datetimeFormatter:
month: ddd
day: ddd
tooltip:
enabled: false
fill:
type: solid
opacity: 0.2
series:
- entity: sensor.run_heater_when
yaxis_id: Heater
name: Heater
color: '#777'
stroke_width: 0
curve: stepline
data_generator: |
return entity.attributes.heater.map((p) => {
let when = new Date(p.startsAt);
when.setHours(when.getHours());
return [when, p.value];
});
- entity: sensor.run_heater_when
yaxis_id: Heater
name: Heater Yesterday
color: '#777'
stroke_width: 0
curve: stepline
group_by:
func: max
duration: 60min
transform: 'return x == "on" ? 1 : 0;'
- entity: sensor.last_meter_consumption_osthammar
yaxis_id: kWh
type: column
name: Usage
color: '#932bd9'
float_precision: 1
stroke_width: 2
offset: '-1h'
group_by:
func: delta
duration: 1hour
- entity: sensor.electricity_price_total
yaxis_id: SEK
name: Electricity
curve: stepline
color: '#2b76d9'
stroke_width: 2
float_precision: 2
group_by:
func: avg
duration: 1hour
- entity: sensor.tibber_prices
yaxis_id: SEK
name: Electricity Forward
stroke_width: 2
curve: stepline
color: '#2b76d9'
float_precision: 2
data_generator: >
var items = [];
var gridFees =
parseFloat(hass.states['input_number.electricity_grid_fees'].state);
var now = new Date();
now.setHours(now.getHours() - 1);
entity.attributes.today.forEach((p) => {
items.push([new Date(p.startsAt), p.total+gridFees]);
});
entity.attributes.tomorrow.forEach((p) => {
items.push([new Date(p.startsAt), p.total+gridFees]);
});
return items.filter((item) => {
return item[0] > now;
});
This is the series with missing data points in normal mode
- entity: sensor.run_heater_when
yaxis_id: Heater
name: Heater
color: '#777'
stroke_width: 0
curve: stepline
data_generator: |
return entity.attributes.heater.map((p) => {
let when = new Date(p.startsAt);
when.setHours(when.getHours());
return [when, p.value];
});
Does anyone have any idea what could be causing this behaviour?
Thanks @Kertz1954 after playing around without your code, I realized the “x” must have that value from JavaScript getDate() function. So, obviously we cannot use text like ‘20:00’ 
To set x: to a specific time in xaxis, we can use “setHours(hour, [min], [sec], [ms])”
1 Like
What I don’t get from your sample:
Why are you using double curly braces ${{ x }} ?
Isn’t the syntax just ${ x } ?
Just a habit of mine. I write and test a lot in the template editor which requires 2 curly braces.
ApexCharts will accept 1 or 2 curly braces. 
1 Like
We use the BabyBuddy add-on and integration, then I do some additional API calls through Node-RED to get additional stats. You can DM me for more info if you’d like. Highly recommend.
As far as the card, I may just add current stats for the day via stack-in-card so at least it’s all together.
Hi, has anyone an idea why the tooltip is only showing 1 series (or the blue or the orange) and not both together?
Code is the same for this graph where it nicely shows both series …
Ohh… so then is there no way to change the values that are displayed in the header?
I have a graph that shows the total energy consumption per device type for the last day. I would like to display the sum for the entire day in the header rather than just the last value of the sensor.
I though this should be possible by writing a data_generator under the series.show.in_header option. Here is my apexcharts config, but I’ve struggled writing the javascript as it doesn’t seem like it’s possible to use the Studio Code Server?
type: custom:apexcharts-card
header:
show: true
title: Device energy consumption
show_states: true
colorize_states: true
show:
last_updated: false
stacked: true
graph_span: 24h
span:
start: day
yaxis:
- min: 0
series:
- entity: sensor.total_mill_energy
type: column
group_by:
func: diff
- entity: sensor.total_hot_water_energy
type: column
group_by:
func: diff
- entity: sensor.total_tesla_charging
type: column
group_by:
func: diff
@benm6 please share your code for this card?
I have the same problem. 2 charts, identical with the exception that one uses the statistics (LTS) option within the series, which does show all series in the tooltip correctly.
A thought occured that maybe the data had different time values when written to the DB. A quick test on the X: showing ddd dd MMM HH:mm s fff (in my case for 3 series) had all the same values, so it’s not a timing issue when the data is written to the DB.
That leaves just two other possibilities,
The current HA intergration may not be using latest version of ApexCharts which is is 3.36.0, dated Oct 23 2022), so if it was a bug, maybe it’s been fixed.
Or there is still an outstanding a bug. There are presently 231 open issues with ApexCharts. Unfortunatly, I do not have the time to read through them. ApexCharts issues
Thanks for the tip! I’ll look into it, though with newborn twins, I don’t know if I’ll have to configure something like this 
Is there absolutely no way to summarize the amounts in the tooltip?
In this case I want to show “0,49 + 0,82 = 1,31”
Another thing, the dotted line from the tooltip is never shown in the middle of the bar, can that be done?
Is there any way to change the font size of the texts in the header section?
As I have mentioned in previous posts, the Header is an HA add on and is not part of the original ApexCharts system. You need to jump over to the Card-mod - Add css styles to any lovelace card page where I am sure you will find what you are looking for.
1 Like