Don’t know how it is exactly programmed, but I can imagine using the same data object for several series identified by the same entity name. But if caching solve that then it’s ok too.
I need to do some tests - for now it seems to m that it really slows the thing down
if you use transform, group_by, etc… it has to run the maths everytime on the whole serie’s history and depending on how much entries you have (several thousands for eg for monthly graphs) this takes time, and it is run only in the frontend.
Don’t expect any request to be fast on a raspberry pi with sensors having a massive history 
Are those aggregations calculated on front-end or backend?
Everything is done in the browser, so frontend. The only thing the backend does is send the card the history when the card updates and only when it updates.
Then going through data multiple times doesn’t depend on rpi but on client machine computing power. Isn’t it?
Just had idea to retrieve data from a server once then iterate through them as many times as needed (on browser side) in order to pass the product to apexcharts
It depends on your browser only.
As I said, based on how this card is built, it’s not something I can and will do. There are too many cases to take into account (offset and transform, being the 2 main ones) and it’s not worth it.
Once the initial history is in cache (first time you load the card after a version update), the request to home-assistant are very small.
Got it. Thanks for your instant feedback
So I’ve looked further and for me it works with exactly that code:
data_generator: |
let now = new Date().getTime();
return [...entity.attributes.data].reverse().map((entry) => {
const lNow = now;
now -= 30 * 60 * 1000;
return [lNow, entry];
}).reverse();
Also you didn’t screenshot your browser console with: console.log(`data as array?: ${Array.isArray(entity.attributes.data)}`)
Unfortunately, it still does not work for me.
I have attached console screenshot. It seems like it is not being seen as an array.
I thought I provide some more info on the data.
This sensor stores the electricity grid usage data for the previous day from 12AM to 12AM. The first value in the list is from 12AM to 12.30AM and the last value in the list is from 11.30PM to 12PM.
Since the data is for the previous day, the data contains no value for today.
I hope this gives a better insight.
Here you go, try with that:
graph_span: 24h
span:
start: day
offset: -1d
series:
- entity: sensor.energy_grid_usage
data_generator: |
let now = start.getTime();
const data = JSON.parse(entity.attributes.data);
return data.map((entry) => {
const lNow = now;
now += 30 * 60 * 1000;
return [lNow, entry];
});
2 Likes
Thanks @RomRider. It worked.
Quick question - Is it possible to add additional values on the Y-axis? The values jump from 0 to 1.
1 Like
Is it possible to inherit the actual color of the value in the states as well (so 883 could be green like in the graph)? I’ve defined the color values within color_threshold.
Keep up with the good work, it’s awesome!
I didn’t implement that yet, but I guess I could if you open a feature request on github 
LOL, makes sense 
similar question: can opacity setting affect legend bullets (if makes sense)
Currently colour of graph may be way different from what presented in bullet
See image above: opacity is implemented to max only
I believe instead of using opacity you can also use color: '#FF000088' for eg. 88 being the opacity (from 0 = 00 to 1 = FF). I just tried and it works for me, including the legend. (It should work with rgba(r, g, b, a) but I think I forgot that use case 
, I’ll fix it Done)
Yes, with:
apex_config:
yaxis:
tickAmount: 5 # or something else
Is there any setting for smoothing the curve even more than what curve: smooth can do?
I can use the following but that doesn’t feel like the optimal way of doing it.
group_by:
func: last
duration: 100min
I am also struggling with the multiple yaxis scales. I would like 2 scales which autoscale to the range of values of the series used in the scales
I believe I have the apex_config as per the documentation for this type of setup, however, the graph shows all 5 scales, and also the 2nd and the 5th are different even though I tried to define them as the same.
Is there something wrong with my config?
- type: 'custom:apexcharts-card'
graph_span: 12h
hours_12: true
header:
show: true
title: 'Upstairs Temperatures'
apex_config:
yaxis:
- seriesname: Garage
decimalsInFloat: 1
- seriesname: Master
decimalsInFloat: 1
- seriesname: Master
decimalsInFloat: 1
- seriesname: Garage
decimalsInFloat: 1
- seriesname: Master
decimalsInFloat: 1
legend:
position: top
stroke:
width: 2
chart:
height: 250px
all_series_config:
stroke_width: 2
type: line
group_by:
func: avg
duration: 5min
curve: smooth
series:
- entity: sensor.filtered_outside_temperature
name: Outside
- entity: sensor.master_temperature
name: Master
- entity: sensor.play_room_temperature
name: Playroom
- entity: sensor.garage_temperature_offset
name: Garage
- entity: sensor.laundry_temperature_offset
name: Laundry
No, the only way is to increase the duration in group_by.
Don’t use seriesName. This post will help you understand how to do it: ApexCharts card - A highly customizable graph card - #247 by RomRider
1 Like