arifroni
March 22, 2021, 7:57pm
797
I want to make the heating curve filled 100% but without the line…only the filling will stay. how can i do that?
type: 'custom:apexcharts-card'
header:
title: Bedroom
show: true
show_states: true
colorize_states: true
update_interval: 10m
graph_span: 1d
apex_config:
tooltip:
enabled: true
yaxis:
- show: true
decimalsInFloat: 0
min: 18
labels:
style:
colors: '#FFB62E'
fontSize: 12px
fontWeight: bold
forceNiceScale: true
- show: true
opposite: true
decimalsInFloat: 0
min: 0
max: 99
labels:
style:
colors: '#FFB62E'
fontSize: 12px
fontWeight: bold
forceNiceScale: true
- show: false
opposite: true
decimalsInFloat: 0
min: 18
labels:
style:
colors: '#FFB62E'
fontSize: 12px
fontWeight: bold
forceNiceScale: true
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 14px
chart:
height: 250px
grid:
show: false
legend:
show: false
fontSize: 12px
height: 40
dataLabels:
enabled: false
stroke:
width: 3
curve: smooth
# fill:
# type: gradient
# gradient:
# type: vertical
# shadeIntensity: 0.8
# inverseColors: false
# opacityFrom: 0.5
# opacityTo: 0
# stops:
# - [0, 50, 100]
series:
- entity: sensor.bedroom_temperature
name: Current
type: line
# opacity: 0
fill_raw: last
float_precision: 1
group_by:
duration: 10m
func: avg
- entity: sensor.bedroom_heating
name: Heating
type: area
color: grey
fill_raw: last
float_precision: 0
opacity: 0.2
group_by:
duration: 10m
func: avg
- entity: sensor.target_temp_bedroom
name: Target
type: line
# opacity: 0
fill_raw: last
float_precision: 1
group_by:
duration: 10m
func: avg
At the moment it looks like this
I want to make this look somewhat like this.
how to use different fill properties for different lines?
interesting observation: if i use secondary y aaxis limit max=100, it sets to 120, but with 99 it sets to 100!!!
formicro
March 23, 2021, 12:09am
798
In reference to Frank question there :https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877/296?u=formicro
- type: 'custom:apexcharts-card'
graph_span: 24h
cache: true
span:
start: day
chart_type: donut
apex_config:
plotOptions:
pie:
donut:
total:
show: true
showAlways: true
formatter: null
Is it possible to display a sensor value, right in the center of a donut ?
lless
March 23, 2021, 6:02am
799
Now, i have 2 elements with current value: legend and header. Header looks better, but him not have function hide series. I try hide header and up legend, but him looks bad. How i may add click function to header or make a legend view like header
markcocker
March 23, 2021, 3:54pm
800
The line can be removed by setting stroke_width=0
For example for a binary sensor:
- entity: binary_sensor.night
name: Night time
curve: stepline
opacity: 0.2
stroke_width: 0
show:
in_header: false
transform: 'return x === ''on'' ? 1 : 0;'
1 Like
markcocker
March 23, 2021, 4:17pm
801
Is there a mechanism to create an axis annotation at a timestamp contained in a sensor? From what I’ve read above Jinja templates are not supported.
In my case X axis annotations for sunrise and sunset, eg:
apex_config:
annotations:
xaxis:
- x: states.sensor.sunrise
label:
text: Sunrise
1 Like
You can use config-template-card to build that for now
markcocker
March 24, 2021, 9:59am
803
Thanks for the hint. Works great…
Card config
type: 'custom:config-template-card'
entities:
- sensor.sunrise
- sensor.sunset
- sensor.zappi_generation
- sensor.harvi
card:
type: 'custom:apexcharts-card'
header:
show: true
show_states: true
colorize_states: true
title: Solar generation
span:
start: day
graph_span: 24h
all_series_config:
stroke_width: 2
type: area
extend_to_end: false
float_precision: 0
color_list:
- yellow
- yellow
- green
- grey
series:
- entity: sensor.zappi_generation
name: Solar on house
group_by:
func: avg
duration: 20min
- entity: sensor.zappi_generation
name: Solar on house
offset: '-24h'
type: line
opacity: 0.2
group_by:
func: avg
duration: 20min
show:
in_header: false
- entity: sensor.harvi
name: Solar on shed
group_by:
func: avg
duration: 20min
y_axis_precision: 0
apex_config:
annotations:
xaxis:
- x: '${new Date(states[''sensor.sunrise''].state).getTime()}'
label:
text: ☼
borderWidth: 0
style:
background: '#0000'
- x: '${new Date(states[''sensor.sunset''].state).getTime()}'
label:
text: ☾
borderWidth: 0
style:
background: '#0000'
yaxis:
- seriesName: Solar on house
decimalsInFloat: 0
- seriesName: Solar on house
show: false
- seriesName: Solar on shed
show: false
- seriesName: Night time
opposite: true
show: false
tooltip:
x:
format: 'ddd dd MMM - HH:mm'
xaxis:
tooltip:
enabled: false
legend:
show: false
grid:
borderColor: '#7B7B7B'
chart:
foreColor: '#7B7B7B'
zoom:
type: x
enabled: true
autoScaleYaxis: true
toolbar:
show: true
autoSelected: zoom
tools:
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
14 Likes
Any ideas why the x - axis hides the dates with a column graph? …changing the graph to line type seems to kind of work, but still it is not displaying all the 7 days.
1 Like
So the Y-axis is showing fractions when the only possible result is a whole number… can I make it only show whole numbers (seconds here)? Only just happened…
gerard33
March 26, 2021, 2:13pm
807
@markcocker That looks great. Can you show me how you made sensor.sunrise and sensor.sunset?sun.sun atrributes directly but that’s not working.
skank
March 26, 2021, 5:05pm
808
Yeah using 1.9.0.dev1 it looks good again
However my history is gone from february i think, will look into it
wrugaian
March 26, 2021, 7:29pm
809
Hi all. I’m lost with y-axis configuration.
I’d like to have Temperature IN (blue) and Temperature OUT (red) on the
same y-axis, but sun.elevation (gray) and sun.sun (area) obviously not.
I don’t know why, but despite my code I have always 4 different axes:
- type: 'custom:apexcharts-card'
graph_span: 1w
all_series_config:
color: '#ff8c00'
stroke_width: 2
fill_raw: last
show:
in_header: true
legend_value: false
extremas: true
header:
show: true
show_states: true
title: Temperatura 1w
apex_config:
legend:
show: false
yaxis:
- seriesname: IN
title:
text: Temperatura
decimalsInFloat: 1
forceNiceScale: true
- seriesname: elevazione
show: false
series:
- entity: sensor.T_IN
name: IN
color: BLUE
- entity: sensor.T_OUT
name: OUT
color: RED
- entity: sensor.sun_elevation
name: elevazione
color: gray
show:
in_header: false
extremas: false
stroke_width: 1
- entity: sun.sun
type: area
transform: 'return x === ''above_horizon'' ? 100 : 0;'
curve: stepline
show:
in_header: false
extremas: false
stroke_width: 0
opacity: 0.05
I think there is a bug, anyway, because if I change my code:
- seriesname: 'IN'
title:
text: Temperatura
decimalsInFloat: 1
forceNiceScale: true
- seriesname: 'elevazione'
title:
text: elev
#show: false
I have this result:
despite the seriesname the y-axis takes the second entity in the bottom list to create the axis itself. If I change the order of the bottom entities, also the axis changes.
Can you help me to understand if I am wrong? Is there a way to force 2 graphs on the same y-axis?
wrugaian
March 26, 2021, 7:51pm
810
I solved… seriesN ame and I understood that I have to create a seriesName=IN also for OUT, putting in 2nd position:
yaxis:
- seriesName: IN
title:
text: Temperatura
decimalsInFloat: 1
forceNiceScale: true
- seriesName: IN
show: false
forceNiceScale: true
- seriesName: elevazione
show: false
Maybe can help someone else…
Airyphyla
March 26, 2021, 8:11pm
811
i have this code, and i would like to calculate the weekly, and daily increase of corona infections. Can someone help me out?
type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:mini-graph-card'
animate: true
entities:
- entity: sensor.netherlands_coronavirus_confirmed
index: 0
font_size_header: 16
hours_to_show: 192
points_per_hour: 0.1
line_color: red
icon: 'mdi:virus'
name: COVID-19 Netherlands (1w)
show:
extrema: true
icon: true
- type: entities
show_header_toggle: false
entities:
- entity: sensor.netherlands_coronavirus_confirmed
icon: 'mdi:account-switch'
name: Confirmed
- entity: sensor.netherlands_coronavirus_recovered
icon: 'mdi:pill'
name: Recovered
- entity: sensor.netherlands_coronavirus_deaths
icon: 'mdi:skull'
name: Deaths```
jlich
March 26, 2021, 11:12pm
812
@bacco007 is this still working for you (Amber Forecasting)? Mine has stopped forecasting as of yesterday. My Amber forecasting sensor appears to have not changed as I am using the data elsewhere.
@RomRider Any ideas? I have tried y_axis_precision and the float_precision in the series as well but I still get decimals in the y axis.
I’ve found its a bit flakey, reporting shorter time periods and sometimes reporting nothing - but this seems to be consistent with what the sensor is reporting, so I’m not sure what’s going on there.
tried setting decimalsInFloat to 0?
No I haven’t… will try.
OK tried in 3 places and just get a red screen in 2 and under apex_config it is either being ignored or no effect
Also tried:
yaxis:
decimalsInFloat: 0
Under apex_charts… nothing
