ancan
(Ancan)
September 21, 2022, 10:28am
1
Hi all,
I’m trying to create a chart showing power consumption as a stacked area, that is all values are added onto eachother lite in this example: Stacked Area Chart | Area Charts
For me ApexCharts insist on drawing each area on top on the other, and I can se the contours of underlying areas through the top areas.
What am I doing wrong here?
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
legend:
show: true
header:
show: true
title: Power Consumption
graph_span: 30min
all_series_config:
type: area
group_by:
func: avg
duration: 1min
series:
- entity: sensor.heater_power
name: Heater
color: orange
- entity: sensor.dehumidifier_power
name: Dehumidifier
color: red
- entity: sensor.it_closet_power
name: IT
color: blue
- entity: sensor.salongen_media_power
name: Salongen
color: green
- entity: sensor.other_power
name: Other
color: brown
petro
(Petro)
September 21, 2022, 10:49am
2
There’s an option at the root level to stack the charts.
type: custom:apexcharts-card
stacked: true
apex_config:
legend:
show: true
ancan
(Ancan)
September 21, 2022, 10:58am
3
Thank, but it seems to do the same as when I place it under “apex_config”/“chart”.
I noticed now that when I look at the graph in the dashboard, it shows wrong.
But as soon as I start editing the dashboard, it changes:
ancan
(Ancan)
September 21, 2022, 11:01am
5
Btw, the bottom picture is still wrong. Some strange overlaps just before 12:45.
petro
(Petro)
September 21, 2022, 11:04am
7
Then you should write up an issue against the custom card with what your expectations of stacked should do.
Hi @ancan ,
I’ve got a similar problem. Did you managed to fix it (or raise a bug)? I checked the open bugs and could see a couple on stacked charts but nothing that looked exactly like yours. Thanks.
1 Like
I just had the same issue.
I worked around it by adding (same) grouping to all entities on the chart:
group_by:
func: avg
duration: 10sec
My assumption is the stacking didn’t like the entities data arriving at different times.
1 Like
K3iVi
December 1, 2023, 1:20pm
12
I have also this bug. I cannot figure it out. What I can tell, that it is caused after update.
This is my graph when it is working, I have labels grouped by 1min interval to show them all at once - that is why I have group by in code at the first place. It works sometimes after page refresh/cache deletion. It always works in HA edit page mode.
When there is an update of graph data, result is missing data at the beginning.
type: custom:apexcharts-card
graph_span: 300m
update_interval: 1min
header:
show: true
title: TČ
show_states: true
colorize_states: true
apex_config:
tooltip:
enabled: true
shared: true
plotOptions:
dataLabels:
name:
show: true
value:
show: true
all_series_config:
show:
extremas: false
series:
- entity: sensor.tc_frekvence_kompresoru
name: Frekvence kompresoru
type: area
stroke_width: 0.5
opacity: 0.1
color: green
yaxis_id: watt
group_by:
func: avg
duration: 1min
- entity: sensor.tc_teplota_na_vystupu
name: Výstupní teplota
type: area
stroke_width: 2
opacity: 0.1
color: red
yaxis_id: watt
group_by:
func: avg
duration: 1min
- entity: sensor.tc_teplota_zpatecky
name: Zpátečka
type: area
stroke_width: 2
opacity: 0.1
color: blue
yaxis_id: watt
group_by:
func: avg
duration: 1min
There is no workaround I could find. Trying different settings, group functions etc.
cuongpl
(Cuong Phan)
August 12, 2024, 4:48am
13
The problem does not occur when setting cache: false
In case anyone still has this problem, the solution is described in the issue for this: Stacked Area Charts Don't Stack · Issue #4132 · apexcharts/apexcharts.js · GitHub . Just add the following and it all works beautifully:
apex_config:
chart:
stacked: true
stackOnlyBar: false
PeterAS
November 26, 2024, 6:04am
15
I have a similar non working stack issue:
Working when only having series to be stacked in the graph.
type: conditional
conditions:
- entity: sensor.energi_data_service_tomorrow_valid
state: "False"
card:
type: custom:config-template-card
entities:
- sensor.energi_data_service
card:
type: custom:apexcharts-card
stacked: true
chart_type: line
apex_config:
chart:
type: area
stacked: true
fill:
opacity: 0.4
stroke:
curve: stepline
experimental:
color_threshold: false
brush: true
brush:
selection_span: 1h
apex_config: null
header:
show: true
title: Spot + Cerius + Energinet + Elafgift
show_states: true
colorize_states: true
all_series_config:
float_precision: 2
now:
label: Nu
show: true
color: "#ff0000"
graph_span: 25h
span:
start: day
show:
last_updated: true
series:
- entity: sensor.energi_data_service
type: area
color: "#AD1457"
curve: stepline
name: Elafgift
stack_group: test1
show:
in_header: false
extremas: false
legend_value: true
stroke_width: 0
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.tariffs.additional_tariffs.elafgift*100];
});
group_by:
func: sum
- entity: sensor.energi_data_service
type: area
color: "#FF8F00"
curve: stepline
name: Energinet
stack_group: test1
show:
in_header: false
extremas: false
legend_value: false
stroke_width: 0
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), (entity.attributes.tariffs.additional_tariffs.transmissions_nettarif+entity.attributes.tariffs.additional_tariffs.systemtarif)*100];
});
group_by:
func: sum
- entity: sensor.energi_data_service
type: area
color: "#AFB42B"
curve: stepline
name: Nettarif
stack_group: test1
show:
in_header: false
extremas: false
legend_value: false
stroke_width: 0
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.tariffs.tariffs[index]*100];
});
group_by:
func: sum
- entity: sensor.energi_data_service_uden_afgift
type: area
color: "#0288D1"
curve: stepline
name: Spot
stack_group: test1
show:
in_header: false
extremas: false
legend_value: false
stroke_width: 0
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
});
group_by:
func: sum
yaxis:
- min: 0
max: 310
decimals: 0
PeterAS
November 26, 2024, 6:12am
16
But if i want to add a non stacked series, (In this example ‘Total’ equals the sum of the other values.)
Not Working when adding a not stacked serie.
In this example ‘Total’ at 1am shown as 282 but correctly calculated as 141, as shown above!
Values are stacked anyway - any idears?
type: conditional
conditions:
- entity: sensor.energi_data_service_tomorrow_valid
state: "False"
card:
type: custom:config-template-card
entities:
- sensor.energi_data_service
card:
type: custom:apexcharts-card
chart_type: line
apex_config:
annotations:
position: front
yaxis:
- "y": ${states['sensor.energi_data_service'].attributes.today_mean}
y2: ${states['sensor.energi_data_service'].attributes.today_min.price}
fillColor: "#72cf8b"
opacity: 0.1
strokeDashArray: 5
borderColor: "#ff0000"
label:
borderColor: "#ADFF2F"
borderWidth: 0
borderRadius: 0
text: ${states['sensor.energi_data_service'].attributes.today_mean}
textAnchor: middle
position: right
style:
background: transparent
color: "#ffffff"
fontSize: 15px
fontWeight: 100
fontFamily: Segoe UI
cssClass: apexcharts-xaxis-annotation-label
chart:
type: area
stacked: true
fill:
opacity: 0.4
stroke:
curve: stepline
experimental:
color_threshold: false
brush: true
brush:
selection_span: 1m
apex_config: null
header:
show: true
title: Spot + Cerius + Energinet + Elafgift
show_states: true
colorize_states: true
all_series_config:
float_precision: 2
now:
label: Nu
show: true
color: "#ff0000"
graph_span: 25h
span:
start: day
series:
- entity: sensor.energi_data_service
color: "#AD1457"
stack_group: A
name: Elafgift
show:
in_header: false
extremas: false
legend_value: true
stroke_width: 0
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.tariffs.additional_tariffs.elafgift*100];
});
group_by:
func: sum
- entity: sensor.energi_data_service
color: "#FF8F00"
stack_group: A
name: Energinet
show:
in_header: false
extremas: false
legend_value: false
stroke_width: 0
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), (entity.attributes.tariffs.additional_tariffs.transmissions_nettarif+entity.attributes.tariffs.additional_tariffs.systemtarif)*100];
});
group_by:
func: sum
- entity: sensor.energi_data_service
color: "#AFB42B"
stack_group: A
name: Nettarif
show:
in_header: false
extremas: false
legend_value: false
stroke_width: 0
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.tariffs.tariffs[index]*100];
});
group_by:
func: sum
- entity: sensor.energi_data_service_uden_afgift
color: "#0288D1"
stack_group: A
name: Spot
show:
in_header: false
extremas: false
legend_value: false
stroke_width: 0
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
});
group_by:
func: sum
- entity: sensor.energi_data_service
color: "#00ffff"
stack_group: NotStacked
type: line
name: Total
show:
in_header: true
extremas: true
legend_value: true
stroke_width: 2
opacity: 0.1
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
});
yaxis:
- min: 0
max: auto
decimals: 0