Automatically determine the optimal LabelStep to use

[Tony]

Hi,

The x-axis on my chart is overlapping in cases where I have too many data points.

I realise that I can use LabelStep to force the chart to force some data points to be skipped.

My question is whether there is a setting on the chart to _autmatically_ make the x-axis labels fit (be it through the use of LabelStep, LabelRotationAngle, etc) depending on the size of the chart.

Thanking you for your asssitance.

Tony

[Nikituki]

Try to use "LabelInterval" property

[Tony]

Thanks Nikituki but not exactly the answer I'm after.

From searching through the other sections of the forum, it seems like the property that I'm after is AutoStep but this is only available in RadChart.

Telerik support - are there any plans on making this property/functionality available in RadChartView and if so, is this already scheduled in your roadmap?

Cheers,

Tony

[Giuseppe]

Hello Tony,

Currently you can control how RadCartesianChart deals with overlapping through the Axis.LabelFitMode property:

• AxisLabelFitMode.None -- no action is taken.
• AxisLabelFitMode.Rotate -- labels are rotated at Axis.LabelRotationAngle degrees.
• AxisLabelFitMode.Multiline -- labels are arranged in multiple lines so the text does not overlap.

We will forward your feedback to our developers as well but currently we cannot commit specific enhancements to the auto-step logic for the next product release roadmap.

Greetings,
Giuseppe
the Telerik team

[Tony]

Hi Giuseppe,

Any word from the devs as to whether they will be adding this feature in an upcoming release?

Thanks,

Tony

[Giuseppe]

Hello Tony,

There are no planned enhancements with regards to automatic axis label arrangement for the Q2 2012 release as we are still focused on adding some missing core features like empty values to the control. Once we have covered the basics, we will revisit and discuss the availability of this feature again.


Greetings,
Giuseppe
the Telerik team

[Tony]

Hi Giuseppe,

Thanks for the update.

So for the scenario where there are, let's say 60 labels to render, would you agree that the 3 existing LabelFitMode might not be sufficient?

• AxisLabelFitMode.None - won't do anything to help with the label overlapping problem
• AxisLabelFitMode.Rotate - even at 90 degrees, the labels would still overlap
• AxisLabelFitMode.Multiline - the labels would still overlap?

Are there any other workarounds or alternative in the meantime?

Cheers,

Tony

[Giuseppe]

Hello Tony,

Besides Axis.LabelFitMode you can use the Axis.LabelInterval property that specifies the step at which labels are positioned (e.g. LabelInterval = 4 means that every fourth label will be shown).

Could you elaborate what additional fit modes are you looking for that would address the overlapping issue better (besides automatically choosing a combination of the existing options for LabelInterval and LabelFitMode)?


Greetings,
Giuseppe
the Telerik team

[Tony]

Hi Guiseppe,

The issue we have with label interval is that depending on the user screen resolution + the size of the chart, we might not be calculating the optimal interval (that plus we don't really want to start having code to get this information).

I'm thinking perhaps something similar to this feature that is available in the WPF RadChart:

Axis AutoStep Functionality - the AutoStep feature introduces new and improved level of re-scaling that allows the chart axes to automatically re-arrange their values. Thanks to this feature point labels overlapping is avoided and the information is presented clearly and neatly.

http://www.telerik.com/help/wpf/radchart-overview-key-features.html

Regards,

Tony

[Giuseppe]

Hello Tony,

Thank you for elaborating on this. We will forward your feedback to our developers so they can take it in consideration when discussing the availability of this feature for future release.


Regards,
Giuseppe
the Telerik team

[Christian]

Are there any updates on this topic?

[Christian]

Labels should adjust when the user zooms in or out, so LabelInterval is not really helpful

[Evgenia]

Hi Christian,

 The chart respects the number of datapoints you'd like visualized and it has some internal heuristics which make sure that there are a certain number of ticks on the axis. Otherwise, the chart will not make much sense if it has very few ticks on its axis. Please mind that even though it tries to control the labels for best visualization it's up to you to tweak them via the properties we exposed for better readability.

You might also fine-tune the number of labels/ticks being displayed in the following way: update your data accordingly to prevent too many data points visualized - e.g. you may remove the last data entry upon adding a new one if a certain threshold is exceeded. Also you might use our Pan and Zoom behaviour that provides zoom and scroll interactivity and allows users to zoom in the chart plot area when are there is a dense area of data points that can not be seen clearly at the normal chart scale.

Regards,
Evgenia
Telerik

[Christian]

Hi,

thanks for your answer.
It works very well with my numerical y-axis, but I use a DateTimeCategoricalAxis as my x-axis.
I want to show all bars in by barseries, but I want to show as many labels as possible without overlapping each other.
I can set a LabelInterval depending on the number of data points to reduce the number of labels, but this does not help when I use zoom and pan. When I zoom in, the chart could display more labels, but it still sticks to the geiven labelinterval, so I may not see any labels at all when I zoom in deep enough.

Do you have a solution for this problem?
Thanks in advance & best regards

[Evgenia]

Hi Christian,

There is a workaround actually but please mind that if you choose to use it any further code modifications are up to you as this is not a well-tested solution but just a suggestion to accomplish your requirement. 
The DateTimeCategoricalAxis (as in your case) has a MajorTickInterval property to specify the step at which ticks and labels are available. The DateTimeContinuousAxis has MajorStep and MajorStepUnit (Month vs. Day, etc) to fine-tune the ticks.

When you are using the DateTimeCategoricalAxis without setting its DateTimeComponent property, which default value is DateTimeComponent.Day.  the data is grouped by the Day value of each DateTime structure passed. If you want the entire Date value to be used, you should set the DateTimeComponent to Date. To specify tick interval you may use the MajorTickInterval property. For example:

private void UpdateTickInterval(CategoricalAxis axis)
{
    int dataPointCount = (this.radChart1.Series[0] as CategoricalSeries).DataPoints.Count;
    // round to 8 ticks
    int interval = dataPointCount / 8;
    axis.MajorTickInterval = Math.Max(1, interval);
}

You might use this and update the number of ticks to be displayed by wiring to ZoomChanged event of RadChartView.

Hope this helps.  

Regards,
Evgenia
Telerik