So you will (!) have to try yourselves and since the data seems to be current, the options to play around are graph_span: and span:, look at the docs
Thanks, I think I got it:
type: custom:apexcharts-card
graph_span: 1d
header:
show: false
title: TP110 Server
show_states: true
colorize_states: true
yaxis:
- decimals: 2
series:
- entity: sensor.tapo_p110_server_current_power
type: line
show:
legend_value: false
name_in_header: false
datalabels: false
stroke_width: 2
color: rgb(66, 105, 208)
group_by:
func: avg
duration: 30min
- entity: sensor.tapo_p110_server_current_power
type: area
stroke_width: 1
color: rgb(37, 48, 72)
group_by:
func: min
duration: 30min
- entity: sensor.tapo_p110_server_current_power
type: area
stroke_width: 1
color: rgb(37, 48, 72)
group_by:
func: max
duration: 30min
data_generator: ""
Just need to figure out now how to hide the legend and add more space bellow, aka min value + n
I now see (visually) what you meant…the area min/max … 
For the rest…plenty of entries on formatting things in this very long thread/post
@vingerha
How did you get the column transparency over a color-filled area ? No way to me using opacity…Can you share your config of this chart ?
Without seeing your code, I assume uit is the experimental one
type: custom:apexcharts-card
header:
title: Temp
show: true
floating: false
show_states: true
colorize_states: true
graph_span: 6d
experimental:
color_threshold: true
span:
start: day
apex_config:
legend:
show: true
title:
floating: true
align: center
style:
fontSize: 20px
fontWeight: bold
datalables:
enabled: true
formatter: |
EVAL:function (val) {
return "£" + val.toFixed(0);
}
offsetY: -10
background:
enabled: false
style:
colors:
- var(--primary-text-color)
fontSize: 16px
fontWeight: bold
plotOptions:
bar:
labels:
show: true
borderRadius: 5
dataLabels:
position: center
enabled: true
series:
- entity: sensor.weather_forecast_daily_accuweather
name: Accuweather
show:
in_header: false
offset: +6h
type: column
opacity: 0.3
stroke_width: 2
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.temperature];
});
color_threshold:
- value: 5
color: blue
opacity: 0.4
- value: 10
color: cyan
opacity: 0.2
- value: 12
opacity: 0.2
color: green
- value: 23
color: orange
- entity: sensor.weather_forecast_daily_mouans_sartoux
name: MeteoFrance
stroke_width: 2
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.temperature];
});
- entity: sensor.weather_forecast_daily_openweathermap
name: Openweather
offset: +11h
show:
offset_in_name: false
stroke_width: 2
type: area
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.temperature];
});
color_threshold:
- value: 10
color: blue
opacity: 0.4
- value: 12
color: yellow
opacity: 0.1
- value: 14
opacity: 0.2
color: red
- value: 24
color: green
Atleast it did display data but it looks like only 1 record its like it didnt loop the each month of data
The data is old, the card is trying to show the last value only, you need to apply offset / graph_span
@vingerha
You’re right, I’ll try to expose my issue and show my code:
i create a template sensor with historical stats platform that show time per day in % my floor heating is on.
In apex chart i add to this sensor outside temp sensor.
Here is my code:
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
chart:
height: 470px
grid:
show: true
strokeDashArray: 2
borderColor: black
position: front
xaxis:
lines:
show: true
yaxis:
lines:
show: true
graph_span: 6d
span:
end: day
show:
last_updated: true
header:
show: true
show_states: true
colorize_states: true
yaxis:
- id: first
min: 0
max: 100
decimals: 0
apex_config:
tickAmount: 4
- id: second
min: 0
max: ~30
opposite: true
decimals: 1
apex_config:
tickAmount: 4
series:
- entity: sensor.riscaldamento_on_day
yaxis_id: first
show:
header_color_threshold: true
datalabels: true
stroke_width: 15
type: column
color: red
opacity: 0.4
name: Riscaldamento Acceso in % per Giorno
group_by:
func: last
duration: 1 day
- entity: sensor.outside_temperature
yaxis_id: second
stroke_width: 1
curve: smooth
opacity: 0.7
color_threshold:
- value: -4
color: blue
- value: 0
color: cyan
- value: 2
color: green
- value: 4
color: yellow
- value: 6
color: orange
- value: 8
color: red
show:
extremas: true
type: area
fill_raw: last
card_mod:
style: |
ha-card {
background: #EFDECD;
box-shadow: none;
--primary-text-color: black;
}
The chart works well but the columns cover area and i tried many solutions without success. It’s not a problem related to experimental color threshold cause this issue also appears with ‘normal’ color filled area.
Curiosly, if i transdorm the type area in a line:
you can see columns doesn’t cover the line and opacity for it works while for columns doesn’t.
When I saw your graph I wondered how you did it but maybe I did something wrong, however it’s curious.
Thanks anyway for your support
tbh I never looked at this detail but it is ‘odd’ (is it?). I played around a bit and when I put the group_by also on the other entity then it works with me
Have you tried these options?
apex_config:
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0
opacityFrom: 1
opacityTo: 0.5
stops: 10
ENERGY COST ESTIMATE GRAPH
Hey guys, I got my Energy bill.
Yeah
Now I would love to have a Graph spanning over a year showing each month and the past and current Energy Consumtion in kWh.
And also a indicator / bar showing the “average” Energy Consumtion what my Contract is based on.
I got a imput number helper with the estimated yearly consumtion - lets say 6000 kWh.
So the imput number shall be devided by the graph span there should be a line showing the “estimated consumption” for that timeframe.
If need 6000kWh per year and the graph span is 12 month then its 500 kWh per Month.
if the Graph span is 7 days. then it is 115kWh per Day.
Any Idea how I could do it?
Wrapping it in custom config template card (hacs) you can use ‘templates’ for the individual settings
The card cannot guess the span so this will have to be a template too
For the display of the value, you can fake this by using any entity and just put transform in it, example below.
The example value ‘13’ you would then replace by a template from your helper-sensor
Hello,
I am trying to monitor my heating system. I am tracking ‘heating degree days’ and the hours my heating run.
Now I would like to bring them into a ratio to make different weeks comparable with each other.
How can I create an additional serious/line to show the result of the following calculation?
(sum of sensor.living_room_heating_hours_today_total_increasing, sensor.office_heating_hours_today_total_increasing, sensor.bedroom_heating_hours_today_total_increasing)
divided by
sensor.heating_degree_days
Any help would be welcome!
My current code is:
type: custom:apexcharts-card
experimental:
brush: true
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
graph_span: 90day
span:
end: day
stacked: true
yaxis:
- id: first
decimals: 0
min: 0
max: 150
- id: second
opposite: true
min: 0
decimals: 0
- id: third
opposite: true
min: 0
- id: fourth
opposite: false
min: 0
decimals: 0
max: 140
series:
- entity: sensor.heating_degree_days
type: line
yaxis_id: second
group_by:
duration: 7 days
statistics:
type: change
period: week
align: end
stack_group: b
- entity: sensor.living_room_heating_hours_today_total_increasing
type: column
yaxis_id: first
group_by:
duration: 7day
statistics:
type: change
period: week
align: end
show:
datalabels: false
stack_group: a
- entity: sensor.office_heating_hours_today_total_increasing
type: column
yaxis_id: first
group_by:
duration: 7day
statistics:
type: change
period: week
align: end
show:
datalabels: false
stack_group: a
- entity: sensor.bedroom_heating_hours_today_total_increasing
type: column
yaxis_id: first
group_by:
duration: 7day
statistics:
type: change
period: week
align: end
show:
datalabels: false
stack_group: a
- entity: sensor.living_room_temperature
type: line
yaxis_id: fourth
show:
datalabels: false
statistics:
type: mean
period: week
align: end
- entity: sensor.office_temperature
type: line
yaxis_id: fourth
show:
datalabels: false
statistics:
type: mean
period: week
align: end
- entity: sensor.master_bedroom_temperature_2
type: line
yaxis_id: fourth
show:
datalabels: false
statistics:
type: mean
period: week
align: end
Not… you would have to create a template sensor for that
Thank you @vingerha. Follow up question. If I create such a template sensor, I would only solve it for the future. I can’t do the calculation for the past, right?
Or is there any trick to do this for past data?
Indeed, that is the case, and for the future you should also setup the template-sensor to be taken into account of statistics, using proper device_class
EDIT: theoretically you can reconstruct the historical data in the db but then you need to know how to do this and quite often the moments of measured data are not equal, i.e. it will be tricky to sum sensor1 with time 15:00:00 with sensor 2 15:01:00
Thanks @vingerha. Not exactly what I was hoping to hear.
I also used AI (Google Gemini) to query that question. It proposes to use the data_generator.
However, it is showing an error, that an entity is missing.
Any thoughts to bypass the need of having an entity?
/// apexcharts-card version 2.1.2 /// value.series[7] is not a ChartCardSeriesExternalConfig; value.series[7].entity is missing
- type: line
name: Efficency
yaxis_id: third
data_generator: |
const heatingHoursLivingRoom = entity.series[1].data;
const heatingHoursOffice = entity.series[2].data;
const heatingHoursBedroom = entity.series[3].data;
const degreeDays = entity.series[0].data;
const result = heatingHoursLivingRoom.map((livingRoomHours, index) => {
const totalHeatingHours = livingRoomHours + heatingHoursOffice[index] + heatingHoursBedroom[index];
if (degreeDays[index] === 0) {
return 0;
}
return totalHeatingHours / degreeDays[index];
});
return result;
AI is in most cases of 0 value, it will cost more time to analyse what is missing and I am not going to analyse that. Search for other entries in this very-long post, I remain pretty sure that it is not possible.
After one hour of scrolling now i’m feeling less alone
As I already answered to ttmetro… search for “full width” and then you find a.o. my link
ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community