Scroll maybe a week back and you will find “annotation”, this solves what you want to do 
Edit:
Sorry for screenshot, can’t copy code properly on my phone.
1 Like
Hi
This is great! Who needs jupyter and matplotlib? 
A couple of questions on polish:
- Is it possible to hide the legend completely? I have the states colorised/defined in the title, so it is extraneous
- Is it possible to remove the offset from the name of the series for a series with an offiset. Right now, I define the series name as “yesterday” , but it still appears are “yesterday (-1d)”
- fill_raw = ‘null’ as a series option does not seem to prevent the last value available to be filled out to the end of the chart. I am trying to keep the x-axis fixed spanning a day from midnight, and have the chart fill in as the day’s data are collected. But I get a straight horizontal line of the current value from now.
Hi,
I get strange value for the 1rst item of a hourly chart: it is always far too high compared to what is reported on larger chart, as if it contains the whole day:
Here the charts for 1 day, 2 days and 3 days about the same data:
type: 'custom:apexcharts-card'
graph_span: 2d
header:
title: Conso par Heure
show: true
show_states: true
colorize_states: true
apex_config:
legend:
show: false
span:
end: day
now:
show: true
all_series_config:
stroke_width: 2
show:
legend_value: false
series:
- entity: sensor.linky_hc
name: Linky HC
type: column
transform: return x / 1000;
unit: kWh
group_by:
func: diff
duration: 60min
Looks like it is linked to the “end: day” option:
span:
end: day
Thx.
I’ve made a graph for the price of the electricity in my area and everything seems to work as it intended. However, once I enable the header.show_states I see that the value never changes, but it always reflect whatever is the last group/value returned from data_generator.
Is there a way to tell the apexchart to use the value from “now”?
Another question… is there a way to get rid of the subtitle? It’s redundant with the title in all of my cases.
The state is always ‘OK’, but I’ve also tried using the current date, a valid price and even forcing the refresh of the table, but the price is always the last one in the list. 
cards:
- type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:apexcharts-card'
graph_span: 48h
apex_config:
chart:
height: 200px
header:
title: Price Overview
show: true
show_states: true
colorize_states: true
span:
end: day
offset: +1day
now:
show: true
label: Now
all_series_config:
stroke_width: 2
extend_to_end: false
series:
- entity: sensor.tibber_price_overview
unit: øre/kWt
float_precision: 2
data_generator: |
return entity.attributes.priceRating.hourly.entries.map((item) => {
return [new Date(item.time), item.total * 100]
});
This is one of the most awesome cards I’ve seen so far, thanks a lot and congratulation on your hard work!!
EDIT: Just realized that my request seems to be the exact same as NeoID right above here, sorry I didn’t see it.
I’ve got a question that I couldn’t really figure out an answer for. I’m trending tidewater observation and forecast, and would like the legend at the bottom to show the numbers at “now” instead of at the end of graph. Is that possible? See my example below.
@tormagj, @NeoID, this feature is available in the latest beta already, you can check the dev documentation for in_header: before_now or in_header: after_now
2 Likes
I’ll need to check that, please open a bug on github
yes:
apex_config:
legend:
show: false
Not at the moment, could you please open a feature request?
What you want is extend_to_end: false
That is not possible yet, please open a feature request 
1 Like
THanks for the quick replies. Feature requests done.
One more thing came up. Is it possible to fix the scale for the y-ticks. I can use apex_config.yaxis.tickAmount to set the number of ticks, but I would rather fix the separation (e.g. 25%) and minimum for chart and let the maximum be data dependent.
A much requested feature in HA is easy output of graph images to a notification service like Telegram. Now, with these few lines on the card:
chart:
toolbar:
show: true
Getting a visual in form of .PNG is just two clicks away! I tried to get a url to fetch the .PNG file but I can’t seem to get it. Anyone ideas on getting that .PNG file? An auto local save of the .PNG would also be fine for me.
A lovelace card only runs in your browser. There’s no way to access it from anywhere else or through a URL.
This card won’t help you with what you are trying to achieve unfortunately.
Thanks! My idea was on the legend in the bottom, but I guess it works just as well hiding them and showing in the header. Great stuff.
I do however have a problem with the extremas. The funny thing is that if I delete the data_generator field, the extremas are shown as expected, but when I put back the data_generator it disappears again. Could this be a bug, or is it something I am doing wrong?
Code below (reduced to one curve et.c. for clarity, but still produces the problem in my case). I updated to v1.8.0-dev.6.
type: 'custom:apexcharts-card'
graph_span: 2d
span:
start: day
now:
show: true
label: Now
header:
show: true
title: Tidewater
show_states: true
series:
- entity: sensor.syrevagen_tide_main
show:
in_header: before_now
legend_value: false
extremas: time
name: Prediction
data_generator: |
return entity.attributes.data.map((entry) => {
return [new Date(entry.datetime), entry.prediction];
});
This is wrong, it should be:
data_generator: |
return entity.attributes.data.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.prediction];
});
With that, the extremas should work, hopefully
Ahh! You are perfectly right, it works when adding the getTime(). Thank you!
Great card!
Trying to show data from a sensor like this:
data:
- datetime: '2021-03-02T16:00:00.000Z'
value: 3420
- datetime: '2021-03-02T17:00:00.000Z'
value: 2400
- datetime: '2021-03-02T18:00:00.000Z'
value: 0
This code gives me a working x-axis (dates are correct) and correct units in the legend, but no data points (the chart ist empty)
series:
- entity: sensor.sun_irradiance
type: line
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
What am I missing?
Show us the complete config of your card.
type: 'custom:apexcharts-card'
graph_span: 7d
span:
start: hour
header:
show: true
title: Irradiance
show_states: true
colorize_states: true
series:
- entity: sensor.sun_irradiance
type: line
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
I don’t see anything wrong with that config. Do you mind sharing the complete state of your entity?
would it be too much to ask to give me basic setup for this, I have no idea how to begin to build this…
using:
- type: custom:apexcharts-card
graph_span: 7d
series:
- entity: sensor.wind_bft
results in an error btw:
besides never showing any graphthat was a user error, had not enabled recorder on the entity. Maybe it should have said so, like the core cards: ‘No state history found’ ?
have a look at the x-axis legend…
small progress in the default card config:
- type: custom:apexcharts-card
graph_span: 5d
span:
end: day
y_axis_precision: 1
update_interval: 15min
now:
show: true
header:
show: true
title: Windkracht
show_states: true
series:
- entity: sensor.wind_bft
stroke_width: 2
apex_config:
y-axis:
max: 12
dataLabels:
enabled: true
now, for starters, how will the Y-axis show the number 0-12, and not all decimals out now shows?
Hi,
Thanks for the great card!
Here my card to compare the temperature for 3 days.
The problem is that on the header and in the legend the values for d-1 and d-2 are those for the end of the day (23:59) and not at the same time as the today’s one.
Is it possible to change that? I didn’t found how.
Other thing is that today’s graph shows the line from now on until the end of the day. How to remove it?
Thanks in advance for the help.
graph_span: 1d
span:
start: day
header:
show: true
title: Temperature Ext. sur 3 jours
show_states: true
colorize_states: true
series:
- entity: sensor.0x158d000678e709_temperature
name: Aujourd'hui
- entity: sensor.0x158d000678e709_temperature
offset: '-1d'
name: Hier
- entity: sensor.0x158d000678e709_temperature
offset: '-2d'
name: Avant-hier
now:
show: true
color: '#ff0000'
label: Now