Hi, I'm using Legend for the chart, my target is to place the legend at the center of the chart which is showed in your example browser. But I cannot make it even if I copied the same code form your example by setting Edge="Central", VerticalDockAlignment="Center" HorizontalDockAlignment="Center" for the legend. I've attached my example project to this post, please help me to have a check on it, see where I've done wrong. Thanks a lot.
Hello Yaron,
Do you require further assistance with this placement of the legend in the Data Chart?
The Data Chart resizes its plot area (white box) by extent of axis labels (gray boxes) on x-axis and y-axis. So you have 3 options how to offset plot area by the extend of axis labels in order to center legend:
1. Hide all axis labels using Axis.LabelSettings.Visibility property
2. Change location of axis labels:
XAxis.LabelSettings.Location = AxisLabelsLocation.InsideBottom
YAxis.LabelSettings.Location = AxisLabelsLocation.InsideLeft
see Axis Crossing for more info about this feature
3. Add second pair of x-axis and y-axis to offset plot area:
<Grid> <Grid.DataContext> <local:Data/> </Grid.DataContext> <ig:XamDataChart x:Name="DataChartMain" Legend="{Binding ElementName=CenterLegend}" HorizontalZoomable="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalZoomable="True" Background="LightGray" PlotAreaBackground="White"> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name="XAxis1" Label="{}{X}" ItemsSource="{Binding}"> <ig:CategoryXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideBottom" x:Name="XAxis1Settings" Extent="40" /> </ig:CategoryXAxis.LabelSettings> </ig:CategoryXAxis> <ig:NumericYAxis x:Name="YAxis1" > <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" x:Name="YAxis1Settings" Extent="40" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> <!--this axis offset plot area by extent/width of YAxis1--> <ig:NumericYAxis x:Name="YAxis2" > <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideRight" Extent="{Binding ElementName=YAxis1Settings, Path=Extent}"/> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> <!--this axis offset plot area by extent/width of XAxis1--> <ig:CategoryXAxis x:Name="XAxis2" > <ig:CategoryXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideTop" Extent="{Binding ElementName=XAxis1Settings, Path=Extent}"/> </ig:CategoryXAxis.LabelSettings> </ig:CategoryXAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:SplineSeries Title="Sin(x)" MarkerType="Circle" ItemsSource="{Binding}" XAxis="{Binding ElementName=XAxis1}" YAxis="{Binding ElementName=YAxis1}" ValueMemberPath="ValueSin"/> <ig:SplineSeries Title="Cos(x)" MarkerType="Circle" ItemsSource="{Binding}" XAxis="{Binding ElementName=XAxis1}" YAxis="{Binding ElementName=YAxis1}" ValueMemberPath="ValueCos"/> </ig:XamDataChart.Series> </ig:XamDataChart> <ig:Legend x:Name="CenterLegend" Opacity="0.8" Content="Legend" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="2"> </ig:Legend> </Grid>
Note: That I did not use XamDock control because is not really needed.