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

    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>

  2. Martin
    Admin
    Martin avatar
    1099 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" >
        <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
    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. DevCraft banner
  4. Andrew Bramblett
    Andrew Bramblett avatar
    3 posts
    Member since:
    May 2010

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

    Just what I needed, thanks!
Back to Top