This is a migrated thread and some comments may be shown as answers.

Smart Label Connectors - custom width, margin

2 Answers 25 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Andrew Bramblett
Top achievements
Rank 1
Andrew Bramblett asked on 17 Jun 2015, 03:34 PM

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 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 18 Jun 2015, 01:28 PM
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
0
Andrew Bramblett
Top achievements
Rank 1
answered on 18 Jun 2015, 05:27 PM
Just what I needed, thanks!
Tags
ChartView
Asked by
Andrew Bramblett
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Andrew Bramblett
Top achievements
Rank 1
Share this question
or