Displaying Legend Horizontaly

[Gilberto]

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>

[Dwight]

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.

[Dwight]

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.

[Kevin]

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

 

[Dwight]

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.

[Aris]

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!!

[Aris]

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>

[gradford]

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

[Dwight]

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.

[Rakhi]

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

[Philip]

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.

[Evgenia]

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