I think I found it. I changed
group_by:
func: max
to
group_by:
func: last
This seems to work for now. I’ll keep an eye on it for the next few days.
Thank you @RomRider for information. I’ve installed the last beta but I can’t figure out, how to use the in_header option.
Can you give some examples?
Hi
Need some help to create a tide forecast. I have a lot of nice ApexCharts with historical data, but struggeling with the datagenerator and future plots. I have this sensor from where I want a nice graph for the upcoming tide water, look at the attributes “flag”:
Also I have created template sensors:
Anyone?
Like so:
series:
- entity: sensor.your_sensor
show:
in_header: after_now
data_generator: ...
Something like this would work:
series:
- entity: sensor.tide_59_41438_xxxx
data_generator: |
return entity.attributes.water_levels.map((level) => {
return [new Date(level.time).getTime(), level.value];
});
1 Like
Using the weather integration from https://community.home-assistant.io/t/deutscher-wetterdienst-dwd/217488
Until now I used a modification of https://community.home-assistant.io/t/deutscher-wetterdienst-dwd/217488/42 to display the irradiation and sun duration forecast for my region, but the ApexCharts Card is a lot better!
It is a >500 line forecast state, I cut away the middle:
data:
- datetime: '2021-03-03T16:00:00.000Z'
value: 640
- datetime: '2021-03-03T17:00:00.000Z'
value: 190
- datetime: '2021-03-03T18:00:00.000Z'
value: 0
- datetime: '2021-03-03T19:00:00.000Z'
value: 0
[cut]
- datetime: '2021-03-13T19:00:00.000Z'
value: 0
- datetime: '2021-03-13T20:00:00.000Z'
value: 0
- datetime: '2021-03-13T21:00:00.000Z'
value: 0
- datetime: '2021-03-13T22:00:00.000Z'
value: 0
forecast_time_utc: '2021-03-03T15:00:00+00:00'
latest_update_utc: '2021-03-03T18:36:27.001888+00:00'
station_id: H247
station_name: LUEDINGHAUSEN-BROCH.
attribution: Data provided by Deutscher Wetterdienst (DWD)
unit_of_measurement: kJ/m^2
friendly_name: Sun Irradiance Luedinghausen-Broch.
icon: 'mdi:weather-sunny-alert'
Recreated the sensor (disregard the name change)
Brilliant RomRider. Thank you so much 
I have a feeling you start to deserve some coffee or beer from the community, I would like to buy you some atleast - so get that link up man 
I installed the integration to test:
Config:
- type: custom:apexcharts-card
header:
show: true
title: Irradiance
show_states: true
colorize_states: true
graph_span: 7d
span:
start: hour
series:
- entity: sensor.sun_irradiance_luedinghausen_broch
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
The recorder is probably not enabled for your entity and that is why it probably doesn’t work. The card only works for recorder-enabled entities (I could probably fix that for data_generator, but for now that’s how it is )
New Release
1.8.0 (2021-03-03)
Hightlights
-
in_header: before_now/in_header: after_now: While using data_generator, display the current value at the current time -
hours_12is back from the dead, with a slight modification in its behaviour (unset = HA locale, set totrue/falseto force a behaviour) -
Introduce the experimental support for a brush (check the documenation for more details):
type: custom:apexcharts-card experimental: brush: true graph_span: 2h brush: selection_span: 10m series: - entity: sensor.random0_100 color: blue stroke_width: 1 float_precision: 0 show: in_brush: true -
Some more options in
series.show:name_in_headerandoffset_in_name
Features
- brush: Support for a timeframe selection chart (#102) (c8dedf7)
- extremas: Display the time on top of your extremas (#97) (d127b37)
-
group_by: With
start_with_last, each bucket will start with the last data from the previous bucket (8669411) -
header: Standard header title home-assistant format using
standard_format(35c5391), closes #35 - series.show: Display the value before/after the current time in the header (2855403), closes #86
- series.show: Hide the name of a serie in the header (b20133d), closes #111
- series.show: Hide the offset from the name of the serie (a46c3f0), closes #112
-
span: Add support for
isoWeek(7abc750), closes #106 - Bring back
hours_12from the dead (676bdb7)
Bug Fixes
-
group_bywould sometimes not work withdata_generator(cfa6871) - header units for
radialBar(6883a8f), closes #105 -
start_with_last:
start_with_lastwould sometimes throw (f5aa2e3) - bug introduced by 591add (b9c9297)
- Display non inverted numbers in legend/tooltip/datalabels when
invert: true(331fe04), closes #96 - extremas was not working with
invert: true(4d06ef6), closes #96 - Optimize
extend_to_endwhen used withgroup_by(591add8) - Support for card-mod >= 3.0 (8348119), closes #104
- extremas: Multi y-axis support (#98) (5c7d742), closes #89
5 Likes
So here’s what you want:
- type: custom:apexcharts-card
graph_span: 1h
series:
- entity: sensor.random0_100
stroke_width: 2
apex_config:
yaxis:
max: 100
min: 0
annotations:
position: back
yaxis:
- y: 33
y2: 0
strokeDashArray: 0
fillColor: red
borderColor: '#00000000'
- y: 66
y2: 33
strokeDashArray: 0
fillColor: yellow
borderColor: '#00000000'
- y: 100
y2: 66
strokeDashArray: 0
fillColor: green
borderColor: '#00000000'
You should get the idea with the example. Do not use now nor extremas with that config, it will not work.
1 Like
Thank you so much for your effort to help!
My recorder settings:
recorder:
purge_keep_days: 2
exclude:
entities:
- sensor.last_boot
- sensor.date
- sun.sun
entity_globs:
- light.*
- sensor.shelly*
Restarted HA and pasted your code in a new card, but still the same, tried different sensors of the integration. I don’t get it? Maybe the word “data” or “value”? Unfortunately I don’t know Javascript… (yet? )
Are you running the latest version (the one I just published)? And made sure the javascript console shows that version?
Also once that is verified, could you try with:
data_generator: |
console.log(entity);
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
It should show you this in the javascript console of your browser:
@RomRider sorry, me too, I don’t know java and I’m stuck with data_generator
What should I put in my example to have the result from the same time yesterday?
- entity: sensor.0x158d000678e709_temperature
offset: '-1d'
name: Hier
show:
in_header: before_now
data_generator: ??????
So, first of all, many thanks for this. Finally my long search has stopped by displaying multiple axis for average and last 7 days electricity consumption.
As you can see from below image, I am able to display, but not sure if data is correct.
Same configuration for single axis in other card (mini-graph-card) is displaying correct data.
Also the data displayed on 03March, is actually data from 02March. Am I doing something incorrect…
- type: custom:apexcharts-card
graph_span: 7d
header:
show: true
title: Electricity Consumption
show_states: true
colorize_states: true
series:
- entity: sensor.daily_energy
type: column
name: Daily Consumption
group_by:
func: max
duration: 1d
- entity: sensor.home_electricity_average_14_days
type: line
curve: straight
name: Average Consumption
group_by:
func: max
duration: 1d
apex_config:
yaxis:
- seriesName: Daily Consumption
decimalsInFloat: 1
- seriesName: Average Consumption
decimalsInFloat: 1
opposite: true
Try with func: last instead of func: max
To know if the array is empty, you’d have to expand what is displayed in the console. What is your browser?
Hi to all,
I havo two questions abiut Apex Chart.
-
is possible to put the last 24hrs wind directions (degrees or cardinal) to a Radar or PolarArea Chart (data is picked up about every minute by a weather station and inserted in recorder)? How?
-
Is possible to implement gauge as FusionCharts types?
thanks!!
now this is getting somewhere:
using:
- type: custom:apexcharts-card
header:
show: true
title: Windkracht
show_states: true
graph_span: 3d
series:
- entity: sensor.wind_bft
stroke_width: 2
apex_config:
yaxis:
max: 12
min: 0
annotations:
position: back
yaxis:
- y: 2
y2: 0
strokeDashArray: 0
fillColor: lightblue
borderColor: '#00000000'
- y: 4
y2: 2
strokeDashArray: 0
fillColor: yellow
borderColor: '#00000000'
- y: 6
y2: 4
strokeDashArray: 0
fillColor: green
borderColor: '#00000000'
- y: 8
y2: 6
strokeDashArray: 0
fillColor: orange
borderColor: '#00000000'
- y: 10
y2: 8
strokeDashArray: 0
fillColor: maroon
borderColor: '#00000000'
- y: 12
y2: 10
strokeDashArray: 0
fillColor: black
borderColor: '#00000000'
with this I can safely explore the set options you suggest, and see if additional ones are relevant. Oddly enough, the color of the graph itself isnt the purple color you show in the screenshot, but seems to be the default HA blue…
Because my default accent color is purple on my dev env 
You don’t need data_generator for that. Just offset like you did.