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
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
LabelSettings.Extent:I played with the settings already, but overlapping the chart area inside is not an option.I also tried to linebreak the labels, but some are just too long.
NumericRadiusAxis.RadiusExtendScale:This value is down to 0.5 and I can't go lower than this, otherwise the chart is too small.
Currently those are your only two handles on adjusting the positioning of the labels on this chart type. We could add the ability to disable plot area clipping to the chart, but this would be a feature request at http://ideas.infragistics.com
Also, disabling the plot area clipping only really helps you for labels that spill out to the left and right. Not to the top and bottom of the plot area, unless you add extra padding around the plot area. The mechanisms I mentioned already are meant to be sufficient to keep the labels in view. Could you maybe insert a line break into the extra long labels as an alternative?
Ok, great.
Let me know if you require any further assistance in this area.
Thanks,
Thank you for your answers.
I use linebreaks already and now it is working 95% of the time.
I'll fine tune it a bit more and hope that it will be good enough.