You can use update_interval instead of relying on the update of the sensor.
That’s what I’ve done, but you can see it’s not working (things have been playing for over 30m)
type: custom:apexcharts-card
graph_span: 1h
update_interval: 5sec
stacked: true
all_series_config:
show:
extremas: false
opacity: 0.1
fill_raw: zero
now:
show: false
label: Now
color: FF0000
header:
show: true
title: 24H Watching Statistics
show_states: true
colorize_states: true
series:
- entity: sensor.tautulli
attribute: stream_count_direct_play
name: Direct Play
curve: stepline
type: column
show:
datalabels: false
in_chart: true
float_precision: 0
- entity: sensor.tautulli
attribute: stream_count_direct_stream
name: Direct Stream
curve: stepline
type: column
show:
datalabels: false
in_chart: true
float_precision: 0
- entity: sensor.tautulli
attribute: stream_count_transcode
name: Transcode
curve: stepline
type: column
show:
datalabels: false
in_chart: true
float_precision: 0
apex_config:
legend:
show: true
position: bottom
plotoptions:
bar:
borderRadius: 10
xaxis:
tooltip:
enabled: false
Hello,
I would like to know if there is something to display the time serie by cumulate the value with the previous. Ex: "transform: return Y + (Y-1) "
Would you mind trying without curve: stepline please?
I’m trying to add to my chart when the AC turns on, and I’ve done it, but in a really janky way. What I’ve done is:
transform: 'return x > 100 ? 60 : null;'
but what I want is:
- When the AC is on, say ‘On’ vs 60
- A vertical line that fills from top to bottom vs being 60.
Help and thank you so much!
Full YAML Code
type: custom:apexcharts-card
graph_span: 2d
all_series_config:
stroke_width: 1
group_by:
func: max
fill: last
header:
show: true
show_states: false
colorize_states: false
title: Temp Overlay
apex_config:
grid:
show: false
legend:
show: true
tooltip:
shared: true
series:
- entity: sensor.temp_sensor_001_temperature
type: line
name: '1'
- entity: sensor.temp_sensor_002_temperature
name: '2'
type: line
- entity: sensor.temp_sensor_003_temperature
name: '3'
type: line
- entity: sensor.temp_sensor_004_temperature
name: '4'
type: line
- entity: sensor.temp_sensor_005_temperature
name: '5'
type: line
- entity: sensor.6_channel_energy_meter_ct3_watts
name: AC
type: area
transform: 'return x > 100 ? 60 : null;'
unit: ' '
- entity: sensor.openweathermap_temperature
name: Weather
type: area
I tried the straight option.
Same strange behaviour:
I think that gaps on the apexcharts graphs should be same as on the stock graph.
Correct, I’ve just checked and update_interval is broken, I’ll need to look into it.
No, that’s different, I’ll need to investigate.
Please open a github issue as it’s easier for me to track it and update you.
Hi customizing professionals, is it possible to format the series name, in the example below? I would like to change both the positioning and font/color.
series:
- entity: sensor.aqaratemp1_temperature
type: area
name: '>>>>How do i format this text?<<<'
curve: smooth
stroke_width: 3
color: '#1188db'
opacity: 0.15
group_by:
func: last
duration: 4h
fill: last
Hi
I’m starting to play with this card and here is something I can’t manage: I would like to fill the area below a line depending on the status of a switch. So I added a series based on the switch status, transformed to get the value of the sensor. However, I only get a on/off type of chart!
Any idea of what I am doing wrong?
Here is the code:
header:
show: true
title: Bureau
show_states: false
colorize_states: true
all_series_config:
stroke_width: 2
type: line
extend_to_end: true
series:
- entity: sensor.temperature_bureau
name: Température mesurée
curve: smooth
group_by:
func: avg
duration: 15min
- entity: climate.bureau
name: Consigne
attribute: temperature
curve: stepline
- entity: switch.chaudiere
transform: 'return x === ''on'' ? hass.states[''sensor.temperature_bureau''].state: 0;'
type: area
curve: stepline
stroke_width: 0
color: red
and the result:
thanks for your help!
This card is amazing. Thank you! I’ve been using it for a variety of graphs. I’m having a bit of trouble with the colorization of my air quality graph and was hoping form pointers. I know this is an experimental feature, and I would be happy with only colorizing the numbers in the header (if I could colorize both the lines and the numbers, that would be a bonus). Here’s the code:
type: custom:apexcharts-card
header:
show: true
title: Air Quality
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- entity: sensor.waqi
name: World AQI
- entity: sensor.airnow_aqi
name: AirNOW
- entity: sensor.purpleair_outdoor_aqi_average
name: PurpleAir
curve: smooth
all_series_config:
stroke_width: 2
show:
header_color_threshold: true
legend_value: false
color_threshold:
- value: 0
color: green
- value: 50
color: yellow
- value: 100
color: orange
- value: 150
color: red
- value: 200
color: purple
yaxis:
- min: 0
max: 200
apex_config:
tickAmount: 4
Here is the graph it generates:
Several questions:
- Is there a way to fix the gradient of the coloring in the chart?
- If the chart itself cannot be fixed, can I disable coloring for the chart but keep it for the numbers in the header?
Thank you, this worked perfectly!
That is possible if you use group_by with func: sum. It will sum all the values over duration. It might not be exactly what you are looking for though…
You’ll have to use card-mod for that. At least for now.
You assume that:
transform: 'return x === ''on'' ? hass.states[''sensor.temperature_bureau''].state: 0;' is using the history for the other sensor, but it’s not. hass.states[''sensor.temperature_bureau''].state always returns the latest value of the sensor, not the one aligned with the history point.
A suggestion might be to use a second y axis with min = 0, max = 1 to chart on/off with 0/1, but it’s going to take the whole height of the chart.
Yes, that is a bug in the library I use. Use fill_raw: last on each serie to fix it
2 Likes
thanks for your feedback
alternatively, is there a way to change the color of the line for sensor.temperature_bureau depending on the status of switch.chaudiere ?
Many thanks @RomRider! Here is my new code with the suggested bug fix and the AQI chart (for anyone who might be interested):
type: custom:apexcharts-card
header:
show: true
title: Air Quality
show_states: true
colorize_states: true
apex_config:
legend:
show: false
experimental:
color_threshold: true
series:
- entity: sensor.waqi_portland_oregon_usa
name: World AQI
- entity: sensor.airnow_aqi
name: AirNOW
- entity: sensor.purpleair_outdoor_aqi_average
name: PurpleAir
curve: smooth
all_series_config:
stroke_width: 2
show:
header_color_threshold: true
legend_value: false
fill_raw: last
color_threshold:
- value: 0
color: green
- value: 50
color: yellow
- value: 100
color: orange
- value: 150
color: red
- value: 200
color: purple
yaxis:
- min: 0
max: 200
apex_config:
tickAmount: 4
Hi Mattias,
thank you so much for sharing your amazing work. I finally managed to have the chart for my router traffic like I wanted (dynamic kb/mb). I merged the one I made with 2-3 things I learned from your code. So happy about the result. ApexCharts is amazing (great job @RomRider) and your use of it is really inspiring (Unifi Style Radial Sensor is gorgeous). 
The uptime tile is made with uptime-card and a binary_sensor. I was wondering if it could be made with ApexCharts, but it goes way beyond my ApexCharts knowledge, I just started…
Thanks again to both of you, lot to learn now…
Alessandro
2 Likes
1 Like
Thanks a lot for the heads-up. I’m sure it will be available sooner or later. I’m very satisfied about uptime-card for now, so it’s not really a priority issue for me.