improve labels on axes with rangebreaks

[archmoj]

Fixes#5129 and fixes#5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

[alexcjohnson]

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:

But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:

Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:


Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):

Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:

A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:

And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:


Finally we get to actual year ticks and things look good again:

Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

[alexcjohnson]

💃 Whew, nice job, that took persistence!

[archmoj]

Fixes#5129 and fixes#5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

[alexcjohnson]

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:

But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:

Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:


Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):

Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:

A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:

And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:


Finally we get to actual year ticks and things look good again:

Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

[alexcjohnson]

💃 Whew, nice job, that took persistence!

[archmoj]

Fixes#5129 and fixes#5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

[alexcjohnson]

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:

But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:

Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:


Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):

Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:

A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:

And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:


Finally we get to actual year ticks and things look good again:

Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

[alexcjohnson]

💃 Whew, nice job, that took persistence!

[archmoj]

Fixes#5129 and fixes#5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

[alexcjohnson]

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:

But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:

Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:


Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):

Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:

A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:

And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:


Finally we get to actual year ticks and things look good again:

Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

[alexcjohnson]

💃 Whew, nice job, that took persistence!

[archmoj]

Fixes#5129 and fixes#5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

[alexcjohnson]

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:

But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:

Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:


Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):

Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:

A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:

And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:


Finally we get to actual year ticks and things look good again:

Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

[alexcjohnson]

💃 Whew, nice job, that took persistence!

[archmoj]

Fixes#5129 and fixes#5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

[alexcjohnson]

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:

But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:

Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:


Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):

Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:

A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:

And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:


Finally we get to actual year ticks and things look good again:

Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

[alexcjohnson]

💃 Whew, nice job, that took persistence!

[archmoj]

Fixes#5129 and fixes#5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

[alexcjohnson]

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:

But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:

Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:


Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):

Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:

A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:

And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:


Finally we get to actual year ticks and things look good again:

Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

[alexcjohnson]

💃 Whew, nice job, that took persistence!

[archmoj]

Fixes#5129 and fixes#5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

[alexcjohnson]

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:

But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:

Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:


Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):

Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:

A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:

And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:


Finally we get to actual year ticks and things look good again:

Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

[alexcjohnson]

💃 Whew, nice job, that took persistence!