Thank you for the attached code, image and explanations. I was able to create a project with this code and I was able to reproduce the behavior you are observing.
The output you get is a natural result of a feature that the axis has. When the chart is fully zoomed out, you want it to have 1 label for every Day (MajorStepUnit=Day, MajorStep=1). This means that the axis will show about 360 labels. The axis assumes that this number of ticks is the desired ticks count and it tries to show relatively the same number of labels when zooming in. So, when you zoom in 10 times, it recalculates the actual step, so that about 360 labels are shown again. So now we have about 10 labels per day, leading to that 2 hour step you see.
I hope I was able to explain well what is happening. Unfortunately, the axis does not have an API to disable this feature (we have this logged here
, you can like it and follow it).
However, there is a way to counter this feature. You can attach a handler to the ZoomChanged event of the chart and set a new major step. The chart internally calculates a zoomFactor based on the zoom and we need to use the same calculations and set the major step:
.Chart.Zoom.Width - (
.Chart.Zoom.Width % 2);
zoomFactor = Math.Max(1, zoomFactor);
xAxis.MajorStep = zoomFactor;
I have also attached a project so you can see it in action. Now, when the user zooms in, the axis should never change the actual step it is using, and this should lead to the result you need. Let us know how it goes.
On a side note, I see that you are indeed showing many points and I think that you can take advantage of the lighter render modes we have so you can get a better performance. Check out the rendering article here
Even when you switch to a lighter render mode, you will still have so many items. In the image you attached, there are about 600 thousand items, you have zoomed in 12 times, leaving about 50 thousand items on screen. If the chart is 1000 pixels wide - there are 50 items per single pixel (horizontal wise). Generally this leads to unreadable representation. I suggest you consider using a ChartDataSource
and sampling down the items to a readable number. I have also demonstrated this in the attached project.
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.