First label on categorical axis is hidden when chart is zoomed

[Mladen]

Hi, I have the following problem with RadCartesianChart - it has fixed size and sometimes many categories are displayed in the chart and therefore I'm setting zoom level according to the number of categories. But sometimes the first category label disappears. This is not good because it creates a wrong impression that the values are for empty category. I've tried to overcome this behaviour by setting different label related properties categorical axis but with no luck.

Here is my current attempt:

<telerik:RadCartesianChart.VerticalAxis>
                  <chartView:CategoricalAxis FontFamily="Segoe UI" LabelInterval="1" LabelOffset="0" LabelFitMode="None"  LastLabelVisibility="Visible">
                      <chartView:CategoricalAxis.LabelTemplate>
                          <DataTemplate>
                              <TextBlock Text="{Binding}"/>
                          </DataTemplate>
                      </chartView:CategoricalAxis.LabelTemplate>
                  </chartView:CategoricalAxis>
              </telerik:RadCartesianChart.VerticalAxis>

I'm attaching screen shots to demonstrate the problem.

Please give me some advice for the solution.

Best Regards,
Mladen

[Peshito]

Hello Mladen,

Could you try setting the PlotMode property of your axis to OnTicks. In this case the ticks will match the labels and the last one should not disappear.

Regards,
Peshito
Telerik

[Mladen]

Hi ,

Thank you for your reply. Unfortunatelly it does not work for me, because setting Plot Mode to OnTicks leads to not good looking appearence when there is only one bar, it goes partially in one side of the axis and leaves lot of empty space. I gues i could change PlotMode property depending on the bars count, but if you can suggest something else I'll appreciate it.

However  I would like to ask you another question - when you zoom out too much and there are too many bars - category labels overlaps themselves. I'm attaching picture. Is there an easy way to avoid this?

Best Regards,
Mladen

[Peshito]

Hi Mladen,

As you are using CategoricalAxis the chart cannot know what categories should be visible and what not. However  you may use the LabelInterval property of your axis in order to make the labels more readable. It can also be controlled by attaching to chart's ZoomChanged event like this.

void RadChart1_ZoomChanged(object sender, Telerik.Windows.Controls.ChartView.ChartZoomChangedEventArgs e)
        {
            if (RadChart1.Zoom.Height > 0.5)
            {
                (RadChart1.VerticalAxis as CategoricalAxis).LabelInterval = 5;
            }
        }

Hope this helps.

Regards,
Peshito
Telerik

[Mladen]

Hi, I'm aware of this approach (although I was trying briefly to do it with binding). The problem is that the proper appearance is not only function of the zoom but also of the height of the chart and the number of bars in it. For example if there are five bars in the chart zoom 1 is ok, but if there are 100 - it is completely not. Also if the user resize the grid -  if the height is higher - more labels can be stick together without this nasty effect to occur. So i have to develop some kind of formula to calculate labels intervals based on these three parameters. So I'm asking whether there is a simpler way to tell the chart to not overlap the labels - when this happens they to be collapsed or something else.

[Peshito]

Hello Mladen,

You are correct. However there isn't a simpler way out of the box to avoid overlapping the labels in such a scenario when Categorical axis with so many items is used.

Regards,
Peshito
Telerik

[Mladen]

Hi, thank you for your reply.

I have one last question - I have another problem with labels on categorical axis for which i cannot find good solution. When there are many bars in rad chart and when you scrolling through them if there are labels with big length - while they came in and out of view the chart left side of plot area is moving left and right depending on the category labels length, which are currently in view while scrolling. I wanted to avoid that, so i set the labels length at fixed size, depending on the longest label. But this way i couldnt manage to right aligh the labels no matter what i tried and sometimes by unknown reason some of them are missplaced (aligned right or center while the others are aligned left).

Are you aware how to avoid successfully this behaviour  (changing the position of the left side of the plot area while scrolling)?

Best Regards,
Mladen

[Petar Marchev]

Hi Mladen,

This should be solved easily by setting a style with fixed width and text alignment:

<telerik:CategoricalAxis x:Name="mainVerticalAxis">
 <telerik:CategoricalAxis.LabelStyle>
  <Style TargetType="TextBlock">
   <Setter Property="Width" Value="80" />
   <Setter Property="TextAlignment" Value="Right" />

Regards,
Petar Marchev
Telerik

[Mladen]

Hi Petar, thank you for your reply.

I agree it should easily be solved but this actually doesn't happen.

I had tried to do what you have suggested - although i was setting these properties not with style, but directly. There should be no difference unless for example default label template is made from several texboxes or something like that. However i think this is not the case - here I'm attaching video where you can see the xaml and the effect which i have mentioned in previous post wchich occurr when try to fix the size and right aligh. You can see in the video I'm trying with your approach, mine and both with the same result (no surprise). At the fourth attempt i comment all the xaml and show you the default behaviour i initially want to avoid (moving the left side of the chart while scrolling) 

https://docs.google.com/file/d/0B9h8habEj9Z3eHA0akFDUWI3NTA/edit?usp=sharing

Best Regards,
Mladen

[Petar Marchev]

Hi Mladen,

Thank you for the screencast. I am unsure why this happens, I tried reproducing it in a small project but was unable to get the faulty behavior. I have attached the project for your reference.

