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,
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.
Do you require further assistance with this placement of the legend in the Data Chart?