Giter Site home page Giter Site logo

Comments (11)

rosco54 avatar rosco54 commented on May 21, 2024 1

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.

rosco54 avatar rosco54 commented on May 21, 2024 1

@junedchhipa @DannyBen Could you review the comments and alternative solution please and re-assess this issue's bug status. Thanks.

from apexcharts.js.

rosco54 avatar rosco54 commented on May 21, 2024 1

from apexcharts.js.

DannyBen avatar DannyBen commented on May 21, 2024

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.

rosco54 avatar rosco54 commented on May 21, 2024

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.

DannyBen avatar DannyBen commented on May 21, 2024

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.

junedchhipa avatar junedchhipa commented on May 21, 2024

@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.

DannyBen avatar DannyBen commented on May 21, 2024

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.

rosco54 avatar rosco54 commented on May 21, 2024

@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.

DannyBen avatar DannyBen commented on May 21, 2024

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 using xaxis.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.

rosco54 avatar rosco54 commented on May 21, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.