Can you verify if you are using the latest version of our controls, perhaps this was a bug in the control at some point and is now fixed. Another reason for the labels not being positioned correctly might be the binding. You are using a binding for the Width of the label. The binding might kick in later than expected and before that the value of the property could be 0. In this case the chart will position the labels as if their width is 0, which would lead to the misalignment. However, this is just a mere guess but you can try to remove the binding and use a static value, say 100, and see if the glitch still will occurs.

If you can update the attached project to reproduce the issue at hand, please send it back to us for investigation.

Regards,
Petar Marchev
Telerik

[Mladen]

Hi, I'm not using latest version of controls, I'm using v4.0.30319.

However - if i set the label value to static length it works fine. But i need to change the length, bacause the labels from different data shown in the chart can greatly vary in length. 

Stilll - i tried with your project and mine version of controls - i couldnt reproduce the behaviour at first.
But when i set different label lenght at every buton click i was able to reproduce almost the same behaviour (not exactly the same, because all labels weren't alighed correctly together - not some of them aligned and some of them not)

I'm sending you only the change of the code to your project(below). With various ranges of label length the result is the same. At first click of the button they are aligned correctly. In the next clicks they are not. So the reason for this behaviour is not the binding but the fact itself, that I'm actually changing the labels length .  I haven't tried with latest version, you can do it just with replacing the code below and tell me if i need to change version of the controls to improve the bahaviour. If not the version is to blame, do you have any other suggestions?


  private void Button_Click(object sender, RoutedEventArgs e)
        {
            var random = new Random();
            this.DataContext = new MainVM
            {
                LabelLength = random.Next(50,500),
                Data = new List<PlotInfo> 
                { 
                    new PlotInfo { XCat = "x1" , YVal = 12 },
                    new PlotInfo { XCat = "x2sadas" , YVal = 123 },
                    new PlotInfo { XCat = "x3" , YVal = 23 },
                    new PlotInfo { XCat = "x4" , YVal = 173 },
                    new PlotInfo { XCat = "x5asdad.dasfa" , YVal = 99 },
                    new PlotInfo { XCat = "x6" , YVal = 193 },
                    new PlotInfo { XCat = "x7sda1" , YVal = 77 },
                    new PlotInfo { XCat = "x8" , YVal = 123 },
                    new PlotInfo { XCat = "x9aTdA" , YVal = 77 },
                    new PlotInfo { XCat = "x11" , YVal = 12 },
                    new PlotInfo { XCat = "T12FaGas" , YVal = 123 },
                    new PlotInfo { XCat = "x13" , YVal = 23 },
                    new PlotInfo { XCat = "x14" , YVal = 173 },
                    new PlotInfo { XCat = "x15asGad" , YVal = 99 },
                    new PlotInfo { XCat = "x16" , YVal = 193 },
                    new PlotInfo { XCat = "x17Sda1" , YVal = 77 },
                    new PlotInfo { XCat = "x18" , YVal = 123 },
                    new PlotInfo { XCat = "x19aRda" , YVal = 77 },
                    new PlotInfo { XCat = "x1" , YVal = 12 },
                    new PlotInfo { XCat = "x2sadas" , YVal = 123 },
                    new PlotInfo { XCat = "x3" , YVal = 23 },
                    new PlotInfo { XCat = "x4" , YVal = 173 },
                    new PlotInfo { XCat = "x5asdad.dasfa" , YVal = 99 },
                    new PlotInfo { XCat = "x6" , YVal = 193 },
                    new PlotInfo { XCat = "x7sda1" , YVal = 77 },
                    new PlotInfo { XCat = "x8" , YVal = 123 },
                    new PlotInfo { XCat = "x9aTdA" , YVal = 77 },
                    new PlotInfo { XCat = "x11" , YVal = 12 },
                    new PlotInfo { XCat = "T12FaGas" , YVal = 123 },
                    new PlotInfo { XCat = "x13" , YVal = 23 },
                    new PlotInfo { XCat = "x14" , YVal = 173 },
                    new PlotInfo { XCat = "x15asGad" , YVal = 99 },
                    new PlotInfo { XCat = "x16" , YVal = 193 },
                    new PlotInfo { XCat = "x17Sda1" , YVal = 77 },
                    new PlotInfo { XCat = "x18" , YVal = 123 },
                    new PlotInfo { XCat = "x19aRda" , YVal = 77 },
                }
            };
        }
    }

[Petar Marchev]

Hi Mladen,

The reason this code breaks the behavior is that you are only changing a property Width and not the whole LabelStyle. The chart has already cached the desired Widths of the TextBlock elements (this is done to increase performance). When you change the Width in the style, the chart does not know about this change and does not refresh the cached values. If you were to change the whole style, it would work just as expected:

this.DataContext = new MainVM .....
.....


var labelStyle = this.chart1.VerticalAxis.LabelStyle;
this.chart1.VerticalAxis.LabelStyle = null;
this.chart1.VerticalAxis.LabelStyle = labelStyle;

You can try adding these three lines after setting the data context and see the new behavior.

In any case I think it is best that you try the latest version in your actual project and see if the glitch will disappear.

I can suggest that you bind the LabelStyle property of the axis to the LabelLength property:

<telerik:CategoricalAxis LabelStyle="{Binding LabelLength, Converter={StaticResource LabelLengthToTextBlockStyleConverter}}" />

Hope this helps.

Regards,
Petar Marchev
Telerik

[Mladen]

Thank you, setting the style bound to LabelLength using converter did the job.