Curious if there is a way to use variables as the template code was copied from button card…? Example use case: I have a lot of almost identical min/max/average/current single entity charts with a fair amount of config per series. Would be nice to template it using a variable or some other means entering the entity_id only once. Perhaps there is a obvious solution I’m just not seeing…?
Well, there’s the all_series_config but I disabled entity from there, I could allow it and it would match your use case I think.
I won’t support variables, as I do not plan to support javascript like in button card.
Would it be possible to have a fill that goes to and from another entity like in the middle graph here?
apexcharts-card/color_threshold.png at master · RomRider/apexcharts-card (github.com)
The use case would be to display the set point of a thermostat with the actual temperature as fluctuations around the set point.
Is it possible to use a secondary y-axis at present? I think the release notes for 1.7.0 mentioned something about extrema not being compatible with a secondary y-axis but I have not found any examples of multiple axis…
Hmm… the latest version seems to screw something with column chart… partially. I’m trying to show weather forecast for my location with min/max temperature as area chart and snow/rain as bars. It was working quite well until today morning I updated chart. Here is how it supposed to look (almost, white area should be column, as cyanish one - to show my intention I had to change graph type from column to area):
When I cahnge both snow and and rain to column, graph does not complete drawing:
Here is the code I use:
type: 'custom:apexcharts-card'
show:
loading: false
apex_config:
chart:
height: 350
fill:
type: gradient
gradient:
type: vertical
fill: dark
shadeIntensity: 0
stops:
- 20
- 100
opacityFrom:
- 0.1
- 0.1
- 1
opacityTo:
- 0.6
- 0.6
- 0.3
plotOptions:
bar:
columnWidth: 50%
yaxis:
- show: true
title: Temp
min: -20
max: 30
- show: false
title: Temp
min: -20
max: 30
- show: true
title: Snow
min: 0
max: 40
opposite: true
- show: false
min: 0
max: 40
graph_span: 6d
span:
start: day
header:
show: true
title: Weather Forecast
series:
- entity: weather.weatherbit_zielonka
type: area
fill_raw: last
extend_to_end: false
color: var(--yellowish)
name: Max
stroke_width: 2
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
- entity: weather.weatherbit_zielonka
type: area
fill_raw: last
extend_to_end: false
color: var(--cyanish)
name: Min
stroke_width: 2
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.templow];
});
- entity: weather.weatherbit_zielonka
type: column
fill_raw: last
extend_to_end: false
color: white
name: Snow
stroke_width: 0
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.snow];
});
- entity: weather.weatherbit_zielonka
type: column
fill_raw: last
extend_to_end: false
color: var(--cyanish)
name: Rain
stroke_width: 0
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.precipitation];
});
BTW. Is there any way to ‘group’ charts per axis and retain dynamic scaling? In my example I had to define same ranges for min/max temperatures to keep it proportional, but this removes scaling. Keeping it fully dynamic per serie causes that it could display lower temp as being higher that max one 
3 Likes
Any error in the javascript console? Did you skip the 1.6.0 version?
I didn’t find any way to make this work so far 
Hello Mirek,
I took over your configuration, unfortunately everything is dark with me.
Do you have any idea why?
I used dark sky.
Is there a way to add a day/night column in this chart?
I have a day/night sensor:
- platform: template
sensors:
day_night:
friendly_name: "Day/Night"
value_template: >-
{% if is_state('sun.sun', 'above_horizon') %}
Day
{% else %}
Night
{% endif %}
icon_template: >-
{% if is_state('sun.sun', 'above_horizon') %}
mdi:weather-sunny
{% else %}
mdi:weather-night
{% endif %}
Chart
type: 'custom:apexcharts-card'
graph_span: 2d
span:
start: day
offset: '-12h'
header:
show: true
title: Temperature Forecast
now:
show: true
label: now
series:
- entity: weather.openweathermap
name: Temperature
unit: °C
attribute: temperature
fill_raw: last
extend_to_end: false
group_by:
func: avg
duration: 1h
- entity: weather.openweathermap
type: line
extend_to_end: false
unit: °C
show:
in_header: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
TBH I’m not sure it’s good choice. AFAIK there is a lot controversy around that. I would left it as option to override HA selected mode.
1 Like
I found the issue related to that. I’ll fix it soon. It has to do with colors. I’ve introduced support for transparency in colors (rgba(r, g, b, a)) but it seems to break apexcharts in some edge cases… So I’ll remove it again.
That’s because @mirekmal is using color variables var(--color-name). Change those to proper colors and it will work.
Yes, something like this should work if you add it to your series
series:
- entity: sensor.day_night
curve: stepline
type: area
# change 0 or 1 to suit your needs.
transform: return x === "Night" ? 0 : 1;
There’s no way to make it scale to the min and the max. At least not for now…
I was thinking the same after having given it some more thoughts… So I’ll probably add it back.
2 Likes
yes, I like this:
- entity: sensor.day_night
curve: stepline
type: area
transform: 'return x === ''Day'' ? 10 : 0 ;'
color: grey
stroke_width: 0
opacity: 0.3
I have some more questions:
a) how can I remove “forcecast” and “Day/Night” in the legend?
b) why is the value of “Netatmo” and “previous” day the same?
type: 'custom:apexcharts-card'
graph_span: 2d
span:
start: day
offset: '-6h'
now:
show: true
label: now
color_list:
- red
- yellow
- grey
- blue
all_series_config:
unit: °C
apex_config:
chart:
height: 300px
yaxis:
tickAmount: 6
header:
show: true
show_states: true
colorize_states: true
series:
- entity: sensor.openweathermap_temperature
name: OW
stroke_width: 2
curve: smooth
extend_to_end: false
- entity: sensor.netatmo_locationxx_temperature
name: Netatmo
type: line
stroke_width: 2
curve: smooth
extend_to_end: false
- entity: sensor.netatmo_locationxx_temperature
name: previous day
offset: '-1d'
curve: smooth
stroke_width: 1.5
opacity: 0.7
extend_to_end: false
- entity: weather.openweathermap
name: forceast
curve: smooth
stroke_width: 1.5
type: line
extend_to_end: false
unit: °C
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
- entity: sensor.day_night
curve: stepline
type: area
transform: 'return x === ''Day'' ? 0 : 10 ;'
color: grey
stroke_width: 0
opacity: 0.3
show:
in_header: false
legend_value: false
1 Like
That is not possible unfortunately.
That is related to how you have built your chart:
- because you use
start: day,offset: -6handgraph_span: 2d: the chart starts at 6pm yesterday and ends at 6pm tomorrow - because you use on top of that offset
-1d: it retrieves 2 days of data (graph_span: 2d) from 6pm yesterday - 1d (= 6pm 2 days ago) to 6pm tomorrow - 1d (= 6pm today).
Which means if you display the chart with your local time < 6pm, both values will always be the same.
So what you want is probably to offset by -2d on your serie.
Also the header always shows the latest available value in the chart for each serie. There’s already a feature request to change the behavior to display the value from “now”
ad b) is there a way for a solution without the requested feature?
no, not yet, that’s why it’s a feature request 
2 Likes
I believe that layout:minimal does not work in conjunction with different yaxis.
Any way one could remove the xaxis completely?
xaxis:
axisborder:
show: false
axisTicks:
show: false
labels:
show: false
that leaves the x axis line, any idea how to remove it?
You have a typo in axisborder, it’s with a capital B
Like that:
xaxis:
labels:
show: false
axisBorder:
show: false
axisTicks:
show: false
tooltip:
enabled: false
1 Like
amazing catch. Thank you, that did it!
Hi ALl,
what is the way to show only the last X minutes or X hours?
- type: custom:apexcharts-card
graph_span: Xh