Axis labels formatted too small in Android

[Erik]

Hi --

I have both an iOS *and* an Android question/issue on the same chart that I was wondering if I could get reviewed.  I am splitting them into two different issues in case somebody in the future searches for the individual items.

For Android, the chart we are rendering makes it X-axis labels too small.  I am wondering if this is either a bug that needs fixing or if there is any way I can control the font size for the labels.

I have attached an image of the chart -- which otherwise looks pretty good!

I have also created a GitHub repo which can run and has all of this source code:

https://github.com/dahlsailrunner/TelerikSample

If you run the sample for Android you should be able to reproduce the behavior.

Thanks in advance for your review.

-Erik

 

 

[Erik]

By the way, the x-axis labels look fine in iOS.  The iOS issue with the same chart is that the bars are too thin; I've started a thread here for that:

http://www.telerik.com/forums/bar-series-rendered-too-thin-on-ios

 

​

 

[Ves]

Hi Erik,

This seems to be caused by a bug in our code. Thanks for notifying us. The fix will be included in our next release. For the time being you can set platform-specific values using Device.OnPlatform as shown here.

Best regards,
Ves
Telerik

[Erik]

Hi Ves -- Thanks for the reply.  Two follow-up questions: 

1) when do you anticipate next release? (rough guess is fine)

2) How exactly would you use the Device.OnPlatform as you suggest?  We are familiar with that technique, but unfamiliar with where to use it in this specific case.  Here is the XAML for our chart (which is the only thing we're using to format it):

<telerikChart:RadCartesianChart Grid.Row="2" x:Name="telChart"
      HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                  BackgroundColor="Transparent">
      <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:CategoricalAxis LabelTextColor="Black" LabelFontSize="12"
                              ShowLabels="True"/>
      </telerikChart:RadCartesianChart.HorizontalAxis>
      <telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:NumericalAxis ShowLabels="False" Minimum="0" LabelTextColor="Black"/>
      </telerikChart:RadCartesianChart.VerticalAxis>
      <telerikChart:RadCartesianChart.Behaviors>
        <telerikChart:ChartSelectionBehavior SeriesSelectionMode="Single" SelectionChanged="SingleSelected" DataPointSelectionMode="Single"></telerikChart:ChartSelectionBehavior>
      </telerikChart:RadCartesianChart.Behaviors>
      <telerikChart:RadCartesianChart.Series>
        <telerikChart:BarSeries CombineMode="None"  ItemsSource="{Binding Chart.CategoricalData0}" ShowLabels="True">
          <telerikChart:BarSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
          </telerikChart:BarSeries.ValueBinding>
          <telerikChart:BarSeries.CategoryBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
          </telerikChart:BarSeries.CategoryBinding>
        </telerikChart:BarSeries>
        <telerikChart:BarSeries  ItemsSource="{Binding Chart.CategoricalData1}" ShowLabels="True" >
          <telerikChart:BarSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
          </telerikChart:BarSeries.ValueBinding>
          <telerikChart:BarSeries.CategoryBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
          </telerikChart:BarSeries.CategoryBinding>
        </telerikChart:BarSeries>
        <telerikChart:BarSeries ItemsSource="{Binding Chart.CategoricalData2}" ShowLabels="True">
          <telerikChart:BarSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
          </telerikChart:BarSeries.ValueBinding>
          <telerikChart:BarSeries.CategoryBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
          </telerikChart:BarSeries.CategoryBinding>
        </telerikChart:BarSeries>
        <telerikChart:BarSeries  ItemsSource="{Binding Chart.CategoricalData3}" ShowLabels="True">
          <telerikChart:BarSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
          </telerikChart:BarSeries.ValueBinding>
          <telerikChart:BarSeries.CategoryBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
          </telerikChart:BarSeries.CategoryBinding>
        </telerikChart:BarSeries>
        <telerikChart:BarSeries  ItemsSource="{Binding Chart.CategoricalData4}" ShowLabels="True">
          <telerikChart:BarSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
          </telerikChart:BarSeries.ValueBinding>
          <telerikChart:BarSeries.CategoryBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
          </telerikChart:BarSeries.CategoryBinding>
        </telerikChart:BarSeries>
        <telerikChart:BarSeries  ItemsSource="{Binding Chart.CategoricalData5}" ShowLabels="True">
          <telerikChart:BarSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
          </telerikChart:BarSeries.ValueBinding>
          <telerikChart:BarSeries.CategoryBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
          </telerikChart:BarSeries.CategoryBinding>
        </telerikChart:BarSeries>
        <telerikChart:BarSeries ItemsSource="{Binding Chart.CategoricalData6}" ShowLabels="True">
          <telerikChart:BarSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
          </telerikChart:BarSeries.ValueBinding>
          <telerikChart:BarSeries.CategoryBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
          </telerikChart:BarSeries.CategoryBinding>
        </telerikChart:BarSeries>
      </telerikChart:RadCartesianChart.Series>

    </telerikChart:RadCartesianChart>

Thanks -

Erik

 

[Ves]

Hi Erik,

We expect our next release to be out by the end of November. As for the usage of OnPlatform -- it might look like this:

<telerikChart:CategoricalAxis LabelTextColor="Black"
                    ShowLabels="True">
    <telerikChart:CategoricalAxis.LabelFontSize>
            <OnPlatform x:TypeArguments="x:Double"  Android="32" iOS="12"></OnPlatform>
    </telerikChart:CategoricalAxis.LabelFontSize>
</telerikChart:CategoricalAxis>

You will be able to remove this once the fix is out.

Best regards,
Ves
Telerik

[Erik]

Awesome!  We have tried this and it worked just fine.  We will also look forward to the later-in-November release, but for now this solved that problem! 

 Thanks -

Erik