Tick Collision #8983 too aggressive when Font Rotation is used

[devenbj]

Expected Behavior

specified tick count matches the displayed tick count

Current Behavior

some ticks disappear, though there is no collision and a tick count has been specified

Possible Solution

caused by pull request #8983
Three options I thought of:

• consider tick rotation in formula to prevent tick collision
• ignore tick collision code when ticks.count is specified
• create an option to disable the tick collision code

Steps to Reproduce

https://codepen.io/pen/?template=jOBNLBR
Toggle the external Chart.js script between 3.2.0 and 3.2.1
Chart should have 6 tick marks. With Chart.js 3.2.1, the 2nd and 5th are not displayed

Context

Tick marks are not consistently spaced (looking broken), and flicker when using zoom-plugin / panning

Environment

• Chart.js version: 3.2.1
• Browser name and version: Chrome 90
• Link to your project: not published

[devenbj]

Thanks! I have tested the change. It did not work initially. It began working when I increased my rotation from 45 to 46 degrees.

[kurkle]

Thanks for the heads up, I'll reopen.

[kurkle]

@devenbj can you provide a codepen of the situation where 46 degree rotation works and 45 does not?
Took a quick look and it seems autoSkip is a bit more sensitive than the tick generator. So setting autoSkip to false could also work in that case.

[devenbj]

I updated the original pen: https://codepen.io/pen/?template=jOBNLBR
autoSkip is already set to false in my code, so this does not correct the behavior.

This was tough to recreate. Let me explain how that data came to be. :)

I have a time based chart. I manage the date functions in my code (more efficient than moment.js). chart.js is configured as a linear data set. I have the chart.js zoom plugin installed. I was able to synthesize the failure by zooming and captured the values. I was able to consistently reproduce the failure with the new range values and created a simplified test case. I added a "Switch" button to toggle the minRotation setting. In my production code, I have min and max set to both 46 currently, they were both set to 45.

Why this is a problem: While zooming my ticks "flicker", which appears broken.

Thanks... this project is awesome. The team is amazing!