Hi there, I couldn't find a way to position the legend away from the default right hand side location.
I would like to be able to set a location top,bottom, left , right of the chart ( with the legend items displayed in horizontal or vertical orientation).
Is this possible?
thanks.
You would have to modify the chart's template to get the legend in a different location. Here's an example of placing the legend on the left.
<igChart:XamWebChart Name="chart"> <igChart:XamWebChart.Template> <ControlTemplate TargetType="igChart:XamWebChart"> <Grid x:Name="RootElement" Background="{TemplateBinding Background}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" MaxWidth="200"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid x:Name="CaptionPanel" Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0"/> <Grid x:Name="ScenePanel" Grid.Column="1" Grid.Row="1"/> <Grid x:Name="LegendPanel" Grid.Column="0" Grid.Row="1" MaxWidth="200"/> </Grid> </ControlTemplate> </igChart:XamWebChart.Template> <igChart:XamWebChart.Series> <igChart:Series> <igChart:Series.DataPoints> <igChart:DataPoint Value="5"/> </igChart:Series.DataPoints> </igChart:Series> </igChart:XamWebChart.Series></igChart:XamWebChart>
Unfortunately, it's not possible to arrange the legend items horizontally at this time.
OK thanks for the response. Having the ability to display legend items horizontally is something I really need, so will make an attempt to write own legend using the observablecollection of legenditems that I assume gets generated from the series.
Roannak,
Assuming you still check these forums, did you make any progress creating a horizontal legend? This is something that I really need as well. Thanks!
Here's an example of how you might construct a custom legend for the chart.This will only work if you set the fill on the series, rather than using the random colors. This also doesn't accomodate an item-wise legend, so let me know if thats what you are trying for. This approach uses a WrapPanel from the Silverlight toolkit to contain the items, but you can customize the CustomLegend template to use any container you want.The xaml
<Grid x:Name="LayoutRoot" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <igChart:XamWebChart x:Name="theChart"> <igChart:XamWebChart.Legend> <igChart:Legend Visibility="Collapsed" /> </igChart:XamWebChart.Legend> <igChart:XamWebChart.Series> <igChart:Series ChartType="Line" Label="Series 1" Fill="Blue" Stroke="LightBlue"> <igChart:Series.DataPoints> <igChart:DataPoint Label="A" Value="1" /> <igChart:DataPoint Label="B" Value="2" /> <igChart:DataPoint Label="C" Value="3" /> <igChart:DataPoint Label="D" Value="4" /> <igChart:DataPoint Label="E" Value="5" /> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series ChartType="Line" Label="Series 2" Fill="Green" Stroke="LightGreen"> <igChart:Series.DataPoints> <igChart:DataPoint Label="A" Value="5" /> <igChart:DataPoint Label="B" Value="4" /> <igChart:DataPoint Label="C" Value="3" /> <igChart:DataPoint Label="D" Value="2" /> <igChart:DataPoint Label="E" Value="1" /> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series ChartType="Line" Label="Series 3" Fill="Red" Stroke="Pink"> <igChart:Series.DataPoints> <igChart:DataPoint Label="A" Value="1" /> <igChart:DataPoint Label="B" Value="4" /> <igChart:DataPoint Label="C" Value="2" /> <igChart:DataPoint Label="D" Value="1" /> <igChart:DataPoint Label="E" Value="5" /> </igChart:Series.DataPoints> </igChart:Series> </igChart:XamWebChart.Series> </igChart:XamWebChart> <local:CustomLegend Grid.Column="1" x:Name="customLegend" Width="150" Chart="{Binding ElementName=theChart}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
The Custom controls
public class CustomLegend : Control { public CustomLegend() { this.DefaultStyleKey = typeof(CustomLegend); } public static readonly DependencyProperty ChartProperty = DependencyProperty.Register( "Chart", typeof(XamWebChart), typeof(CustomLegend), new PropertyMetadata(null, (o, e) => (o as CustomLegend) .OnChartPropertyChanged( e.OldValue as XamWebChart, e.NewValue as XamWebChart))); public XamWebChart Chart { get { return (XamWebChart)GetValue(ChartProperty); } set { SetValue(ChartProperty, value); } } private void OnChartPropertyChanged( XamWebChart oldValue, XamWebChart newValue) { if (oldValue != null) { oldValue.Series.CollectionChanged -= Series_CollectionChanged; } if (newValue != null) { newValue.Series.CollectionChanged += Series_CollectionChanged; } UpdateItems(); } public override void OnApplyTemplate() { base.OnApplyTemplate(); ItemsControl = (ItemsControl)GetTemplateChild("PART_ITEMSCONTROL"); UpdateItems(); } protected ItemsControl ItemsControl { get; set; } private void UpdateItems() { if (Chart == null || ItemsControl == null) { return; } var items = from series in Chart.Series select CreateFromSeries(series); foreach (var item in ItemsControl.Items.OfType<CustomLegendItem>()) { item.ClearValue(CustomLegendItem.FillProperty); item.ClearValue(CustomLegendItem.StrokeProperty); item.ClearValue(CustomLegendItem.StrokeThicknessProperty); item.ClearValue(ContentControl.ContentProperty); } ItemsControl.Items.Clear(); items.ToList().ForEach(ItemsControl.Items.Add); } private CustomLegendItem CreateFromSeries(Series series) { var newItem = new CustomLegendItem(); newItem.SetBinding( CustomLegendItem.FillProperty, new Binding("Fill") { Source = series }); newItem.SetBinding( CustomLegendItem.StrokeProperty, new Binding("Stroke") { Source = series }); newItem.SetBinding( CustomLegendItem.StrokeThicknessProperty, new Binding("StrokeThickness") { Source = series }); newItem.SetBinding( ContentControl.ContentProperty, new Binding("Label") { Source = series }); return newItem; } void Series_CollectionChanged( object sender, NotifyCollectionChangedEventArgs e) { UpdateItems(); } } public class CustomLegendItem : ContentControl { public CustomLegendItem() { this.DefaultStyleKey = typeof(CustomLegendItem); } public static readonly DependencyProperty FillProperty = DependencyProperty.Register( "Fill", typeof(Brush), typeof(CustomLegendItem), new PropertyMetadata(null)); public Brush Fill { get { return (Brush)GetValue(FillProperty); } set { SetValue(FillProperty, value); } } public static readonly DependencyProperty StrokeProperty = DependencyProperty.Register( "Stroke", typeof(Brush), typeof(CustomLegendItem), new PropertyMetadata(null)); public Brush Stroke { get { return (Brush)GetValue(StrokeProperty); } set { SetValue(StrokeProperty, value); } } public static readonly DependencyProperty StrokeThicknessProperty = DependencyProperty.Register( "StrokeThickness", typeof(double), typeof(CustomLegendItem), new PropertyMetadata(1.0)); public double StrokeThickness { get { return (double)GetValue(StrokeThicknessProperty); } set { SetValue(StrokeThicknessProperty, value); } } }
The default styles of the custom controls:
<Style TargetType="local:CustomLegend"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:CustomLegend"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ItemsControl x:Name="PART_ITEMSCONTROL"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <toolkit:WrapPanel /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <toolkit:WrapPanel /> </ItemsControl> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="local:CustomLegendItem"> <Setter Property="Margin" Value="3" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:CustomLegendItem"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Rectangle RadiusX="3" RadiusY="3" Width="13" Height="13" Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}" /> <ContentPresenter Margin="5,0,0,0" Grid.Column="1" Content="{TemplateBinding Content}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
Hope this helps!-Graham
In the legend, is there a wordwrap feature for legend lables that are too long so you dont get the ... at the end?
I get these errors when I try it set the style for hte legend
Error 1 The property 'Legend' is set more than once.
Error 1 The type 'XamWebChart' does not support direct content.
in ....
<UserControl xmlns:igChart="clr-namespace:Infragistics.Silverlight.Chart;assembly=Infragistics.Silverlight.Chart.v9.2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ReportingControls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="ReportingControls.TrendsGraph"
Height="400" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="White">
<igChart:XamWebChart x:Name="ChartPerformance" Height="300" Margin="0,15,0,10">
<igChart:XamWebChart.Scene>
<igChart:Scene>
<igChart:Scene.GridArea>
<igChart:GridArea Background="#FFFFFFFF" />
</igChart:Scene.GridArea>
</igChart:Scene>
</igChart:XamWebChart.Scene>
<igChart:XamWebChart.Legend>
<igChart:Legend Visibility="Visible" />
</igChart:XamWebChart.Legend>
<igChart:XamWebChart.Axes>
<igChart:Axis x:Name="XAxis" AxisType="PrimaryX" Stroke="#FFEFEFEF">
<igChart:Axis.MajorTickMark>
<igChart:TickMarkGroup Stroke="#00000000" />
</igChart:Axis.MajorTickMark>
<igChart:Axis.Label>
<igChart:LabelGroup FontSize="10" Foreground="#666666" Angle="90" />
</igChart:Axis.Label>
<igChart:Axis.MajorGridline>
<igChart:GridlineGroup Stroke="#59ABABAB" StrokeThickness="0.5" />
</igChart:Axis.MajorGridline>
</igChart:Axis>
<igChart:Axis x:Name="YAxis" AxisType="PrimaryY" Stroke="#FFABABAB">
<igChart:LabelGroup Format="{}{0:p}" FontSize="10" Foreground="#666666" />
</igChart:XamWebChart.Axes>
</igChart:XamWebChart>
</Grid>
</UserControl>
You can set chart.Legend.LegendItemStyle property to a style like this:<Style TargetType="igChart:LegendItem"> <Style.Setters> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igChart:LegendItem"> <StackPanel Orientation="Horizontal"> <Rectangle RadiusX="3" RadiusY="3" Width="13" Height="13" Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}" /> <TextBlock HorizontalAlignment="Left" Text="{TemplateBinding Text}" Width="50" TextWrapping="Wrap" /> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style.Setters></Style>