I removed y_axis_precision and added:
yaxis:
- show: true
decimalsInFloat: 3
forceNiceScale: true
but result is the same
Did you add yaxis and the other items to the apex_config or at the same level/indentation as series?
Like:
type: ‘custom:apexcharts-card’
series:
# all your series
apex_config:
yaxis:
- show: true
- forceNiceScale: true
At the apex config level
This truly is one of the best cards for HA!
One question: Why does the color_threshold seem to vary with the scale of the y-axis? See below for example.
With a large interval on the y-axis:
With a smaller interval on the y-axis (line with high numbers hidden):
Code:
I would expect the green-to-red transition to be the same for the SCD30 (bottom line in the first graph that’s not hidden in the second graph), but it in the first picture the green transitions into orange color at lower numbers than in the second. Did I do something wrong in the config?
EDIT: Fixed with fill_raw: last!
anyone any idea?
hello
I’m trying to migrate from mini-graph to apex. I’m struggling with details…
Short version:
how to remove all margins/empty areas around the graph like done with layout: minimal.
Long version
here is original I want to achieve:
here are my findings.
The graph looks very close to what I want when I use layout:minimal (see above). But using layout makes impossible to use any custom settings, incl those in apex_config. For this instance, it’s not possible to set
min and max for each axis.Se next image, which is based on the same code. the difference is only in existence of layout attribute.
Shouldn’t it work opposite way? Shouldn’t layout be allowed to be overridden by custom parameters?
I decided to go harder way exploring every apex config parameter. This is what I’ve achieved so far
Two major issues I have are:
- area under graph: it remains even after moving the legend to the top
- area on the left side of the graph. it remains after disabling rendering of Y-axis legend and ticks. Actually the margin remains on both sides.
Interestingly, changing minWidth/maxWidth and minHeight/maxHeight of labels to zero has impact on graph rendering even since rendering labels is disabled (show: false). Image above reflects those values set to zeroes. Without that, left and bottom margins are even bigger.
And here is complete code:
type: 'custom:apexcharts-card'
style: |
ha-card {
border-radius: 10px !important;
box-shadow: rgb(0 0 0 / 30%) 0px 1px 3px 0px !important;
margin-left: 13px;
margin-right: 13px
}
hours_12: false
graph_span: 24h
apex_config:
legend:
position: top
chart:
height: 126px
redrawOnParentResize: true
grid:
show: false
dataLabels:
enabled: false
xaxis:
lines:
show: false
labels:
show: false
minHeight: 0
maxHeight: 0
axisTicks: false
yaxis:
- min: 10
max: 40
labels:
show: false
minWidth: 0
maxWidth: 0
axisBorder:
show: false
axisTicks:
show: false
- min: 40
max: 90
labels:
show: false
minWidth: 0
maxWidth: 0
axisBorder:
show: false
axisTicks:
show: false
series:
- entity: sensor.pcroom_temperature
color: var(--accent-color)
name: temp
stroke_width: 1
type: area
opacity: 0.2
- entity: sensor.pcroom_humidity
color: '#3498db'
name: hum
stroke_width: 1
type: area
opacity: 0.2
Could you help me with formatting the graph into what I’m looking for?
with regards
Hi!
I recently discovered this wonderful card which so far does a very good job for me.
I have a scenario that I wonder if it’s feasible.
For my swimming pool, I have a water temperature sensor, and a pump activated sensor.
Being plugged somewher on the circuit pipes, the temperature sensor only have relevent information when the pump is activated.
I’m able to graph the pump status, and the temperature.
I’d really like to filter the temperature data to whether pump is activated.
Something like (in pseudo code) :
series:
- entity: switch.pool_pump
transform: 'return x == ''on'' ? 1 : 0;'
- entity: sensor.pool_temperature
transform: 'return switch.pool_pump == 1 ? sensor.pool_temperature : null;'
Is such thing feasible ?
Thank you a lot.
is it possible to produce this kind of curve?
I use ApexCharts to plot the humidity in my bathroom. A rule runs on a Tasmota flashed switch to turn on a fan in the bathroom when the humidity reaches a threshold and runs until another humidity threshold is reached. The switch pushes out on/off messages. Is it possible to overlay the on (say 1) and off (say 0) value onto the humidity graph?
I think this looks like what I did:
Add a serie which looks like
- entity: switch.fan1
transform: 'return x == ''on'' ? 1 : 0;'
type: area
curve: stepline
stroke_width: 0
=> draw switch.fan1 history by transforming on/off status to 1/0 decimal value. Draw as area/stepline/0 width to hightlight the whole vertical area of the graph.
Then in apex_config, configure the y axis with:
apex_config:
yaxis:
- show: false
decimalsInFloat: 0
min: 0
max: 1
tickAmount: 1
=> for the fan serie, don’t show the y axis but have 0 value on the bottom and 1 on the top.
You have to adapt the yaxis item to match your series index, ie is the serie is the 2nd serie, don’t forget to have a yaxis config for the 1st serie first 
3 Likes
Thanks for this snippet. Works a treat and gives me interesting insight
The card configuration is as follows if anyone is interested
type: 'custom:apexcharts-card'
header:
show: true
title: Humidity Trend
show_states: false
colorize_states: true
graph_span: 24h
series:
- entity: sensor.tmr01_htu21_humidity_ensuite
name: HTU21
type: line
- entity: switch.deta01_fan_ensuite
transform: 'return x == ''on'' ? 1 : 0;'
type: area
curve: stepline
stroke_width: 0
apex_config:
yaxis:
- show: true
decimalsInFloat: 0
- show: false
decimalsInFloat: 0
min: 0
max: 1
tickAmount: 1
3 Likes
how to use transform to get a percentage? eg. i have a sensor value of X. i want to plot the percentage of X in Y. So i want (X*100)/Y.
I am trying to find some speed optimizations. I have a very slow tablet for my Wall Panel instance, and it seems the ApexCharts is somewhat resource hungry. Everything works per se and looks great, but all the animations on the panel slow down when the ApexCard starts updating. I figure I might give up on some details, in order to speed things up.
Caching should already be used, but seems that there is still a lot happening on each update for some reason.
Assuming the transform etc calculations take place in the end device rather than on the home assistant runner, it might make sense to do groupings by etc on the assistant runner machine instead of in each client. Anyone that has had any similar concerns, or some best practices to share? Or is there some way to make the caching even more effective - only update with new info for instance?, which I guess would take away the need for more specific solutions…
2 Likes
Hey guys,
I want to log the daily increase of the corona infections, also i would like the graph to show how much the increase or decrease is of the infections relative to previous day… I have no idea where to start. Could anyone help me with this?
thanks in advance!
Hi everyone,
is there a chance to get the dotted “axistick”-lines solid and maybe in another color?
The apexscharts seem to have that option:
EDIT: Nevermind the code below: it’s really only for the axisTicks.
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
width: 6,
offsetX: 0,
offsetY: 0
I’m looking for the dotted horizontal lines in the graph:
Most preferrably i’d like them to be solid and in 50% black 
Or can i, alternatively, get rid of them without the loss of everythinge else (i dont wanna use ‘minimal’ on this)?
Thanks.
in apex_config:
apex_config:
xaxis:
lines:
show: false
look at about 10 posts above yours.
there is my post with screenshots of graphs without those lines.
you find the code over there too.
I believe colour can be changed - see apex original documentation for details. it’s pretty clean to read
Thanks… I already tried your code, but it doesn’t work for me.
Maybe i’m doing something wrong here:
apex_config:
xaxis:
lines:
show: false
yaxis:
show: true
decimalsInFloat: 0
min: 0
max: 100
tickAmount: 4
axisTicks:
show: false
lines:
show: false
yeah, partially my bad. it’s yaxis.
With yaxis it might be tricky. It might depends on number of y/axes. If there are more than one you may need to set attributes it for each one separatelly - at least try it. see my mentioned example.
If still not work provide complete code of your card.
Now I’m looking at my code and there is no disabling lines for yaxis… maybe other options do that
anyway if you copy apex_config from my source code it has to work. I did that trying all options from apex configuration. some are unnecessary others are.
Ok, worked it down based on your code
So the part i was looking for is
grid:
show: false
That is disabling the dotted horizontal lines.
Sadly, there doesn’t seem to be any available styling option, like solid or color. So it’s just on or of (for now).
There is:
grid:
show: true
strokeDashArray: '0'
borderColor: '#323232'
This is getting me what i wanted:
Thank you.