This is a migrated thread and some comments may be shown as answers.

Displaying Legend Horizontaly

11 Answers 310 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Gilberto
Top achievements
Rank 1
Gilberto asked on 26 May 2009, 04:40 AM
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>

11 Answers, 1 is accepted

Sort by
0
Dwight
Telerik team
answered on 27 May 2009, 08:19 AM
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.
0
Dwight
Telerik team
answered on 27 May 2009, 01:53 PM
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.
0
Kevin
Top achievements
Rank 1
answered on 27 Jun 2009, 08:50 PM
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

 

0
Dwight
Telerik team
answered on 01 Jul 2009, 08:28 AM
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.
0
Aris
Top achievements
Rank 1
answered on 03 Jul 2009, 11:49 AM
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!!
0
Aris
Top achievements
Rank 1
answered on 06 Jul 2009, 10:10 AM
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> 
 

0
gradford
Top achievements
Rank 1
answered on 05 Nov 2009, 06:11 PM
Is there any way to display the chart legend along the top with horizontal legend items strictly using C#?
0
Dwight
Telerik team
answered on 10 Nov 2009, 08:35 AM
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.
0
Rakhi
Top achievements
Rank 1
answered on 28 Oct 2010, 06:28 AM
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
0
Philip
Top achievements
Rank 1
answered on 07 Dec 2011, 05:07 PM
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.
0
Evgenia
Telerik team
answered on 12 Dec 2011, 10:04 AM
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
Tags
Chart
Asked by
Gilberto
Top achievements
Rank 1
Answers by
Dwight
Telerik team
Kevin
Top achievements
Rank 1
Aris
Top achievements
Rank 1
gradford
Top achievements
Rank 1
Rakhi
Top achievements
Rank 1
Philip
Top achievements
Rank 1
Evgenia
Telerik team
Share this question
or