Smart Label Connectors - custom width, margin

3 posts, 0 answers
  1. Andrew Bramblett
    Andrew Bramblett avatar
    3 posts
    Member since:
    May 2010

    Posted 17 Jun 2015 Link to this post


    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:

        xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="SilverlightApplication3.MainPage"
        d:DesignHeight="300" d:DesignWidth="400"

    <Style x:Key="SplineSeriesStrokeShapeStyle" TargetType="Path">
    <Setter Property="StrokeThickness">
    <Setter Property="Stroke" Value="#FF8EC464"/>

            <telerik:ChartSeriesLabelConnectorsSettings x:Key="SplineSeriesLabelConnectorSettings" >
            <DataTemplate x:Key="PointLabelDataTemplate">
                <TextBlock Foreground="Aquamarine"
                                        HorizontalAlignment="Stretch" TextAlignment="Center"

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

    <telerik:LinearAxis />
    <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" />

  2. Martin Ivanov
    Martin Ivanov avatar
    1408 posts

    Posted 18 Jun 2015 Link to this post

    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" >
            <Style TargetType="Path">
                <Setter Property="Stroke" Value="Red" />
                <Setter Property="StrokeThickness" Value="2" />
                <Setter Property="Margin" Value="0 -5 0 0" />
    Please check out this approach and let me know if it works for you.

    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 Feedback Portal and vote to affect the priority of the items
  3. Andrew Bramblett
    Andrew Bramblett avatar
    3 posts
    Member since:
    May 2010

    Posted 18 Jun 2015 in reply to Martin Ivanov Link to this post

    Just what I needed, thanks!
Back to Top