Smart Label Connectors - custom width, margin

[Andrew Bramblett]

Hello, 

I'm using the smart labels with a SplineSeries and ScatterSplineSeries, and I'd like to customize the label connectors by changing their width, and in particular, their margin and background. Is there a template I can use or class I can derive a new class from so that I can do this?

A short, simplified example of a chart with connectors:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="SilverlightApplication3.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
             Loaded="UserControl_Loaded">

<UserControl.Resources>
<Style x:Key="SplineSeriesStrokeShapeStyle" TargetType="Path">
<Setter Property="StrokeThickness">
<Setter.Value>
<System:Double>2</System:Double>
</Setter.Value>
</Setter>
<Setter Property="Stroke" Value="#FF8EC464"/>
</Style>

        <telerik:ChartSeriesLabelConnectorsSettings x:Key="SplineSeriesLabelConnectorSettings" >
        </telerik:ChartSeriesLabelConnectorsSettings>
        
        <DataTemplate x:Key="PointLabelDataTemplate">
            <TextBlock Foreground="Aquamarine"
                                    FontSize="9"
                                    VerticalAlignment="Top"
                                    HorizontalAlignment="Stretch" TextAlignment="Center"
                       Text="fred"
                                    >
            </TextBlock>
        </DataTemplate>
    </UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadCartesianChart Palette="Windows8">
               <telerik:RadCartesianChart.SmartLabelsStrategy>
                    <telerik:ChartSmartLabelsStrategy ShouldMinimizeConnectorConflicts="False"/>
                </telerik:RadCartesianChart.SmartLabelsStrategy>

<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis />
</telerik:RadCartesianChart.VerticalAxis>
<telerik:SplineSeries StrokeShapeStyle="{StaticResource SplineSeriesStrokeShapeStyle}" ShowLabels="True"
                                  LabelConnectorsSettings="{StaticResource SplineSeriesLabelConnectorSettings}"
                                  
                                  >
<telerik:CategoricalDataPoint Category="January" Value="2" />
<telerik:CategoricalDataPoint Category="February" Value="5" />
<telerik:CategoricalDataPoint Category="March" Value="3" />
<telerik:CategoricalDataPoint Category="April" Value="10" />
<telerik:CategoricalDataPoint Category="May" Value="9" />
<telerik:CategoricalDataPoint Category="June" Value="7" />
<telerik:CategoricalDataPoint Category="July" Value="1" />
</telerik:SplineSeries>
</telerik:RadCartesianChart>
</Grid>
</UserControl>

[Martin Ivanov]

Hello Andrew,

You can customize the appearance of the label's connectors through the ChartSeriesLabelConnectorsSettings' Style property. Here is an example in code:

<telerik:ChartSeriesLabelConnectorsSettings  x:Key="SplineSeriesLabelConnectorSettings" >
    <telerik:ChartSeriesLabelConnectorsSettings.Style>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Red" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="Margin" Value="0 -5 0 0" />
        </Style>
    </telerik:ChartSeriesLabelConnectorsSettings.Style>
</telerik:ChartSeriesLabelConnectorsSettings>

Please check out this approach and let me know if it works for you.

Regards,
Martin
Telerik

[Andrew Bramblett]

Just what I needed, thanks!