Edit this page

Label Definition

The series of the RadChartView control expose mechanism for customizing the visualized labels. This article will introduce it to you.

If you wish to customize the default labels of the chart series, you could use Label Definition.

To see labels in the series you have to set ShowLabels="True"

All the properties of a ChartSeriesLabelDefinition are listed here:

  • Binding - Gets or sets the DataPointBinding instance that will retrieve the content of each label.

  • Format - Gets or sets the string used to format the label content, using the String.Format method.

  • Margin - Gets or sets the offset of each label from the four box edges.

  • HorizontalAlignment - Gets or sets the horizontal alignment of each label relative to the DataPoint it is associated with.

  • VerticalAlignment - Gets or sets the vertical alignmentof each label relative to the DataPoint it is associated with.

  • Template - Gets or sets the DataTemplate instance that may be used to define custom labels.

  • TemplateSelector - Gets or sets the DataTemplateSelector instance that may be used to provide context-specific data templates, depending on the provided DataPoint.

  • DefaultVisualStyle - Gets or sets the Style instance that defines the default appearance of the labels. The Style should arget the TextBlock type.

  • Strategy - Gets or sets a custom ChartSeriesLabelStrategy instance that may be used to override the labels' appearance, content and layout.

The example below shows how to bind the label's content to a custom property from your business model. Two Label Definitions are added for each data item.

XAML

<telerik:RadCartesianChart x:Name="myChart"
                           Width="500"
                           Height="300">
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:BarSeries ShowLabels="True" CategoryBinding="Category" ValueBinding="Value">
        <telerik:BarSeries.LabelDefinitions>
            <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Center" >
                <telerik:ChartSeriesLabelDefinition.Template>
                    <DataTemplate>
                        <TextBlock Foreground="DarkBlue" Text="{Binding DataItem.LabelProperty}" />
                    </DataTemplate>
                </telerik:ChartSeriesLabelDefinition.Template>
            </telerik:ChartSeriesLabelDefinition>
            <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Top">
                <telerik:ChartSeriesLabelDefinition.Template>
                    <DataTemplate>
                        <TextBlock Foreground="Black" Text="{Binding DataItem.Value}" />
                    </DataTemplate>
                </telerik:ChartSeriesLabelDefinition.Template>
            </telerik:ChartSeriesLabelDefinition>
        </telerik:BarSeries.LabelDefinitions>
    </telerik:BarSeries>
</telerik:RadCartesianChart>

C#

public class Data
{
    public string Category { get; set; }

    public double Value { get; set; }

    public string LabelProperty { get; set; }

    public static List<Data> CreateData()
    {
        List<Data> collection = new List<Data>();
        collection.Add(new Data { Category = "Apples", Value = 10, LabelProperty = "First Point" });
        collection.Add(new Data { Category = "Oranges", Value = 8, LabelProperty = "Second Point" });
        collection.Add(new Data { Category = "Pineapples", Value = 21, LabelProperty = "Third Point" });
        return collection;
    }
}

this.myChart.Series[0].ItemsSource = Data.CreateData();

The final result of this example should look similar to the next picture.

radchartview-features-labeldefinitions

See Also