Declined
Last Updated:
16 Feb 2024 08:18
by ADMIN
eDAD
Created on:
09 Feb 2024 09:26
Category:
Charts
Type:
Bug Report
Accessibility bug
Bug title: X-axis is getting overlapped while resizing the page upto 400% of zoom.
Severity: Sev2 (High)
Test Environment: OS: Windows 11 22H2
OS Build: 23620.1000
Pre-Requisite: Set browser zoom level to 400% and display resolution: 1280x1024 (or) In dev Tools set the resolution to 320*256.
Repro steps:
1.Open URL: http://www.telerik.com/kendo-ui in edge browser.
2.Navigate to 'Kendo UI for Angular ' tab item and invoke it.
3.Navigate to the Angular chart control and invoke it.
4.In left navigation pane click Scatter control under 'series types'.
5.Navigate to 'Scatter Plot Chart'.
6.Verify whether X-axis is getting overlapped while resizing the page upto 400% of zoom or not.
Actual Result:
X-axis is getting overlapped while resizing the page upto 400% of zoom.
Expected Result:
X-axis should not get overlapped when browser zoom level set to 400%.
Severity: Sev2 (High)
Test Environment: OS: Windows 11 22H2
OS Build: 23620.1000
Pre-Requisite: Set browser zoom level to 400% and display resolution: 1280x1024 (or) In dev Tools set the resolution to 320*256.
Repro steps:
1.Open URL: http://www.telerik.com/kendo-ui in edge browser.
2.Navigate to 'Kendo UI for Angular ' tab item and invoke it.
3.Navigate to the Angular chart control and invoke it.
4.In left navigation pane click Scatter control under 'series types'.
5.Navigate to 'Scatter Plot Chart'.
6.Verify whether X-axis is getting overlapped while resizing the page upto 400% of zoom or not.
Actual Result:
X-axis is getting overlapped while resizing the page upto 400% of zoom.
Expected Result:
X-axis should not get overlapped when browser zoom level set to 400%.
Attached Files:
1 comment
ADMIN
Martin Bechev
Posted on:
16 Feb 2024 08:18
Hi,
This behavior is expected due to the insufficient space for the labels. To deal with this case, set the rotation of the labels to 'auto'. This will adjust the label's position according to the available space:
<kendo-chart-x-axis-item ...
[labels]="{ format: '{0}m', rotation: 'auto' }"
>
</kendo-chart-x-axis-item>Here is the updated example:
https://stackblitz.com/edit/angular-uhehjn
Regards,
Martin
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!