Displaying Legend Horizontaly

12 posts, 0 answers
  1. Gilberto
    Gilberto avatar
    6 posts
    Member since:
    Apr 2009

    Posted 25 May 2009 Link to this post

    I am wondering if there is a way to display the legend items horizontaly instead of verticaly

    ie
    <item1>  <item2> <item 3>

    instead of
    <item1>
    <item2>
    <item3>

  2. Dwight
    Admin
    Dwight avatar
    475 posts
    Member since:
    Sep 2012

    Posted 27 May 2009 Link to this post

    Hi Gilberto,

    Currently, there is no simple way to customize the layout of the legend. We have plans to make it easier to customize the RadChart's layout, as well as the layout of the elements inside, but I cannot provide specific time-frame for this feature.

    Best,
    Evtim
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  3. Download a free trial of UI for WPF
  4. Dwight
    Admin
    Dwight avatar
    475 posts
    Member since:
    Sep 2012

    Posted 27 May 2009 Link to this post

    Hello Gilberto,

    I'm sorry for the hurried answer I sent before, but I just got infromation from the development team, that there is a way to easily change the orientation, and even the whole style of the Chart Legend. Here is a sample code, that changes the orientation:

    <telerik:RadChart x:Name="radChart1"
        <telerik:RadChart.LegendStyle> 
            <Style TargetType="telerik:ChartLegend"
                <Setter Property="ItemsPanel" > 
                    <Setter.Value> 
                        <ItemsPanelTemplate> 
                            <StackPanel Orientation="Horizontal" /> 
                        </ItemsPanelTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
        </telerik:RadChart.LegendStyle> 
    </telerik:RadChart> 

    Best,
    Evtim
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  5. Kevin
    Kevin avatar
    1 posts
    Member since:
    Apr 2009

    Posted 27 Jun 2009 Link to this post

    Hi Evtim,
    I am assuming I can set the legend orientation in the c# code behind instead of the xaml.
    Can you check with the development team for the equivalent c# code.

    Something like...???

    this

     

    .DefaultView.ChartLegend.ItemsPanel.SetValue(???, "Horizontal");

    Thank You,

    Kevin

     

  6. Dwight
    Admin
    Dwight avatar
    475 posts
    Member since:
    Sep 2012

    Posted 01 Jul 2009 Link to this post

    Hi Kevin,

    It is not possible to directly access the Items panel since the ItemsPanel property is of type ItemsPanelTemplate, i.e. this is only a template, which the framework instantiates in the background. Thus, one cannot have control over the actual execution, and cannot access the panel directly.

    There are two approaches to solve the problem:

    1. In XAML define a resource, which is something like:

    <Style x:Key="MyCustomLegendStyle" TargetType="telerik:ChartLegend">  
        <Setter Property="ItemsPanel" >  
            <Setter.Value>  
                <ItemsPanelTemplate>  
                    <StackPanel Orientation="Horizontal" />  
                </ItemsPanelTemplate>  
            </Setter.Value>  
        </Setter>  
    </Style>  

    Then, in the code-behind set it like that:
    this.radChart1.LegendStyle = (Style)this.FindResource("MyCustomLegendStyle");

    Note
    , that this resource should be placed in the resource dictionary of the page in order to be found.

    2. You can write the XAML code in a single string and use the XamlReader.Load method. Here is a sample code:
    public Page() 
        InitializeComponent(); 
     
        Style style = (Style)System.Windows.Markup.XamlReader.Load( 
            "<Style " +  
            "xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" " + 
            "xmlns:telerikCharting=\"clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting\" " + 
            " TargetType=\"telerikCharting:ChartLegend\">" +  
            "  <Setter Property=\"ItemsPanel\">" + 
            "    <Setter.Value>" + 
            "      <ItemsPanelTemplate>" + 
            "        <StackPanel Orientation=\"Horizontal\" />" + 
            "      </ItemsPanelTemplate>" + 
            "    </Setter.Value>" + 
            "  </Setter>" + 
            "</Style>"); 
     
        this.radChart1.LegendStyle = style; 

    Best regards,
    Evtim
    the Telerik team
    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  7. Aris
    Aris avatar
    5 posts
    Member since:
    Jun 2009

    Posted 03 Jul 2009 Link to this post

    Hi all!
    The above code doesnt seem to be working in my project.The legend always keeps showing as a column and not as a row.
    My code is :

    <UserControl  
        x:Class="TelerikTest.Page2" 
        xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"   
        xmlns:Chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" 
        xmlns:Charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"              
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
        xmlns:gauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"  
        xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"  
        > 
        <Grid x:Name="LayoutRoot" Background="White">            
            <Grid.RowDefinitions> 
                <RowDefinition Height="9*"/> 
                <RowDefinition Height="1*"/> 
            </Grid.RowDefinitions> 
            <Border BorderBrush="Aquamarine" BorderThickness="10" Grid.Row="0"
                <Chart:RadChart x:Name="Chart1" UseDefaultLayout="False" Grid.Row="0"
                    <Chart:RadChart.LegendStyle> 
                        <Style TargetType="Charting:ChartLegend"
                            <Setter Property="ItemsPanel" > 
                                <Setter.Value> 
                                    <ItemsPanelTemplate> 
                                        <StackPanel Orientation="Horizontal" /> 
                                    </ItemsPanelTemplate> 
                                </Setter.Value> 
                            </Setter> 
                        </Style> 
                    </Chart:RadChart.LegendStyle> 
                    <Grid> 
                        <Grid.RowDefinitions> 
                            <RowDefinition Height="1*" /> 
                            <RowDefinition Height="8*" /> 
                            <RowDefinition Height="1*" /> 
                        </Grid.RowDefinitions> 
     
                        <Charting:ChartArea x:Name="ChartArea1" LegendName="ChartLegend1"  
                                   Grid.Row="1" /> 
     
                        <Charting:ChartTitle Content="Sample Report" Grid.Row="0" 
                                    VerticalAlignment="Top" HorizontalAlignment="Center" 
                                     /> 
     
                        <Charting:ChartLegend x:Name="ChartLegend1" Header="Legend:" 
                                     Grid.Row="2" 
                                     VerticalAlignment="Top"/>                     
                    </Grid> 
                     
                </Chart:RadChart> 
            </Border> 
            <Button x:Name="Btn" Content="Load" Click="Btn_Click" Grid.Row="1"/> 
        </Grid> 
    </UserControl> 
     
    Propably I am doing something wrong.
    Please help me!!

  8. Aris
    Aris avatar
    5 posts
    Member since:
    Jun 2009

    Posted 06 Jul 2009 Link to this post

    Hi all!
    I found the solution in my problem.Please allow me to share my code incase someone is confused like me :D

    <UserControl  
        x:Class="TelerikTest.Page2" 
        xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"   
        xmlns:Chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" 
        xmlns:Charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"              
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
        xmlns:gauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"  
        xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"  
        > 
        <Grid x:Name="LayoutRoot" Background="White">                          
            <Grid.RowDefinitions> 
                <RowDefinition Height="9*"/> 
                <RowDefinition Height="1*"/> 
            </Grid.RowDefinitions>         
            <Border BorderBrush="Aquamarine" BorderThickness="10" Grid.Row="0"
                <Chart:RadChart x:Name="Chart1" UseDefaultLayout="False" Grid.Row="0">                 
                    <Grid> 
                        <Grid.RowDefinitions> 
                            <RowDefinition Height="1*" /> 
                            <RowDefinition Height="8*" /> 
                            <RowDefinition Height="1*" /> 
                        </Grid.RowDefinitions> 
                        <Grid.Resources> 
                            <ResourceDictionary> 
                                <Style x:Key="MyCustomLegendStyle" TargetType="Charting:ChartLegend"
                                    <Setter Property="ItemsPanel" > 
                                        <Setter.Value> 
                                            <ItemsPanelTemplate> 
                                                <StackPanel Orientation="Horizontal" /> 
                                            </ItemsPanelTemplate> 
                                        </Setter.Value> 
                                    </Setter> 
                                </Style> 
                            </ResourceDictionary> 
                        </Grid.Resources> 
                         
                        <Charting:ChartLegend x:Name="ChartLegend1" Header="Legend:" 
                                     Grid.Row="2" Style="{StaticResource MyCustomLegendStyle}"/>                         
                         
                        <Charting:ChartArea x:Name="ChartArea1" Grid.Row="1" LegendName="ChartLegend1"/> 
                         
                        <Charting:ChartTitle Content="Sample Report" Grid.Row="0" 
                                    VerticalAlignment="Top" HorizontalAlignment="Center"/>                                                                               
                    </Grid>                 
                </Chart:RadChart> 
            </Border> 
            <Button x:Name="Btn" Content="Load" Click="Btn_Click" Grid.Row="1"/> 
        </Grid> 
    </UserControl> 
     

  9. gradford
    gradford avatar
    7 posts
    Member since:
    Nov 2009

    Posted 05 Nov 2009 Link to this post

    Is there any way to display the chart legend along the top with horizontal legend items strictly using C#?

  10. Dwight
    Admin
    Dwight avatar
    475 posts
    Member since:
    Sep 2012

    Posted 10 Nov 2009 Link to this post

    Hi Garrett,

    Due to restrictions in the Silverlight designer, it is not possible to do that in code-behind.
    There is a way to dynamically load content:

    var element = System.Windows.Markup.XamlReader.Load(" -- xaml code goes here --");
    LayoutRoot.Children.Add(element as UIElement);

    That again requires writing xaml code.

    Best,
    Evtim
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

  11. Rakhi
    Rakhi avatar
    10 posts
    Member since:
    Aug 2010

    Posted 28 Oct 2010 Link to this post

    Hi
    I want set the ItemsPanel orientation based on legend position.
    Can you tell me how can i do this in xaml,
    How can i use triggers to get the legendposition ?

    Thanks

  12. Philip
    Philip avatar
    70 posts
    Member since:
    Apr 2008

    Posted 07 Dec 2011 Link to this post

    Has this issued been resolved since the question was raised last year?

    I would like to position the legend along the bottom, with the items listed horizontally instead of vertically (columns, not rows) through the code behind.

  13. Evgenia
    Admin
    Evgenia avatar
    1290 posts
    Member since:
    Sep 2012

    Posted 12 Dec 2011 Link to this post

    Hi Philip,

    You can control the position of the ChartLegend by setting the ChartLegendPosition property to Bottom.
    This is described in our help topic in the Legend Positioning section. By default when the LegendPosition is set to Bottom, the Legend items appear as shown in a row.

    Kind regards,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Back to Top
Download a free trial of UI for WPF