can we put scrolling for telerik chart legend

[Priyanka]

Hello,

Can we put scrolling for chart legend, When there are many items in legend, legend section width gets increased. Is there any solution? and can we set label connectors width

thanks in advance 

[Priyanka]

Hiee,

I have seen  solution for this problem in another post but that solution is with dataseries and by setting 'UseDefaultLayout=false' , I want to give scrolling to chart legend of pie chart where i am using item mapping(that is seriesmapping). So is there any solution for pie chart with seriesmapping.
 
Please help its urgent...

Thanks in advance

[Giuseppe]

Hello Priyanka,

You can achieve the desired functionality for a databound chart with default layout by customizing the ChartLegend template to contain a ScrollViewer like this:

XAML

<UserControl.Resources>
    <SolidColorBrush x:Key="LegendForeground" Color="#FF000000" />
    <LinearGradientBrush x:Key="LegendBackground" EndPoint="1.96,0.5" StartPoint="-0.96,0.5">
        <GradientStop Color="#FFB5B5B5"/>
        <GradientStop Color="#FFF0F0F0" Offset="0.5"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="LegendBorderBrush" Color="#FF848484" />

    <Style x:Key="CustomLegendStyle" TargetType="telerik:ChartLegend">
        <Setter Property="Foreground" Value="{StaticResource LegendForeground}" />
        <Setter Property="Background" Value="{StaticResource LegendBackground}" />
        <Setter Property="Padding" Value="10,10,10,5" />
        <Setter Property="Margin" Value="0,0,0,0"/>
        <Setter Property="BorderBrush" Value="{StaticResource LegendBorderBrush}" />
        <Setter Property="BorderThickness" Value="1,1,1,1" />
        <Setter Property="TitleFontWeight" Value="Bold" />
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:ChartLegend">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" >
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <ContentControl Foreground="{TemplateBinding Foreground}"
                                            FontWeight="{TemplateBinding TitleFontWeight}"
                                            Content="{TemplateBinding Header}"
                                            ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                            <ScrollViewer  Grid.Row="1" HorizontalScrollBarVisibility="Hidden"  VerticalScrollBarVisibility="Auto">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel" >
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel  Orientation="Vertical" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
    <telerik:RadChart x:Name="RadChart1" />
</Grid>

C#

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        List<ChartData> data = new List<ChartData>();
        data.Add(new ChartData() { YValue = 20 });
        data.Add(new ChartData() { YValue = 70 });
        data.Add(new ChartData() { YValue = 30 });
        data.Add(new ChartData() { YValue = 40 });
        data.Add(new ChartData() { YValue = 45 });
        data.Add(new ChartData() { YValue = 20 });
        data.Add(new ChartData() { YValue = 70 });
        data.Add(new ChartData() { YValue = 30 });
        data.Add(new ChartData() { YValue = 40 });
        data.Add(new ChartData() { YValue = 45 });
        data.Add(new ChartData() { YValue = 20 });
        data.Add(new ChartData() { YValue = 70 });
        data.Add(new ChartData() { YValue = 30 });
        data.Add(new ChartData() { YValue = 40 });
        data.Add(new ChartData() { YValue = 45 });
        data.Add(new ChartData() { YValue = 20 });
        data.Add(new ChartData() { YValue = 70 });
        data.Add(new ChartData() { YValue = 30 });
        data.Add(new ChartData() { YValue = 40 });
        data.Add(new ChartData() { YValue = 45 });

        RadChart1.DefaultView.ChartLegend.Style = this.Resources["CustomLegendStyle"] as Style;
        RadChart1.DefaultSeriesDefinition = new PieSeriesDefinition();
        RadChart1.ItemsSource = data;
    }
}

public class ChartData
{
    public double YValue
    {
        get;
        set;
    }
}

Hope this helps.


Sincerely yours,
Freddie
the Telerik team

[muthukumar]

Hi,

I am using RadHtmlChart.  

Can we put scrolling for chart legend, When there are many items in legend, legend section width gets increased. Is there any solution? 

Urgently required.

Thanks in advance.

 

 

[Martin Ivanov]

Hello Muthukumar,

Please note that this is the UI for Silverlight forum. Your question seems related to the ASP.NET chart control. This is why I would ask you to post your question in the corresponding forum.

Regards,
Martin
Telerik