Thanks for the reply, is the 2 yaxis working a bit different in this card vs the actual apeccharts? The documentation suggests you can do it using seriesname, but I see your post suggests you have to define the max, min ranges manual (may not work well for outside temperatures between winter and summer) and it is limited for how many series in each axis.
No it’s not working differently. The problem with how it works now with ApexCharts is that axis are affected to series, when actually what you’d want is that series are affected to axis.
I found that seriesName is not consistent because for multiple series using the same “fake axis”, the auto-scaling min/max are only based on the first serie.
It probably would work okay-ish though for your use case. However, you have a typo seriesname -> seriesName 
Not sure if this helps, but I use the follow ‘yaxis’ values under ‘apex_config’ to generate the shown chart with 2 visible y axis and 3 fixed scale y axis under a single left y axis. Not auto scale as you are trying, I am kind of a ‘fixed scale’ advocate as you see by my feature request at github
yaxis:
- seriesName: Backyard Govee Temp
title:
text: 'Temperature °F'
show: true
showAlways: true
showForNullSeries: true
opposite: false
reversed: false
logarithmic: false
tickAmount: 6
min: 30
max: 100
forceNiceScale: true
floating: false
decimalsInFloat: 0
- seriesName: Backyard ATC MI Temp
show: false
showAlways: true
showForNullSeries: true
opposite: false
reversed: false
logarithmic: false
tickAmount: 6
min: 30
max: 100
forceNiceScale: false
floating: false
decimalsInFloat: 0
- seriesName: Front Hall ATC MI Temp
show: false
showAlways: true
showForNullSeries: true
opposite: false
reversed: false
logarithmic: false
tickAmount: 6
min: 30
max: 100
forceNiceScale: false
floating: false
decimalsInFloat: 0
- seriesName: 'Backyard Hue Light Level'
title:
text: 'Light Level LX'
opposite: true
show: true
showAlways: true
showForNullSeries: true
reversed: false
logarithmic: false
tickAmount: 6
min: 0
max: 20000
forceNiceScale: true
floating: false
decimalsInFloat: 0
Can you please share you’re code for this graph ?
Here you go.
- type: custom:apexcharts-card
apex_config:
chart:
height: 300px
yaxis:
tickAmount: 5
graph_span: 24h
stacked: true
span:
start: day
offset: -1d
series:
- entity: sensor.energy_grid_usage
name: Grid
color: ROYALBLUE
type: column
show:
legend_value: false
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];
});
- entity: sensor.energy_solar_feedin
name: Solar Export
color: ORANGE
type: column
show:
legend_value: false
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
Thank you. That saves a lot of research 
Thanks for sharing! Always interesting to see the code of beautiful charts. Tried to replicate but my columns are way to narrow so I’m not getting the right effect. Do you know what I need to change, can the width be changed somehow?
Hello. I’d like to make a basic radialBar chart for showing a battery level. However I cannot get it to work. Somehow it always returns a value of 0% (sensor state value is 63). What am I missing?
- type: custom:apexcharts-card
chart_type: radialBar
header:
show: false
series:
- entity: sensor.battery_level
stroke_width: 2
min: 0
max: 100
apex_config:
plotOptions:
radialBar:
hollow:
background: 'transparent'
dataLabels:
name:
show: false
value:
show: true
legend:
show: false
Thank you very much for your help.
Thank you @RomRider for building this resource. I’m planning on making good use of it.
I’ve come up to a roadblock which I think has been discussed above from a couple of different angles but I can’t fathom a fix.
I’m displaying two entities as seperate series on a line graph, Temperature and Humidity. As individual graphs the Y axis auto scales nicely, starting at around 18 centrigrade and rising to around 23. As soon as I combine the two series onto one chart both Y axis (axises… axees?) start at 0 pushing the lines way up to the top of the chart. I’ve read the reference on the apex chart site and it mentions using a function to return suitable minimum levels but I’m not sure how to implement that.
My current code:
type: 'custom:apexcharts-card'
graph_span: 24h
header:
show: true
title: Lucy's room Temperature and Humidity
show_states: true
colorize_states: true
series:
- entity: sensor.lucy_temperature
name: Temperature
curve: smooth
group_by:
func: avg
duration: 30min
- entity: sensor.lucy_humidity
name: Humidity
curve: smooth
group_by:
func: avg
duration: 30min
apex_config:
yaxis:
- title:
text: Temperature
decimalsInFloat: 0
#min: 18
- title:
text: Humidity
decimalsInFloat: 1
opposite: true
#min: 29
You’ll see that I’ve been playing with adding in fixed minimums but currently have that hashed out.
1 Like
Limit number of columns by by displaying aggregated values instead of raw once.
why not use fixed minimums? That will scale a multiple y axis if that is your issue.
I can get it to look like I want using fixed minimums, but it seems very inelegant to hard code that when it works so beautifully with just a single y axis.
There is a range function in the apex docs but it doesn’t appear to be available (I put it in one of mine but no change).
range: Number
range takes the max value of y-axis, subtracts the provided range value and gets the min value based on that. So, technically it helps to keep the same range when min and max values gets updated dynamically
functions are not available through the card. The fact that it starts at 0 seems like a feature/bug of ApexCharts. Nothing much I can do on my side. I think you’re best with setting a min and a max manually. At least for now.
Doesn’t seem to work indeed.
The multiple y-axis seems a bit odd… for some use cases it works, for others, not. That’s as much as you can get for now I think. I’ll try to see if I can submit some issues upstream or maybe look at the code of ApexCharts one day if I have time 
Appreciate the reply. min/max it is.
Hi, ok i made a chart to show my monthly gas and elec usage.
Since its monthly it should only update every day or something
I’m not sure my code is correct though,
can somebody look pls?
type: 'custom:apexcharts-card'
graph_span: 12m
update_interval: 1hour
cache: true
span:
end: month
offset: '-1hour'
header:
show: true
title: Maandelijks overzicht
apex_config:
xaxis:
labels:
format: MM
show: true
showAlways: true
yaxis:
forceNiceScale: false
decimalsInFloat: 0
chart:
type: area
height: 300
stroke:
show: true
width: 1
legend:
show: true
dataLabels:
enabled: false
distributed: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- entity: sensor.maandelijks_energie_dagtarief
type: column
name: Stroom dagtarief
float_precision: 2
group_by:
func: max
duration: 1m
- entity: sensor.maandelijks_energie_nachttarief
name: Stroom nachttarief
float_precision: 2
type: column
group_by:
func: max
duration: 1m
- color: 'rgb(128,128,128)'
entity: sensor.maandelijks_gas
type: column
name: Gas
float_precision: 2
group_by:
func: max
duration: 1m
thank you
All your units are in minutes not in months.
Also grouping by Months is not supported, the best you can do is 30days for eg.
Possible to give me an example? 1m is 1 month no? 1min is mintues i thought
Ok i got it working now
Kinda
type: 'custom:apexcharts-card'
graph_span: 365d
update_interval: 1hour
cache: true
span:
end: month
offset: '-1hour'
header:
show: false
apex_config:
xaxis:
labels:
format: MM
show: true
showAlways: true
yaxis:
forceNiceScale: false
decimalsInFloat: 0
chart:
type: area
height: 300
stroke:
show: true
width: 1
legend:
show: true
dataLabels:
enabled: false
distributed: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- entity: sensor.maandelijks_energie_dagtarief
type: column
name: Stroom dagtarief
float_precision: 2
group_by:
func: max
duration: 31d
- entity: sensor.maandelijks_energie_nachttarief
name: Stroom nachttarief
float_precision: 2
type: column
group_by:
func: max
duration: 31d
- color: 'rgb(128,128,128)'
entity: sensor.maandelijks_gas
type: column
name: Gas
float_precision: 2
group_by:
func: max
duration: 31d
It’s showing like this:
Why is january and february at the end of the chart?
(i’m just using dsmr, so its normal i dont get graphs data before