Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Andreas Hensel
535
xamDataChart category labels get cut off
posted

Hello,

I have a problem using the xamDataChart with Radial Series. 

The category labels get cut off, as you can see in the screenshot on the left side.
This is not because of the width of the window. If I maximize the window the control stays the same size.

I created a usercontrol in which the xamDataChart control is located, so it fills all available space.
The height of the control is limited, because I need to display several charts in a StackPanel.
If I increase the MinHeight of my control, the chart grows, but it is at all times just square and does not use the available width.

I tried to increase the PlotAreaMinWidth, but this shows no reaction.

How can I make the chart control use the available space?

 

Thank you in advance

Parents
  • 30692
    Suggested Answer
    Offline posted

    Hi,

    The radial and polar series use a fixed aspect ratio for the viewport. Increasing one dimension of the chart only does not allow for the area available to the radial/polar series to grow. You have a few avenues available to you, though. First, you can adjust the values of LabelSettings.Extent (to provide an adjusted distance that the labels should be to the outer ring of the chart, including overlapping them into the inner region) and NumericRadiusAxis.RadiusExtendScale (to make the overall percentage that the radial chart takes up within the viewport less so that it leaves more bleed over room for the labels) Here's an example that shows this strategy:

    https://gist.github.com/gmurray81/7cde8dbae26e27b177da

    	<igChart:XamDataChart x:Name="chart"
                              VerticalZoomable="True"
                              HorizontalZoomable="True" >
            <igChart:XamDataChart.Axes>
                <igChart:CategoryAngleAxis x:Name="angleAxis"
                                       
                                       ItemsSource="{StaticResource data}"
                                       Label="{}{Label}" >
                    <igChart:CategoryAngleAxis.LabelSettings>
                        <igChart:AxisLabelSettings
                            Extent="15" />
                    </igChart:CategoryAngleAxis.LabelSettings>
                </igChart:CategoryAngleAxis>
                <igChart:NumericRadiusAxis x:Name="valueAxis" RadiusExtentScale=".5" />
            </igChart:XamDataChart.Axes>
            
            <igChart:XamDataChart.Series>
                <igChart:RadialLineSeries x:Name="line"
                                      ItemsSource="{StaticResource data}"
                                      ValueMemberPath="Value"
                                      AngleAxis="{Binding ElementName=angleAxis}"
                                      ValueAxis="{Binding ElementName=valueAxis}" />
            </igChart:XamDataChart.Series>
        </igChart:XamDataChart>

    Hope this helps!

    -Graham

Reply Children