I’m trying to create an x-axis annotation based on a template sensor value.
I managed to inlude “now”
And I have a template sensor that puts out the correct unix timestamp sensor.lowest_future_price_timestamp, but I don’t seem to be able to access it in the apex config - how to do this?
apex_config:
chart:
height: 300px
annotations:
xaxis:
- x: EVAL:new Date().getTime()
label:
text: Now
borderWidth: 0
style:
background: "#0000"
- x: 1733695200000.0 # <-- here I want the value of sensor.lowest_future_price_timestamp
label:
text: Cheapest
borderWidth: 0
style:
background: "#0000"
Hi. Did you get this working? Here’s a card I made yesterday. I’ll need to tidy-up the code a bit as I have some unneeded elements, but hopefully you can see the relevant part.
@vingerha , thanks for the idea, unfortunately I couldn’t manage to install the “config-template-card” addon - I tried it via HACS (worked fine for apex-charts and custom-weather), THe folder structure looks fine
➜ community pwd
/config/www/community
➜ community l
total 20K
drwxr-xr-x 5 root root 4.0K Dec 7 17:58 .
drwxr-xr-x 3 root root 4.0K Dec 4 10:05 ..
drwxr-xr-x 2 root root 4.0K Dec 4 10:05 apexcharts-card
drwxr-xr-x 2 root root 4.0K Dec 7 17:58 config-template-card
drwxr-xr-x 4 root root 4.0K Dec 5 09:00 weather-chart-card
but it doesn’t even run a simple hello world example.
@vingerha thx for the pointer - I’m still stuck though. I think I managed to integrate the apex chart with the config-template-card, but I have no clue how to access the value of the entity… (I’m just learning HA concepts and I’m really bad at JS)
The entity contains the correct value, checked it via the developer tools.
I tried the below Ideas, but only when I paste the value, I get the desired annotation
Thx! That worked
tried to rtfm, but I couldn’t make any sense out of the examples and I have no clue how to debug this (tried EVAL console.log & F12 - but with limited success)
I actually managed to do it by creating a template sensor returning specific values.
Having a look at your solution though it seems more elegant, as you do the value definition directly in the card. I might have a go at doing it like that. Thanks for sharing your config, it will also come in handy as I wanted to add some secondary Y-axis as well at some point.
Hello
I need help to get attributes from an SQL entity to show custom tooltip on Apexcharts
Here my entity :
url: sqlite:////config/trips.db
column: price
request:
SELECT ph.date, MIN(ph.price) as price, h.name as hotel_name, t.date as trip_date
FROM price_history ph
JOIN trips t ON ph.trip_id = t.id
JOIN hotels h ON t.hotel_id = h.id
JOIN hotel_locations hl ON h.id = hl.hotel_id
JOIN locations l ON hl.location_id = l.id
WHERE l.code = 'E1.MAH'
GROUP BY ph.date
ORDER BY ph.date;
Not (!) the specialist but I believe this method does not allow to kick back attributes. You can see this when you use ‘data’ only, 0=stamp, 1=state.
A possible (?) workaround would be to have the sql push all params in the state and then you can use data[1][0], data[1][1] etc.
I have a question regarding setting up a chart with Apex Charts:
Is it possible to configure the X-axis to always display the 24 hours of a day, starting with midnight on the left, noon in the center, and ending with midnight on the right? I’d like this axis to remain fixed regardless of the current time.
Additionally, I want to:
Display a “Now” indicator that moves dynamically across the chart as time progresses.
Show the stats of the previous day as dashed lines.
Gradually replace the previous day’s stats with today’s stats as the hours go by.
The goal is to have a seamless transition where the current stats overwrite the previous day’s stats on the fixed X-axis.
Is this achievable in Apex Charts? If yes, could you point me in the right direction or share any examples?
Thanks in advance!
Solved No. 1
graph_span: 24h
span:
start: day
offset: 0
No.2 and 3 - How can I show the values of the previous day and also forcasts only on the right side of the red time indicator?
so everything left of it is past and everything right of it is predictions
Cannot put my finger on it but there are more things ‘fishy’. When using graph_span: 11h it shows 24dec, with 10h and 12h all is fine. I suggest playing around with span and with 1 series first to see if one of them affects display
I do not think this will work as is will require a ‘entity’ for each slice. There is very little documentation on pie-charts and none of them use the data_generator
RomRider’s apexcharts-card suits a need I have very well - except I’d like it to be half the width - which it would be quite comfortable in with my data and headings.
It has an explicit option to scale the chart width (and height) but i don’t see one for scaling the entire card.
Have I missed a more general approach to this - perhaps something to do with layouts?
I’m using an Apex card to plot the price of electricity per hour, by following a great tutorial from doe duurzaam. This works nice, and results in the following card:
On top of this, I would now like to plot my hourly energy consumption. This would allow me to see to which extend we are capable of not taking energy from the grid when the price is high.
I have the utility sensor set up in homeassistant, and thought of plotting that hourly energy consumption as a second bar, however on the second y-axis given the different units. Unfortunately, this is the result:
As you might appreciate, this is not really something useful I’ve been playing with this for 2 days now, but can’t figure out what I’m doing wrong. Anyone here that could help me to get this working?
This is the code of the last graph:
- type: custom:apexcharts-card
update_interval: 5m
graph_span: 24h #48h
span:
start: day
#offset: -12h
now:
show: true
label: nu
header:
show: true
show_states: true
colorize_states: true
title: Stroomprijs vandaag
experimental:
color_threshold: true
series:
- entity: sensor.average_electricity_price
yaxis_id: Prijs
stroke_width: 2
float_precision: 3
type: column
opacity: 1
color_threshold:
- value: -0.10
color: '#000fff'
- value: 0
color: '#00ffd5'
- value: 0.10
color: '#ff8000'
- value: 0.20
color: '#0080ff'
- value: 0.30
color: '#ff2a00'
- value: 1
color: '#ff00d4'
data_generator: |
return entity.attributes.prices.map((record, index) => {
return [record.time, record.price];
});
- entity: sensor.hourly_energy_delivered
type: column
stroke_width: 2
opacity: 1
yaxis_id: second # this serie will be associated to the 'id: second' axis.
yaxis:
- id: Prijs
decimals: 2
- id: second # identification name of the second y-axis
opposite: true # make it show on the right side
Templatable Lovelace Configurations
