Hi,
I am trying to create a simple xamDataChart with Legend box, but legend box is not completely visible.
And here is my XAML code for chart definition.
<ig:XamDataChart Grid.RowSpan="2" HorizontalAlignment="Stretch" Margin="0" Name="theChart" Background="#EBF3FB" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1"> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name="xmXAxis" ItemsSource="{Binding}" Label="{}{X}" Stroke="Transparent" MajorStroke="Transparent"> <ig:CategoryXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideBottom" Extent="35" Visibility="Visible" /> </ig:CategoryXAxis.LabelSettings> </ig:CategoryXAxis> <ig:NumericYAxis x:Name="xmYAxisPrice" MajorStroke="Transparent" MinorStroke="Transparent"> <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" Extent="55" Visibility="Visible" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:LineSeries Thickness="2" ItemsSource="{Binding}" Brush="Blue" UnknownValuePlotting="LinearInterpolate" ValueMemberPath="Y1" XAxis="{Binding ElementName=xmXAxis}" YAxis="{Binding ElementName=xmYAxisPrice}" Title="ABC" Legend="{Binding ElementName=MyLegendItem}" /> </ig:XamDataChart.Series> </ig:XamDataChart> <ig:Legend x:Name="MyLegendItem" HorizontalAlignment="Right" VerticalAlignment="Top" Width="200" Height="100" Content="Legend"></ig:Legend>
I don't know what I am doing wrong here. Kindly help.
You can just change the orientation property of the legend to Horizontal.
Let me know if that helps.
-Graham
Hello Graham,
Kindly help me to resolve this issue.
Thanks in advance.
Thank you Graham,
It show the Legend below the chart but its showing Series vertically as shown here
But I would like to have it in Horizaontally aligned as shown in previous post so that it take very less space. I will have 3 series in my chart so I am sure it can come in one line.
Kindly help.
The legend is a seperate control that coordinates with the chart. So you can place it however and wherever you like.If you want to put it below the chart you can just place it in a row underneath the grid, like so.
<Grid x:Name="gChart" Style="{StaticResource ExpandGridInformation}" Grid.Column="3" Grid.Row="2" MinHeight="240" Background="#EBF3FB"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0" FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Left" Name="lblMeasureOnChart" VerticalAlignment="Top" Text=" " /> <ig:XamDataChart Grid.Row="0" HorizontalAlignment="Stretch" Margin="0" Name="theChart" Background="#EBF3FB" VerticalAlignment="Stretch" Grid.Column="0"> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name="xmXAxis" ItemsSource="{Binding}" Label="{}{X}" Stroke="Transparent" MajorStroke="Transparent"> <ig:CategoryXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideBottom" Extent="35" Visibility="Visible" /> </ig:CategoryXAxis.LabelSettings> </ig:CategoryXAxis> <ig:NumericYAxis x:Name="xmYAxisPrice" MajorStroke="Transparent" MinorStroke="Transparent"> <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" Extent="55" Visibility="Visible" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:LineSeries Thickness="2" ItemsSource="{Binding}" Brush="Blue" UnknownValuePlotting="LinearInterpolate" ValueMemberPath="Y1" XAxis="{Binding ElementName=xmXAxis}" YAxis="{Binding ElementName=xmYAxisPrice}" Title="ABC" Legend="{Binding ElementName=MyLegendItem}" /> </ig:XamDataChart.Series> </ig:XamDataChart> <ig:Legend x:Name="MyLegendItem" HorizontalAlignment="Stretch" VerticalAlignment="Top" Content="Legend" Grid.Row="1"></ig:Legend> </Grid>
Hope this helps!-Graham
Hi Graham,
Thank you for your response. Yes If I set grid row Height = "Auto" then legend visible however I am not getting that why Legend is coming in first row (My believe was that it is the part of XamDataCHART so take space in that datachart row). I created first row of Grid because I want to show the title of Chart in TextBlock.
However my exact requirements was to show the Legend below the X-Axis values in XamDataChart .
I tried to set HorizontalAlignment and VerticalAlignment of Legend by these lines but it does not work.
<ig:Legend x:Name="MyLegendItem" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Width="200" Height="100" Content="Legend"></ig:Legend>
I will be very thankful if you help me to solve this problem, you have my complete XAML so you can let me know how can I acheive this within my XAML.