Hello everyone,
I would like to fill the area underneath a line but I would like it to only be filled until it hits the next line below it.
Can this be done?
Our do I need to create two areas (one below each line so the lower line’s area prevents the upper line’s area from showing)?
So here the area underneath the yellow line should remain empty:
Thank you 
Hi!
I’m playing around with my own energy usage graph and found one strange issue. I want to use a stacked bar graph but the stacking doesn’t work as intended, it’s missing some values!
The strange thing is that for my hourly usage it seems to work, but not for my daily graph.
Look here:
For example, “Freezer” is missing in the daily graph.
Here is the configuration:
type: custom:apexcharts-card
graph_span: 2days
stacked: true
header:
show: true
title: Daily Energy Usage
show_states: false
all_series_config:
type: column
group_by:
func: last
duration: 1day
series:
- entity: sensor.computer_desk_daily_energy
name: Workdesk
- entity: sensor.washing_machine_daily_energy
name: Washingm
- entity: sensor.dishwasher_daily_energy
name: Dishw
- entity: sensor.fridge_and_freezer_daily_energy
name: Freezer
- entity: sensor.heatpump_hallway_daily_energy
name: Heat Ds
- entity: sensor.heatpump_livingroom_daily_energy
name: Heat us
- entity: sensor.it_network_daily_energy
name: IT Netw
- entity: sensor.kitchen_media_daily_energy
name: Kitchen media
- entity: sensor.media_bench_daily_energy
name: Livingr meadia
- entity: sensor.ps4_setup_daily_energy
name: PS4 setup
- entity: sensor.drying_machine_daily_energy
name: Dryer
- entity: sensor.unknown_energy_daily
name: Other
Anyone have a clue?
EDIT: Found it, for some unknown reason, my hourly utility meters were set to 0 when created but not all of the daily ones (was N/A). Using the utility meter calibration service setting the N/A values to 0 fixed the problem.
I have a problem with one of my graphs. This is a wall-display always visible in my living room, running on a rasperry pi.
after some time the blue graph (energy kwh just dissapair, if I F5/refresh browser it comes back.
anyone know why?
code:
Ay yo! Great card. Im using it to show the current electricity prices. I also have a toggle switch which affects the graph shown to toggle with/without VAT on electricity prices. The toggle however does not force update the graph I instead must refresh the page.
Is there a way to force update the graph?
The code is not mine, i just added the VAT toggle.
type: custom:apexcharts-card
graph_span: 48h
span:
start: day
offset: +0H
header:
title: Spotpris EL för Mellansverige, Zon E3 (ink. moms)
show: true
show_states: false
colorize_states: true
hours_12: false
stacked: false
experimental:
color_threshold: true
all_series_config:
show:
legend_value: false
datalabels: false
extremas: true
in_brush: true
float_precision: 3
type: area
invert: false
fill_raw: last
color_threshold:
- value: -1
color: 1E90FF
- value: 2.5
color: '008000'
- value: 3.5
color: DAA520
- value: 4.5
color: FF0000
now:
show: true
label: NU
color: purple
series:
- entity: sensor.spotpris_se3
name: Current day
opacity: 0.5
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"] * (hass.states["input_boolean.nordpool_vat"].state == "on" ? 1:0.8)];
});
- entity: sensor.spotpris_se3
name: Tomorrow
opacity: 0.5
data_generator: |
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"] * (hass.states["input_boolean.nordpool_vat"].state == "on" ? 1:0.8)];
});
apex_config:
chart:
height: 400px
animations:
enabled: true
easing: easeinout
speed: 800
animateGradually:
enabled: true
delay: 150
zoom:
enabled: true
type: x
autoScaleYaxis: true
zoomedArea:
fill:
color: '#90CAF9'
opacity: 0.4
stroke:
color: '#0D47A1'
opacity: 0.4
width: 1
legend:
show: false
floating: true
offsetY: 25
yaxis:
opposite: false
reversed: false
logarithmic: false
decimalsInFloat: 2
labels:
show: true
tooltip:
enabled: true
crosshairs:
show: true
xaxis:
labels:
show: true
rotate: -45
rotateAlways: true
logarithmic: true
stroke:
show: true
curve: stepline
lineCap: butt
colors: undefined
plotOptions:
candlestick:
colors:
upward: '#00B746'
downward: '#EF403C'
wick:
useFillColor: true
markers:
size: 1
grid:
show: true
strokeDashArray: 1
position: front
xaxis:
lines:
show: true
Not sure if you still need this but I was searching and found you post and found the answer
yaxis:
- min: 0
max: 800
decimals: 0
apex_config:
tickAmount: 100
Anyone know?
think I searched all and everywhere…
is there really no easy way to color graphs entities based in being above/below 0? I need to graphs my 3 grid phases, and want them to show their historic state color. Purple when above 0, green when below.
like HomeWizard does it:
see: How to re-create HomeWizard 3-phase graphs in (core or custom) graph card
Apex would seem the to go to card, but there’s no option for this? I did try something like the color_threshold, but again, that colors the whole graph based on the current state.
Please help me out if you have a suggestion? thx!
yep, especially when having more than 1 apexcharts card. it stalls the view and needs a forced reload to get going again
been like that since the beginning though, a very hard card for the system, beautiful as it is
Strange that it has been working since day one and but the last couple of days started being slow. I have about 6 Apex Charts per page and it has been working like a charm until now…
well, dont let my troubles be yours 
maybe its the size of the system, or other cards on the same page. Could be it doesnt love to be on a view with mini-graph card, or the core cards for that matter. And, its not consistent. Currently I can quickly load the test page, this morning it completely broke the dashboard.
As Javascripts nor it’s structures are not my cup of tea, I am asking for a help for data_generator.
These top level return-lines with *.map works individually, but how do I combine two attribute tables together to form 48h data from two 24h tables (today and tomorrow)?
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
});
For apex I’d like to populate the rest of graph
i.e. combine these two apex cards into one
I have this mystery issue. My x axis is not starting from zero?
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 24h
header:
title: Energy price today (snt/kWh)
show: true
span:
start: day
now:
show: true
label: Now
series:
- entity: sensor.nordpool_kwh_dk1_dkk_3_095_025
type: column
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
color_threshold:
- value: 0
color: green
- value: 2
color: yellow
- value: 4
color: red
Anyone knows whats wrong?
I think if you don’t specify a value for the y axis, it will auto fit. If you want to force it to use 0 add this:
yaxis:
- min: 0
Thanks that worked. - But I have orher graphs where i also don’t specify the min. value and they work - so it is a bit strange…
Do you things it’s possible to for exemple have a button for change span.offset ?
Hi, maybe someone can help me:
i’m using code:
type: custom:apexcharts-card
graph_span: 1d
experimental:
color_threshold: true
apex_config:
chart:
height: 170px
header:
title: Electricity prices tomorrow (c/kWh)
show: true
span:
start: day
offset: +1d
series:
- entity: sensor.nordpool_kwh_ee_eur_3_05_02
show:
extremas: true
type: column
data_generator: |
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
});
color_threshold:
- value: 0.06
color: darkgreen
opacity: 1
- value: 0.1
color: goldenrod
- value: 0.25
color: darkred
Data:
current_price: 0.37
average: 0.255
off_peak_1: 0.192
off_peak_2: 0.242
peak: 0.277
min: 0.113
max: 0.411
unit: kWh
currency: EUR
country: Estonia
region: EE
low price: false
tomorrow_valid: true
today:
- 0.113
- 0.162
- 0.162
- 0.162
- 0.162
- 0.194
- 0.262
- 0.315
- 0.351
- 0.398
- 0.362
- 0.322
- 0.186
- 0.163
- 0.162
- 0.306
- 0.316
- 0.295
- 0.37
- 0.381
- 0.411
- 0.274
- 0.162
- 0.12
tomorrow:
- 0.114
- 0.039
- 0.041
- 0.044
- 0.055
- 0.126
- 0.275
- 0.341
- 0.386
- 0.267
- 0.393
- 0.357
- 0.312
- 0.314
- 0.286
- 0.266
- 0.291
- 0.31
- 0.33
- 0.348
- 0.366
- 0.269
- 0.262
- 0.216
raw_today:
- start: '2022-10-13T00:00:00+03:00'
end: '2022-10-13T01:00:00+03:00'
value: 0.113
- start: '2022-10-13T01:00:00+03:00'
end: '2022-10-13T02:00:00+03:00'
value: 0.162
- start: '2022-10-13T02:00:00+03:00'
end: '2022-10-13T03:00:00+03:00'
value: 0.162
- start: '2022-10-13T03:00:00+03:00'
end: '2022-10-13T04:00:00+03:00'
value: 0.162
- start: '2022-10-13T04:00:00+03:00'
end: '2022-10-13T05:00:00+03:00'
value: 0.162
- start: '2022-10-13T05:00:00+03:00'
end: '2022-10-13T06:00:00+03:00'
value: 0.194
- start: '2022-10-13T06:00:00+03:00'
end: '2022-10-13T07:00:00+03:00'
value: 0.262
- start: '2022-10-13T07:00:00+03:00'
end: '2022-10-13T08:00:00+03:00'
value: 0.315
- start: '2022-10-13T08:00:00+03:00'
end: '2022-10-13T09:00:00+03:00'
value: 0.351
- start: '2022-10-13T09:00:00+03:00'
end: '2022-10-13T10:00:00+03:00'
value: 0.398
- start: '2022-10-13T10:00:00+03:00'
end: '2022-10-13T11:00:00+03:00'
value: 0.362
- start: '2022-10-13T11:00:00+03:00'
end: '2022-10-13T12:00:00+03:00'
value: 0.322
- start: '2022-10-13T12:00:00+03:00'
end: '2022-10-13T13:00:00+03:00'
value: 0.186
- start: '2022-10-13T13:00:00+03:00'
end: '2022-10-13T14:00:00+03:00'
value: 0.163
- start: '2022-10-13T14:00:00+03:00'
end: '2022-10-13T15:00:00+03:00'
value: 0.162
- start: '2022-10-13T15:00:00+03:00'
end: '2022-10-13T16:00:00+03:00'
value: 0.306
- start: '2022-10-13T16:00:00+03:00'
end: '2022-10-13T17:00:00+03:00'
value: 0.316
- start: '2022-10-13T17:00:00+03:00'
end: '2022-10-13T18:00:00+03:00'
value: 0.295
- start: '2022-10-13T18:00:00+03:00'
end: '2022-10-13T19:00:00+03:00'
value: 0.37
- start: '2022-10-13T19:00:00+03:00'
end: '2022-10-13T20:00:00+03:00'
value: 0.381
- start: '2022-10-13T20:00:00+03:00'
end: '2022-10-13T21:00:00+03:00'
value: 0.411
- start: '2022-10-13T21:00:00+03:00'
end: '2022-10-13T22:00:00+03:00'
value: 0.274
- start: '2022-10-13T22:00:00+03:00'
end: '2022-10-13T23:00:00+03:00'
value: 0.162
- start: '2022-10-13T23:00:00+03:00'
end: '2022-10-14T00:00:00+03:00'
value: 0.12
raw_tomorrow:
- start: '2022-10-14T00:00:00+03:00'
end: '2022-10-14T01:00:00+03:00'
value: 0.114
- start: '2022-10-14T01:00:00+03:00'
end: '2022-10-14T02:00:00+03:00'
value: 0.039
- start: '2022-10-14T02:00:00+03:00'
end: '2022-10-14T03:00:00+03:00'
value: 0.041
- start: '2022-10-14T03:00:00+03:00'
end: '2022-10-14T04:00:00+03:00'
value: 0.044
- start: '2022-10-14T04:00:00+03:00'
end: '2022-10-14T05:00:00+03:00'
value: 0.055
- start: '2022-10-14T05:00:00+03:00'
end: '2022-10-14T06:00:00+03:00'
value: 0.126
- start: '2022-10-14T06:00:00+03:00'
end: '2022-10-14T07:00:00+03:00'
value: 0.275
- start: '2022-10-14T07:00:00+03:00'
end: '2022-10-14T08:00:00+03:00'
value: 0.341
- start: '2022-10-14T08:00:00+03:00'
end: '2022-10-14T09:00:00+03:00'
value: 0.386
- start: '2022-10-14T09:00:00+03:00'
end: '2022-10-14T10:00:00+03:00'
value: 0.267
- start: '2022-10-14T10:00:00+03:00'
end: '2022-10-14T11:00:00+03:00'
value: 0.393
- start: '2022-10-14T11:00:00+03:00'
end: '2022-10-14T12:00:00+03:00'
value: 0.357
- start: '2022-10-14T12:00:00+03:00'
end: '2022-10-14T13:00:00+03:00'
value: 0.312
- start: '2022-10-14T13:00:00+03:00'
end: '2022-10-14T14:00:00+03:00'
value: 0.314
- start: '2022-10-14T14:00:00+03:00'
end: '2022-10-14T15:00:00+03:00'
value: 0.286
- start: '2022-10-14T15:00:00+03:00'
end: '2022-10-14T16:00:00+03:00'
value: 0.266
- start: '2022-10-14T16:00:00+03:00'
end: '2022-10-14T17:00:00+03:00'
value: 0.291
- start: '2022-10-14T17:00:00+03:00'
end: '2022-10-14T18:00:00+03:00'
value: 0.31
- start: '2022-10-14T18:00:00+03:00'
end: '2022-10-14T19:00:00+03:00'
value: 0.33
- start: '2022-10-14T19:00:00+03:00'
end: '2022-10-14T20:00:00+03:00'
value: 0.348
- start: '2022-10-14T20:00:00+03:00'
end: '2022-10-14T21:00:00+03:00'
value: 0.366
- start: '2022-10-14T21:00:00+03:00'
end: '2022-10-14T22:00:00+03:00'
value: 0.269
- start: '2022-10-14T22:00:00+03:00'
end: '2022-10-14T23:00:00+03:00'
value: 0.262
- start: '2022-10-14T23:00:00+03:00'
end: '2022-10-15T00:00:00+03:00'
value: 0.216
unit_of_measurement: EUR/kWh
icon: mdi:flash
friendly_name: nordpool_kwh_ee_eur_3_05_02
With the result:
I have two isues:
Hey @arva
For the decimals you can add:
float_precision: 3
to the - entity
You can define y-axis behaviour as follows:
yaxis:
- id: y1
decimals: 3
min: 0
And then you have to add
yaxis_id: y1
To all - entity entries in your graph 
which would make the relevant section something like:
span:
start: day
offset: +1d
yaxis:
- id: y1
decimals: 3
min: 0
series:
- entity: sensor.nordpool_kwh_ee_eur_3_05_02
show:
extremas: true
type: column
yaxis_id: y1
float_precision: 3
Hope this helps
Maybe some of the data has a zero value ?
Thank you very much. Now everything is perfect!