It’s unrelated to the frontend. It’s probably a bug in ApexCharts.
But the way it is displayed: you have 3 intervals between min and max, so if (max - min) / 3 doesn’t generate a round number, you’ll get decimals in the yaxis
But I never configured it like that. I posted the full card config above.
Love this card
I got dsmrreader running which is giving me monthly usage of gas and elec.
Im trying to put this in a graph but it gives wrong results
i think it has to do with the days/duration i mentioned, should i get rid of it?
Herese how it looks now
The code is
type: 'custom:apexcharts-card'
graph_span: 365d
update_interval: 1hour
cache: true
span:
end: month
header:
show: false
apex_config:
xaxis:
labels:
format: MM
show: true
showAlways: true
yaxis:
forceNiceScale: false
decimalsInFloat: 0
chart:
type: area
height: 300
stroke:
show: true
width: 1
legend:
show: true
dataLabels:
enabled: false
distributed: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- entity: sensor.stroom_dagtarief_per_maand
type: column
name: Stroom dagtarief
float_precision: 2
group_by:
func: max
duration: 31d
- entity: sensor.stroom_nachttarief_per_maand
name: Stroom nachttarief
float_precision: 2
type: column
group_by:
func: max
duration: 31d
- color: 'rgb(128,128,128)'
entity: sensor.gas_per_maand
type: column
name: Gas
float_precision: 2
group_by:
func: max
duration: 31d
That looks very beautiful, how to do activate these numbers? Would you mind sharing this with me?
Looks amazing, could you share the code please?
1 Like
Ah I see what you mean now as I have decimals again…
I have a card for my gas useage, but if i have low values the y axis is wrong with 2 times the same value, what can be wrong here?
That’s because you have 6 tick lines covering small range of data and/or not enough precision for data labels. Either decrease number of tick lines (to 3) or better, increase number of decimals for y_axis - then you will see something like:
- 0.00
- 0.05
- 0.10
- 0.15
- 0.20
- 0.25
oke thx added y_axis_precision: 3, now it look like:
Is it possible to have a more logic step in the y-axis, can not find it in the documentation.
Try to add this to your card, this adds ‘low-level’ Apex configuration to the chart. The forceNiceScale is the trick to have more logical steps. Not sure what the entity on the y-axis is but maybe you can add decimalsInFloat and min/max as well and play a bit with those properties.
apex_config:
yaxis:
- show: true
decimalsInFloat: 0
min: 14
max: 30
forceNiceScale: true
Short explanation: yaxis indicates that you will change your axis, this needs an array for every y-axis in the graph, here it is only one but you can define as many as you look. Then, you should set show to true (maybe that can be omitted), indicate the number of decimals in your label (if you want), indicate the range of values (if you want) and set forceNiceScale to true to make it more logical.
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?