Some questions:
#1 Why is there such a big space between the highest bar and the values above? There is no value saying 2.4 will be the highest in 24h so I dont understand where this is coming from…
#2
Is it possible to have one more value in the top area without having it displayed in the chart?
I am trying to chart out a energy usage history graph and while it looks really nice, it tends to take forever to load and seems to want to keep refreshing more than every minute. Is there anyway to optimize this?
type: custom:apexcharts-card
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
apex_config:
chart:
height: 250px
update_interval: 1m
all_series_config:
stroke_width: 1
series:
- entity: sensor.s31_garage_freezer_energy_power
name: Freezer
- entity: sensor.s31_desktop_ups_energy_power
name: Desktop
- entity: sensor.s31_washer_energy_power
name: Washer
- entity: sensor.s31_dryer_energy_power
name: Dryer
- entity: sensor.s31_hotwatercirc_energy_power
name: Hot Water Pump
- entity: sensor.s31_espresso_energy_power
name: Espresso
- entity: sensor.s31_patio_heater_energy_power
name: Patio Heater
Is it possible to use the color_threshold with percentual values instead of fixed values?
I would like to split the bars with different colors but now I can only use fixed values like:
color_threshold:
- value: 0
color: green
opacity: 1
- value: 0.5
color: yellow
- value: 1
color: red
Ideally it would be good with something similar to this:
color_threshold:
- value: 0%
color: green
opacity: 1
- value: 50%
color: yellow
- value: 80%
color: red
Hello,
thanks for this great card!
By using thr brush funcion ich have the problem, that the yaxis values for min and max are ignored.
Can anyone help me to solve this problem?
Your colors needs to be defined as '#aabbcc' not aabbcc.
It’s fast on a fast computer, but with 10th of thousand of points it starts to slow down, so you can use group_by to reduce the number of points.
Maybe the previous value just before the time displayed on the chart is above the max you see. Also the chart tries to have “nice” values on the y axis. It’s not perfect but you can change the way it works using the yaxis part of the config.
Yes:
series:
- entity: sensor.xyz
show:
in_chart: false
update_interval doesn’t go in apex_config but is a main config option.
That is not possible, but might be a good idea. You can add a feature request on github, I’ll have a look at it.
It should be:
yaxis:
- id: 1a
min: 22
max: 30
apex_config:
[...]
Might be a bug, probably in the library I use. Please open an issue on github and share your config (not a screenshot of your config).
Hi,
I am wondering whether it is possible to have ticks appear at a fixed interval, instead of fixing their number with tickAmount, e.g. every 25 units. I am letting the min/max float free on a chart, but would like the tick separation to stay fixed.
Hi!
Does anyone know how to specify decimals on hover over values?
Below example 0.25 is rounded to 0.3.
I couldn’t find a decimals options for this in the instructions.
Look for float_precision in the docs.
Hey guys
After update i have not normal state of apexchars graphs. I got loading loop with N/A in main values. But if you click on N/A header you can see sensor values
Tried reinstall addon and setup previous version. Nothing help
type: 'custom:apexcharts-card'
header:
show: true
show_states: true
colorize_states: true
title: Показатели
span:
start: day
graph_span: 24h
all_series_config:
stroke_width: 2
extend_to_end: false
series:
- entity: sensor.bedroom_temperature
group_by:
func: raw
duration: 30min
stroke_width: 2
name: Температура
color_threshold:
- value: 25
color: blue
opacity: 1
- value: 26
color: green
- value: 29
color: red
- entity: sensor.bedroom_humidity
group_by:
func: raw
duration: 30min
stroke_width: 2
name: Влажность
apex_config:
tooltip:
x:
format: 'dddd dd MMM - HH:mm'
xaxis:
tooltip:
enabled: false
legend:
show: false
grid:
borderColor: '#7B7B7B'
chart:
foreColor: white
zoom:
type: x
enabled: true
autoScaleYaxis: true
toolbar:
show: true
autoSelected: zoom
tools:
zoom: true
zoomin: false
zoomout: false
pan: true
reset: true
That’s because your sensor is excluded from history probably or you disabled history altogether
what kind of history and where i can check?
didn’t change nothing just upgrade ha and hacs addon ver
add
history:
to configuration.yaml. no effect
figured out what i have problem with mariadb database after update
looks like recorder is not working
Is it possible to hide certain values on the graph? I have for instance a voltage sensor that reports 0 when not in use, but I just want to hide those values, such that the min and max of my y-axis are still properly divided and not starting from 0.
You can do that with:
transform: return x == 0 ? null : x;
Thanks!! That’s it!
Hi, I am new to this I just installed ApexCharts with HACS and after that restarted home assistant.
But I still get an error message
Custom element doesn’t exist: apexcharts-card.
I use this in my code
type: custom:apexcharts-card
When I look in the config folder on HA I see the file apexcharts-card.js in \config\www\community\apexcharts-card and the file apexcharts-card.js.gz
I do understand English although I am native dutch. If someone could help me to get going I would be very happy.
I am here for help. I created a “dashboard” for my tablet, where I show (among others) 2 graphs. First one is for my temperatures from 4 sensors:
type: custom:layout-card
layout_type: masonry
layout:
width: 400
update_interval: 1hour
cards:
- type: custom:apexcharts-card
graph_span: 1d
header:
show: false
title: Temperatures - last 24 hours
show_states: true
colorize_states: true
all_series_config:
stroke_width: 2
apex_config:
chart:
height: 174px
series:
- entity: sensor.well_sensor_air_temperature
name: Well
type: line
color: '#009900'
fill_raw: last
group_by:
duration: 60min
func: avg
- entity: sensor.espaltherma_outside
name: Altherma Outside
fill_raw: last
curve: smooth
type: line
color: '#0099ff'
group_by:
duration: 60min
func: avg
- entity: sensor.average_garage_temperature
name: Garage Average
fill_raw: last
group_by:
duration: 60min
func: avg
color: '#996600'
type: line
- entity: sensor.zohor_real_feel
name: Real Feel
fill_raw: last
color: '#cc00ff'
type: line
yaxis:
- min: ~-5
max: ~20
decimals: 0
apex_config:
tickAmount: 4
The other is for energy consumption:
type: custom:layout-card
layout_type: masonry
layout:
width: 400
update_interval: 1hour
cards:
- type: custom:apexcharts-card
graph_span: 5d
span:
end: day
apex_config:
chart:
height: 235px
header:
show: true
title: Daily Energy - last 5 days
show_states: true
colorize_states: true
series:
- entity: sensor.daily_energy
offset: '-5d'
name: 5 days ago
type: column
color: orange
group_by:
duration: 24h
func: max
- entity: sensor.daily_energy
name: Current
type: column
group_by:
duration: 24h
func: max
yaxis:
- min: 0
max: ~50
The problem is - most of the time, and not just on tablet, but also on PC, both graphs show no graph lines/bars, values in header states are shown as “N/A” and I see just “Loading” instead. Example:
After I switch to second tab and back to first tab, graph is shows as:
I have to click on one of entities below to hide it, in order ti give it a kick
But for instance, I get loading icon in the corner that loads forever. Hiding it is not a fix 
I am not sure what is it doing. Sometimes, it even stops visualizing data and I have to do full refresh, or close the browser and reopen.
Anyone experiencing the same? Is that the resource issue? am I fetching “too much” data? It is both graphs on my screen that have the same issue.