How can I change the box size and font size of the label showing extrema?
Hi,
how did you geht the values under your radialBar? Can’t see it in your code
Hello everyone,
is it possible to change the color of the title and the font size?
What is the part in GUI called, that is marked with the red square?
It messes up my UX with mobile, as it effectively hides the actual value when trying to click the hour to see the actual value?
Can anyone advise? I am displaying graph of how long each irrigation zone was running. I am displaying last 3 days. I would like to display only days on X-axis. Now, I have gaps between bars where there are hours. Help is appreciated
type: custom:apexcharts-card
graph_span: 3d
span:
end: day
apex_config:
chart:
height: 235px
header:
title: Zones and Water - 3 days
show: true
show_states: false
colorize_states: true
stacked: false
series:
- entity: sensor.irrigation_drippers_house_on_per_day
transform: return (x * 60).toFixed(0) ;
unit: min
name: House
type: column
color: rgb(138, 228, 255)
group_by:
duration: 24h
func: last
stroke_width: 2
yaxis_id: time
- entity: sensor.irrigation_drippers_corner_on_per_day
transform: return (x * 60).toFixed(0) ;
unit: min
name: Corner
type: column
color: rgb(138, 228, 255)
group_by:
duration: 24h
func: last
stroke_width: 2
yaxis_id: time
- entity: sensor.irrigation_field_on_per_day
transform: return (x * 60).toFixed(0) ;
unit: min
name: Field
type: column
color: rgb(235, 203, 183)
group_by:
duration: 24h
func: last
stroke_width: 2
yaxis_id: time
- entity: sensor.irrigation_lawn_south_on_per_day
transform: return (x * 60).toFixed(0) ;
unit: min
name: South
type: column
color: rgb(174, 245, 186)
group_by:
duration: 24h
func: last
stroke_width: 2
yaxis_id: time
- entity: sensor.irrigation_lawn_west_on_per_day
transform: return (x * 60).toFixed(0) ;
unit: min
name: West
type: column
color: rgb(174, 245, 186)
group_by:
duration: 24h
func: last
stroke_width: 2
yaxis_id: time
- entity: sensor.daily_well_water
color: rgb(209, 249, 255)
name: Total
type: area
group_by:
duration: 24h
func: last
extend_to: now
stroke_width: 1
opacity: 0.3
curve: smooth
yaxis_id: water
yaxis:
- id: time
decimals: 0
apex_config:
tickAmount: 4
min: 0
max: ~60
- id: water
opposite: true
decimals: 1
apex_config:
tickAmount: 4
min: 0
max: ~0.5
Is there a way to use a sensor or attribute value for the “name” field? e.g.:
- entity: sensor.solcast_forecast_d3
yaxis_id: header_only
name: "{{ state_attr('sensor.solcast_forecast_today', 'dayname') }}"
color: grey
float_precision: 1
show:
legend_value: true
in_header: true
in_chart: false
The above just results in the name being the raw text in the quotes.
Yes, with config template card:
I use it for the title of my cards:
apex_config:
title:
text: '${''Temperatur: '' + states[''sensor.nibe_105703_40004''].state + '' °C''}'
And there is also card templater, not sure what the diff is between the two options
gadgetchnnel/lovelace-card-templater: Custom Lovelace card which allows Jinja2 templates to be applied to other cards (github.com)
Hi, I am trying to plot a graph of Czech spot electricity prices for the next day using the ote_rate sensor which looks like this:
The sensor attributes in this case aren’t an object but rather a list of 24 costs for individual hours of the next day. I tried the following card configuration but it doesn’t work (the graph displays Loading…):
- type: "custom:apexcharts-card"
graph_span: 1d
span:
start: day
series:
- entity: sensor.current_ote_energy_cost
type: column
data_generator: |
return entity.attributes.map((cost, i) => {
return [new Date(start.getTime() + i * 3600000), cost];
});
Am I doing something wrong?
I haven’t seen anyone with the same issue so I’m asking:
- Is it possible to apply gradient to only one serie?
I have a graph with two series with different yaxis and when I apply gradient/fill both yaxis-graphs get the gradient applied, and I cannot get the fill- to only work on a single yaxis ID…
See green graph:
When i move the fill-config to the apex_config in yaxis-id the gradient is not applied …
Complete code:
type: custom:apexcharts-card
now:
show: true
color: orange
show:
loading: true
graph_span: 2d
update_interval: 2m
span:
start: day
apex_config:
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0
inverseColors: false
opacityFrom: 1
opacityTo: 0
stops:
- 0
chart:
height: 300px
foreColor: var(--secondary-text-color)
dropShadow:
enabled: true
enabledOnSeries:
- 0
blur: 2
animations:
enabled: true
easing: easein
animateGradually:
enabled: true
dynamicAnimation:
enabled: false
grid:
show: false
legend:
show: false
xaxis:
labels:
format: HH
tickPlacement: between
tickAmount: 10
tooltip:
enabled: false
tooltip:
enabled: true
shared: true
x:
show: true
format: dddd - H:mm
fixed:
enabled: true
position: topRight
yaxis:
- id: pris
min: 0
apex_config:
labels:
show: false
- id: forbruk
min: 0
apex_config:
opposite: true
labels:
show: false
series:
- entity: sensor.powersaver_lavest
yaxis_id: pris
name: Pris i dag
extend_to: end
color: green
type: line
curve: stepline
stroke_width: 1.5
show:
extremas: true
data_generator: |
return entity.attributes.hours.map((entry) => {
return [new Date(entry.start).getTime(), entry.price];
});
- entity: sensor.eva_meter_reader_smartenergymetering
yaxis_id: forbruk
name: Forbruk
extend_to: now
color: darkorange
opacity: 0.2
type: area
stroke_width: 2
curve: smooth
show:
legend_value: true
group_by:
func: avg
duration: 1.5h
Hi All,
Am having an issue where apex wont display the value of a climate attribute but it will display the state of a temp sensor that are both rendered in a template sensor. Confusing???
- platform: template
sensors:
temp_sensor1:
unit_of_measurement: "°C"
value_template: "{{ states('sensor.outside_temp') | float }}"
- platform: template
sensors:
inside_set_temp:
unit_of_measurement: "°C"
value_template: "{{ state_attr('climate.inside', 'temperature') | float }}"
Apex will display the temp_sensor1 but it wont display inside_set_temp.
From what I can see in dev tools/templates both templates return a number.
Diagnostically: a very simple implementation.
type: custom:apexcharts-card
entities:
- entity: sensor.inside_set_temp
- entity: sensor.temp_sensor1
and it results in this:
the only difference is that the template inside_set_temp (N/A) renders from an attribute rather than from a state.
Any ideas from apex gurus???
Hey there, is it possible (and if so, how) to plot a datetime on the y-axis?
I have a sensor, based on the Google Maps distance matrix integration, to calculate an ETA, and I’m interested to see how the ETA changes over time.
If I just add the ETA as a sensor (see .yaml below), the plot only shows the year of the datetime (also shown below).
type: custom:apexcharts-card
header:
show: true
title: ''
show_states: true
colorize_states: true
series:
- entity: sensor.eta
I would like a bit finer detail, maybe only hh:mm.
Btw, this is my very first post on this forum, so teach me if I’m doing something wrong 
can you share the code please?
Happy to share, but this thread is very long and I am not sure what post of mine you are referencing.
See if this helps you, I had removed the :
show:
datalabels: true
from each plot range since the post picture, but I put them back in to make it look like my original post. I’m not sure why I removed this option… Picture as it looks today with the option back on is below. Good hunting!
- type: custom:apexcharts-card
header:
show: false
series:
- entity: sensor.home_instantaneous_demand
color: orange
type: column
show:
datalabels: true
group_by:
func: avg
duration: 1h
fill: 'zero'
- entity: sensor.home_instantaneous_demand
color: blue
offset: -30days
type: column
show:
datalabels: true
group_by:
func: avg
duration: 1h
fill: 'zero'
- entity: sensor.home_instantaneous_demand
color: red
offset: -60days
type: column
show:
datalabels: true
group_by:
func: avg
duration: 1h
fill: 'zero'
update_interval: 5m
graph_span: 24h
span:
start: day
cache: true
apex_config:
title:
text: 'SCE Average Watts per Hour Today vs. Last Month vs. 2 Months Ago 24h'
align: 'center'
floating: false
style:
fontSize: '14px'
fontWeight: 'bold'
fontFamily: 'Arial'
chart:
height: 450
yaxis:
show: true
showAlways: true
showForNullSeries: true
seriesName: undefined
opposite: false
reversed: false
logarithmic: false
tickAmount: 6
min: 0
max: 2000
forceNiceScale: true
floating: false
decimalsInFloat: 0
1 Like
I thought this was a neat idea and spent a bit of time on it but am stuck
I used a series where (through data_generator), I made the y-values as timestamps but then I tried the yaxis formatter and ‘nothing’
@RomRider is there an option to format yaxes tiemstamps into ‘anything’ e.g. show the HH:MM?
type: custom:apexcharts-card
header:
title: TEST
show: true
floating: false
show_states: true
colorize_states: true
series:
- entity: sensor.testing_fc2
name: Test
data_generator: |
return entity.attributes.series.map((entry) => {
return [new Date(entry.time), new Date(entry.eta).getTime()];
});
the data (randomly picked):
series:
- time: '2023-05-28T02:00:00Z'
eta: '2023-05-29T02:00:00Z'
- time: '2023-05-29T03:00:00Z'
eta: '2023-05-29T06:00:00Z'
- time: '2023-05-30T04:00:00Z'
eta: '2023-05-29T0e4:00:00Z'
friendly_name: testing_fc2
1 Like
Hi
I have been trying for a while to create two vertical lines representing the sunrise and sunset, and I can’t figure out what else to do. I’m reaching out for help. I’m including my code.
type: custom:apexcharts-card
span:
start: day
graph_span: 24h
header:
show: true
show_states: true
colorize_states: true
all_series_config:
stroke_width: 2
opacity: 0
type: area
apex_config:
grid:
show: false
xaxis:
tooltip:
enabled: false
labels:
style:
fontSize: 10px
legend:
show: true
stroke:
show: true
width: 2
curve: smooth
dataLabels:
enabled: true
annotations:
xaxis:
- x: ${new Date(states['sensor.sun_next_dawn'].state).getTime()}
label:
text: Sunrise ☉
borderWidth: 0
style:
background: '#0000'
fontSize: 10px
- x: ${new Date(states['sensor.sun_next_rising'].state).getTime()}
label:
text: ☼
borderWidth: 0
style:
background: '#0000'
fontSize: 10px
show:
last_updated: true
series:
- entity: sensor.atc_2dab_humidity
name: Humidity
show:
datalabels: true
now:
show: true
thanks
you have use the config-template-card for additional entities
- type: custom:config-template-card
entities:
- sensor.sun_next_dawn
- sensor.sun_next_rising
card:
type: custom:apexcharts-card
span:
.... your code ...
