Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Axis labels overlap series for 3/4 solid gauge #10635

Closed
kzoon opened this issue Apr 29, 2019 · 3 comments

Comments

Projects
None yet
4 participants
@kzoon
Copy link

commented Apr 29, 2019

Solving #10587 helped the positioning of the start/end axis label in halve solid gauges.

Now I created a 3/4 solid gauge, and run into the next problem: the x-posistion of the labels. The demo http://jsfiddle.net/kzoon/eo6hksd3/ shows that the 0 is too much to the left and the 100 is too much to the right.

Setting yAxis label align right fixes the position of 100: http://jsfiddle.net/kzoon/eo6hksd3/1/
Setting yAxis label align left fixes the position of 0: http://jsfiddle.net/kzoon/eo6hksd3/2/

It would solve my problems if yAxis label alignment on circular axes would be automatic, based on the position of the axis label.
Alternatively, somehow allowing me to set yAxis label alignment per axis label would also work.

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Apr 29, 2019

Thanks @kzoon

At this moment, labels are always center-aligned (no automated alignment) - and when changing this, all labels have the same alignment. We don't have an option to apply different alignment per axis label.

Workaround:
Change labels alignment in chart.events.load callback: http://jsfiddle.net/BlackLabel/ksda19un/

Snippet:

  chart: {
    type: 'solidgauge',
    borderWidth: 1,
    events: {
      load: function() {
        var yAxis = this.yAxis[0];

        yAxis.ticks[yAxis.tickPositions[0]].label.attr({
          'text-anchor': 'start'
        })
        yAxis.ticks[yAxis.tickPositions[1]].label.attr({
          'text-anchor': 'end'
        })
      }
    }
  },
@kzoon

This comment has been minimized.

Copy link
Author

commented Apr 29, 2019

Fair enough automatic left/right alignment would probably fail anyway on circular axes with many labels.
Thanks for the workaround, that will do well for me!

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Apr 29, 2019

Digging a bit more: we already have automatic alignment for radial axes (here), but in your case it would look broken: http://jsfiddle.net/BlackLabel/veLrw4by/ vs http://jsfiddle.net/BlackLabel/veLrw4by/4/ What you want is the opposite effect. At this moment code assumes labels are outside the axis radius, so are aligned in a way they won't overlap the axis itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.