Comments (11)
This was my change but I actually wasn't aware that axis annotations could be bound to series, so it needs to be revisited.
PS. Ok. I am getting confused with point annotations, which I was literally just working on.
I looks like you're trying to create a sparkline chart but without it being bare. The 3.48.0 behaviour is necessary for multi-axis charts when series can be collapsed causing their axes to be hidden and remaining axes to be rescaled etc.
PPS. Rather than yaxis.show: false, why not:
yaxis: {
floating: true,
labels: {
show: false
}
}
from apexcharts.js.
@junedchhipa @DannyBen Could you review the comments and alternative solution please and re-assess this issue's bug status. Thanks.
from apexcharts.js.
from apexcharts.js.
PPS. Rather than yaxis.show: false, why not:
yaxis: { floating: true, labels: { show: false } }
I am confused by the difference between yaxis.labels.show
and yaxis.show
.
From user perspective, I do not see the relation between yaxis.show = false
and the fact that the horizontal annotations are hidden. The way it behaved up until 3.47 was intuitive to me and reflects what I want to do: Hide the yaxis completely, and show horizontal annotations.
Add to that the fact that without adding yaxis.floating = true
, the margin of the left side of the chart from its borders are too wide - so I am also required to use this setting for its side effect, which makes it even less intuitive.
That said, using yaxis.labels.show = false
instead of yaxis.show = false
brings back the horizontal annotations.
from apexcharts.js.
Historically, a yaxis[n] is hidden when the series[n] bound to it is collapsed via the legend etc. Internally, this is done by setting yaxis[n].show = false. The effect has been, and remains, that the chart is redrawn and rescaled. The annotations that reference the hidden yaxis[n] and the hidden series bound to it therefore will usually no longer be useful.
I agree, for your example it was useful and entirely intuitive because it worked, but it is positively unhelpful in other cases. Version 3.48.0 has changed the purpose of yaxis.show slightly to solve a number of other problems.
from apexcharts.js.
So, the only way to get the exact same thing that yaxis.show = false
did before, is to use both yaxis.labels.show = false
AND yaxis.floating = true
? Is it weird only to me? I mean, The floating
declaration seems "internal" - I don't want it to "float", I want it to not be there, and not occupy the several empty pixels it does without floating = true
.
I would understand if yaxis.labels.show = false
in 3.48 would replace yaxis.show = false
- the floating
bit does not sit right with me, especially since this is a common use case.
from apexcharts.js.
@DannyBen There has been breaking changes with the last couple of releases to improve y-axis scales. Some downsides of those improvements are some of the things which you encountered.
In my opinion, I would expect the yaxis to be present to make the yaxis annotations work. If it is not present, the alternative provided by @rosco54 to hide yaxis.labels is a good workaround.
I will have to update the docs on the website to let the users know that in case of yaxis annotations, yaxis has to be shown. Otherwise, they can hide the labels with yaxis.labels.show
from apexcharts.js.
Otherwise, they can hide the labels with yaxis.labels.show
That is perfectly acceptable. But can this setting be made to completely hide, without needing to add the floating: true
bit?
Currently, not adding floating: true
, means you get a larger white space margin where the axis is supposed to be.
If it is a problem, then I guess it will have to do as you know the code and the advantages of the new way better than I do.
from apexcharts.js.
@junedchhipa @DannyBen proposed change in logic:
Y axis annotations will be hidden only when:
the axis is hidden AND all series associated with the yaxis are collapsed.
Note: this is not supposed to be a feature or bug fix. It's specifically for backward compatibility. I'd also just note, there is no xaxis.show
property and the only way hide the xaxis is by using xaxis.floating: true
. So, the alternative method suggested earlier is at least consistent with how you would achieve the same effect there.
Only Y axis annotations need to be treated this way. X axis annotations are always visible except when zoomed and panned away from view, and point annotations explicitly associate with both a yaxis and a series and are hidden when the series is collapsed.
Push request to follow, which also includes some refinements on previous merges to fill some gaps. See the commit comments in the PR for details.
from apexcharts.js.
I am not sure what will be the end result, so I will wait until it is resolved either way.
there is no
xaxis.show
property and the only way hide the xaxis is by usingxaxis.floating: true
The use of floating
in general, and especially when using its side effect to hide the element, is a low level detail. From user perspective - if I may attempt to represent it - it is far from ideal, especially given the otherwise intuitive JSON structure of the library.
from apexcharts.js.
Just pointing out that consistency is important and usually by design. If you find inconsistency, it usually suggests the designers have not intended it to be used a certain way, even if it happens to work.
from apexcharts.js.
Related Issues (20)
- Bar With Group Label
- Multiple-yaxis-scales , 3 series with 2 scales demo broken in 3.47.0 (JS) HOT 3
- Touch support for onMouseMove event Broken HOT 3
- Timeline table zoom-range below 5 minutes doesnt work
- plotOptions.bar.barHeight doesn't work at all HOT 2
- Using One Yaxis for multiple series
- Using One Yaxis for multiple series HOT 1
- Multiline chart - only first series is drawn
- PointAnnotations not hidden when hiding corresponding series persists in v3.48.0
- zoom does not work in combination with logarithmic yaxis with more than one series HOT 1
- There is a bug in ApexCharts v3.48.0 HOT 3
- [Dumbbell chart] Not working properly when xaxis is of type `datetime`
- Safari: trying to resize chart with ResizeObserver on parent element HOT 2
- unknwon reference causing AxesTooltip functionality HOT 4
- Multi-axis chart becomes unresponsive for some values of `yaxis.min`
- Multi-series color support for stroke in bar charts HOT 1
- Zoom in, Zoom out, Selection zoom, reset zoom, Panning and menu controls present above the graphs are not accessible using keyboard.
- Y axis not printed propelly when downloading the chart is zoomed view HOT 1
- AxesTooltip.js is broken HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apexcharts.js.