Sorry for the terrible drawing, but does anyone know if it is possible to add a static cost on top of the electricity price as per below (blue bar). I would like to add 0.8 on top of the electricity price that represents the fixed cost. Does anyone have an example of an idea on how to do so?
Do you mean something like this:
3 Likes
Yes, exactly! Looks great!
Would you mind sharing how you get the Nätavgift in there?
1 Like
Hello,
I try to do a stacked chart, with some series “calculated” (with transform option).
#---------------------------------------------------------------
# Graph total
#---------------------------------------------------------------
- type: custom:apexcharts-card
header:
show: true
title: Consommation cumulée (en kW)
show_states: false
colorize_states: true
graph_span: 7day
stacked: true
span:
start: day
offset: '-6day'
series:
- entity: sensor.enedis_puissance_du_jour
type: column
name: Reste de la maison
transform: "return x - hass.states['sensor.tableau_cave_puissance_du_jour'].state;"
group_by:
duration: 1day
func: max
show:
datalabels: true
- entity: sensor.tableau_cave_puissance_du_jour
type: column
name: Reste du tableau de la cave
transform: "return x - hass.states['sensor.ballon_ecs_puissance_du_jour'].state;"
group_by:
duration: 1day
func: max
show:
datalabels: true
- entity: sensor.ballon_ecs_puissance_du_jour
type: column
name: Ballon
group_by:
duration: 1day
func: max
show:
datalabels: true
yaxis:
- min: 0
max: ~7
apex_config:
chart:
height: 600px
The problem is that the hass values (for exemple hass.states[‘sensor.ballon_ecs_puissance_du_jour’].state) are taken as constants, not values from the past. In this example, “Ballon” value is 0.1, but for the previous days it was 5:
Instead of creating new sensors, is there any solution directly in the card to get the correct “historical” values?
1 Like
I have two entries using the same sensor just that the “stacked” one has some additional math in the data_generator, see below. 0.0175 + 0.305 + 0.45 are the “nätavgifter” values that are added on top of my monthly consumption. Also, don’t forget to set stacked: true
- entity: sensor.nordpool_kwh_se3_sek_3_08_025
yaxis_id: first
time_delta: +30m
name: Fasta avgifter
data_generator: >
var output =
entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
return output.map((entry) => { return [new Date(entry.start),
entry.value - entry.value + 0.0175 + 0.305 + 0.45]});
color: rgb(85,75,55)
type: column
stroke_width: 0
show:
legend_value: false
in_header: false
in_chart: true
1 Like
in other words, how to use a “serie” which is the sum (difference in my case), of 2 series, without creating a new sensor?
That looks like a great setup! Would you mind sharing all of the code?
Of course, here’s the complete thing:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
margin: 0px -6px -22px -10px !important;
box-shadow: 0px 0px;
}
cards:
- type: gauge
entity: sensor.kr_spent_today_heltal
needle: true
severity:
green: 1
yellow: 150
red: 300
max: 450
min: 1
unit: kr
name: Kostnad idag
- type: gauge
entity: sensor.total_power_heltal
name: Näteffekt
needle: true
severity:
green: 0
yellow: 4000
red: 8000
min: 0
max: 10000
- type: gauge
entity: sensor.energy_d_heltal
name: Förbrukat idag
needle: true
severity:
green: 0
yellow: 50
red: 100
min: 0
max: 150
unit: kWh
- type: custom:apexcharts-card
config_templates: grid_chart
stacked: true
experimental:
color_threshold: true
header:
show: true
show_states: false
graph_span: 48h
span:
start: day
now:
show: true
color: rgb(220,150,0)
series:
- entity: sensor.nordpool_kwh_se3_sek_3_08_025
yaxis_id: first
time_delta: +30m
name: Timpris el
color: rgb(200,140,0)
data_generator: >
var output =
entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
return output.map((entry) => { return [new Date(entry.start),
entry.value]});
type: column
stroke_width: 0
show:
legend_value: false
in_header: false
in_chart: true
color_threshold:
- value: 0
color: '#00B817'
opacity: 1
- value: 2
color: rgb(200,140,0)
- value: 4
color: rgb(180,0,0)
- value: 6
color: rgb(255,0,0)
- entity: sensor.nordpool_kwh_se3_sek_3_08_025
yaxis_id: first
time_delta: +30m
name: Fasta avgifter
data_generator: >
var output =
entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow);
return output.map((entry) => { return [new Date(entry.start),
entry.value - entry.value + 0.0175 + 0.305 + 0.45]});
color: rgb(85,75,55)
type: column
stroke_width: 0
show:
legend_value: false
in_header: false
in_chart: true
- entity: sensor.energy_h
curve: smooth
yaxis_id: second
color: rgb(215,170,40)
name: Förbrukning
type: line
stroke_width: 0.75
extend_to: end
group_by:
func: delta
duration: 1h
yaxis:
- id: first
min: 0
max: 3
apex_config:
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 10px
fontWeight: normal
colors: rgb(150,150,150)
formatter: |
EVAL:v => `${v.toFixed(0)} kr`
fill:
type: gradient
gradient:
shadeIntensity: 0.5
inverseColors: true
opacityFrom: 0.4
opacityTo: 0
stops:
- 2
- id: second
min: 0
max: 8
opposite: true
show: true
apex_config:
decimalsInFloat: 0
forceNiceScale: true
labels:
style:
fontSize: 8px
fontWeight: normal
colors: rgb(130,130,130)
formatter: |
EVAL:v => `${v.toFixed(0)} kWh`
apex_config:
legend:
show: false
plotOptions:
bar:
columnWidth: 90%
chart:
type: area
height: 190
offsetY: -10
parentHeightOffset: -5
xaxis:
axisBorder:
show: false
axisTicks:
show: true
tooltip:
enabled: false
tickPlacement: between
crosshairs:
show: true
labels:
style:
fontSize: 11px
fontWeight: 1400
offsetX: -1
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
content: 'idag: {{ states.sensor.timpris_avg_idag.state }}'
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
--text-color: rgb(var(--rgb-grey));
margin: -10px 0px -5px 3px !important;
box-shadow: 0px 0px;
}
- type: template
double_tap_action:
action: none
content: 'imorgon: {{ states.sensor.timpris_avg_imorgon.state }}'
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
--text-color: rgb(var(--rgb-blue-grey));
margin: -10px 0px -5px -10px !important;
box-shadow: 0px 0px;
}
And the template ‘grid_chart’ (put it in the “Raw configuration editor”) containing the cosmetics:
apexcharts_card_templates:
grid_chart:
show:
loading: false
header:
show: true
show_states: false
colorize_states: true
apex_config:
yaxis:
labels:
show: true
style:
fontSize: 11px
fontWeight: normal
colors: rgb(150,150,150)
xaxis:
tooltip:
enabled: false
labels:
show: true
style:
fontSize: 11px
fontWeight: normal
colors: rgb(150,150,150)
offsetX: 0
offsetY: -3
axisTicks:
show: true
height: 3
color: rgb(150,150,150)
axisBorder:
show: false
color: rgb(70,70,70)
height: 1
width: 100%
offsetX: 0
offsetY: 0
crosshairs:
show: false
width: 1
position: back
opacity: 100
grid:
show: true
borderColor: rgb(60,60,60)
strokeDashArray: 1
xaxis:
lines:
show: false
row:
colors: rgb(60,60,60)
opacity: 0.2
tooltip:
enabled: true
legend:
showForSingleSeries: true
fontSize: 11px
fontWeight: normal
labels:
colors: rgb(200,200,200)
enabled: true
chart:
height: 340px
zoom:
enabled: true
toolbar:
show: false
tools:
zoom: true
zoomin: true
zoomout: true
opacity: 0.5
style: |
div#header__title {
color: rgb(200, 200, 200);
font-size: 17px;
font-weight: bold;
}
2 Likes
Thanks DrewXT,
Unfortunately I lost some stuff when I migrated to a New system. I barely used the frontend and automation mostly, alsof because heartrate didnt work for me anymore using the addon. I do stille have the steps page if youre interested in that.
If it is just for the conversion, please see my example from kWh into Wh:
> - entity: sensor.solar_total_daily_energy
> name: Summe
> type: column
> color: lightgray
> group_by:
> func: max
> duration: 1h
> transform: return x *1000;
> unit: Wh
1 Like
o that easy 
how I missed that… thank you very much!
- entity: sensor.netto_verbruik
yaxis_id: power
transform: return x /1000;
unit: kW
type: line
name: Verbruik
color: rgb(0,93,136)
group_by:
func: max
show:
legend_value: true
makes it. such better, now need to format the line graph a bit, and have it not show the future…
Has anyone else experienced this bug?
Hiding the grid makes the “now-label” behave wierdly and offsets the flag.
I’m using:
apex_config:
legend:
show: false
grid:
show: false
Not seen it but maybe a workaround could be to match the background color to the grid color?
I’m using a gradient background irl so not an option unfortunately 
If you could share that, I’d appreciate it - thanks heaps 
1 Like
It was group_by that causes this,…
With transform it could be don wath you want ?
If you want Two colors make two entity with stacked option
1 Like
Hi all!
I’be been looking for an answer on a relatively simple graph plotting question, regarding my electricity hour meter data, in kWh, Home Assistant terms as total_increasing and willing to plot the average electricity consumption for period into graph together with some other values that I already have.
Problem: how to get the “values difference” from total_increasing sensor and get the period consumption to be displayed?
Eg; Hour n = x kWh
Hour n+1 = x+0.8kWh
Difference (to graph) = 0.8kWh
Essentially what I want to plot is the outside air temperature measured and then my average electricity consumption grouped by some high number of hours for trends, but I can’t seem to figure out right way to extract the period consumption from ever increasing value.
Have you guys got any example of how you have handled that?
Thanks!
Hi guys,
i’m super new to apex charts and i love it! I have one question for a very simple chart to visualize my daily oil consumption.
Is it possible to remove the date on the bottom when i hover over the data in the chart?
Yes, this is what I’m using:
apex_config:
tooltip:
enabled: true
x:
format: hh:mm
'y':
show: true