Hej där!
The graph I posted was from the Mini Graph Card so it’s not Apex. My request was to be able to do the same in Apex (which is possible I was told) 
Oh, im gonna try, please update me if you get it to work, it was beautiful. 
Yep… I hit this idea at the same time you wrote it. this is it
Somehow works. width: 0 or [0, 2] removes border… but at the same time it makes border of area graph thicker. Original value of width: 2 makes border thinner. Actually makes width of area graph border out of control
my code
type: 'custom:apexcharts-card'
graph_span: 1h
update_interval: 30s
span:
end: minute
apex_config:
stroke:
width:
- 0
- 2
- 2
- 2
series:
- entity: sensor.isp1_ping
opacity: 0.2
name: google (max)
curve: smooth
type: column
color: 'rgb(200, 60, 60)'
group_by:
duration: 1m
func: max
- entity: sensor.isp1_ping
name: google (avg)
curve: smooth
type: area
color: 'rgb(255, 160, 160)'
group_by:
duration: 1m
func: avg
- entity: sensor.isp2_ping
opacity: 0.2
name: 39-1 (max)
curve: smooth
type: column
color: 'rgb(60, 60, 150)'
group_by:
duration: 1m
func: max
- entity: sensor.isp2_ping
name: 39-1 (avg)
curve: smooth
type: area
color: 'rgb(160, 160, 250)'
group_by:
duration: 1m
func: avg
The last data in the list ( 0.073 ) is to be displayed now and the first data displayed 48*30min in the past
I actually have 2 sensors with the same attribute data. I want to plot the values form both those attributes in one graph.
Is order of graphs layering controllable or deterministic at least? I cannot find a word in APEXCHARTS documentation. What I found is that column graph is always rendered above area/line ones. I would like to achieve opposite
With regards
BTW I really enjoy this card!
The only way to order stuff is to put them in the order you want in the series, but as you said I think the columns will always be in front. Didn’t find any options in ApexCharts to change that behavior.
Don’t use apex_config to set the stroke width, use stroke_width in each serie.
It’s you who suggested old way 
stroke_width works perfectly.
Thank you.
BTW, I just love this card.
1 Like
Any advice?
That should work:
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();
Nope it doesn’t work. I am just getting a blank chart.
Well, I’ll need a bit more info to help you
Can you share the full state of your entity from the dev-tools please? No screenshot, as yaml please.
And also your current card configuration.
This is the state of one of the sensors.
state: 4.1
usage date: 09/02/2021
data:
[0.084,0.079,0.071,0.079,0.082,0.071,0.079,0.08,0.072,0.075,0.081,0.075,0.021,0,0.055,0,0,0.004,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.172,1.108,0.198,0.329,0.258,0.161,0.141,0.133,0.135,0.134,0.123,0.105,0.097]
Hope this is what you want.
This is current card configuration.
type: custom:apexcharts-card
graph_span: 1d
span:
start: day
series:
- entity: sensor.energy_grid_usage
data_generator: |
let now = new Date();
return [entity.attributes.data].reverse().map((entry) => {
const lNow = now;
now -= 30 * 60 * 1000;
return [lNow, entry];
}).reverse();
So first of all, you didn’t copy exactly what I put in the code (it’s missing ... for eg and it will not work without and also the getTime() part)
Also are you sure that data is an array and not a string?
can you add a console.log(`data as array?: ${Array.isArray(entity.attributes.data)}`) just after let now = new Date().getTime(); and screenshot the result in your browser console?
Alright, I’ll look further later today.
1 Like
I want to plot the data similar to this chart. The green bars come from the data attribute of one sensor and the blue bars come from the data attribute of another sensor.
RomRider,
just wonder… if the card is configured to use the same series of data multiple times (ie for min, avg, max on the same graph), is it retrieving a sensor history multiple times or only once using it as many times as needed?
It is done multiple times, once for every entry in series, but only from the last entry’s timestamp in the cache (so unless you disable the cache, it should only retrieve a couple of states which is fast). Not something I’ll be able to optimize because of how the cache/features of this card work.