[Solved] Large number of labels on X axis compressing the size of the chart

[Misha]

I have telerik bar chart series which i am using as a control in pivot page. Height of the graph is defined as 246.

<phone:PivotItem Header="Net Seat Adds" Margin="-18,20,40,1">

                <StackPanel Orientation="Vertical" Margin="0.241,-12,-0.241,37" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">

                    <StackPanel.RenderTransform>

                        <CompositeTransform SkewX="0.952" TranslateX="2.483"/>

                    </StackPanel.RenderTransform>

                    <telerikChart:RadCartesianChart Margin="12,0,0,0" x:Name="radChart1" Background="White" Height="246">

                        <telerikChart:RadCartesianChart.Grid>

                            <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y">




                                <telerikChart:CartesianChartGrid.YStripeBrushes>

                                    <SolidColorBrush Color="#33666666"/>

                                    <SolidColorBrush Color="Transparent"/>

                                </telerikChart:CartesianChartGrid.YStripeBrushes>

                            </telerikChart:CartesianChartGrid>

                        </telerikChart:RadCartesianChart.Grid>

                        <telerikChart:RadCartesianChart.HorizontalAxis>

                            <telerikChart:CategoricalAxis  LineStroke="Black" ElementBrush="Black" LabelFitMode="Rotate">

                            </telerikChart:CategoricalAxis>

                        </telerikChart:RadCartesianChart.HorizontalAxis>

                        <telerikChart:RadCartesianChart.VerticalAxis>

                            <telerikChart:LinearAxis Minimum="0"

                                         Maximum="100"

                                         MajorStep="10"

                                         LineStroke="Black"

                                         ElementBrush="Black"

                                         />

                        </telerikChart:RadCartesianChart.VerticalAxis>

  

                        <telerikChart:BarSeries Background ="White" CategoryBinding="GeographyName"  ValueBinding="NSA_MTD" ItemsSource="{Binding}">

                            <telerikChart:BarSeries.PointTemplate>

                                <DataTemplate>

                                    <Rectangle Fill="Blue"/>

                                </DataTemplate>

                            </telerikChart:BarSeries.PointTemplate>

                        </telerikChart:BarSeries>

                        <telerikChart:LineSeries StrokeThickness="5" Stroke="DarkCyan" CategoryBinding="GeographyName"  ValueBinding="NSA_MTD" ItemsSource="{Binding}"/>

                    </telerikChart:RadCartesianChart>

                    <!--<telerikPrimitives: LegendProvider="{Binding ElementName=chart}">

                        <telerikPrimitives:RadLegendControl.ItemsPanel>

                            <ItemsPanelTemplate>

                                <StackPanel Orientation="Vertical"/>

                            </ItemsPanelTemplate>

                        </telerikPrimitives:RadLegendControl.ItemsPanel>

                        <telerikPrimitives:RadLegendControl.ItemTemplate>

                            <DataTemplate>

                                <StackPanel Orientation="Horizontal">

                                    <Ellipse Fill="{Binding Fill}" Stroke="{Binding Stroke}"

                         StrokeThickness="1" Width="10" Height="10"/>

                                    <TextBlock Text="{Binding Title}" Foreground="{Binding Fill}"

                           Margin="10" FontStyle="Italic"/>

                                </StackPanel>

                            </DataTemplate>

                        </telerikPrimitives:RadLegendControl.ItemTemplate>

                    </telerikPrimitives:>-->

                    <StackPanel Orientation="Horizontal" Height="111" RenderTransformOrigin="0.499,0.622">

                        <Button x:Name="QTD" Content="QTD" Background="Black" Width="125" Margin="0,0,0,29" Padding="0" />

                        <Button x:Name="MTD" Content="MTD" Background="Black" Width="125" Margin="0,0,0,29" Padding="0"/>

                        <Button x:Name="YTD" Content="YTD" Background="Black" Width="125" Margin="0,0,0,29" Padding="0"/>

                    </StackPanel>

                </StackPanel>

            </phone:PivotItem>

But since I've more than 15 points on X axis i cannot see my graph as attached. Is it because of height being hardcoded? How can I dynamically adjust the graph?

Second ques, I want to use the legend? Is there any API available for windows phone 8? I know there is primitive API available for windows 8.


[Rosy Topchiyska]

Hi Misha,

Thank you for contacting us.

If I understand you correctly, the problem is that the height of the chart area is too small. As I see from the attached image, your labels are a bit long and take most of the space leaving almost no space for the series. The height of the chart control includes the chart area, the axes, the titles and the labels. The chart internally takes care of its content and since it has to provide space for the labels, the plot area gets very small. There is no way to set the height of the plot area only and hence you may consider setting larger height of the chart control or shortening the labels.

As to the legend control, unfortunately, at this moment we do not provide such functionality. Here is a link to another thread in the forum with information about how you can implement your own legend control.

I hope this was useful. Please, let us know if you have further questions.

Regards,
Rositsa Topchiyska
Telerik