Series Labels

TheRadChartViewcontrol exposes a mechanism to display and customize series labels.

To display labels for the data points in the chart series, set the series'ShowLabelsproperty toTrue.

Example 1: Enabling Labels

Figure 1: Series labels

Customizing Labels

To customize the labels of the chart series, you can use theChartSeriesLabelDefinitionelement. The definition describes the label settings and it is used in theLabelDefinitionscollection of the chart series. One series can contain multiple definitions. Each data point will get a label for each label definition in the collection. For example, if the collection contains 2 definitions, 2 labels will be displayed per a data point visual.

The following example shows how to setup the chart in a data binding scenario and use ChartSeriesLabelDefinition to display custom labels.

Example 2: Defining data point model

public class PlotInfo { public string Category { get; set; } public double Value { get; set; } public string Label { get; set; } }

Example 3: Populating with data

public MyUserControl() { InitializeComponent(); var source = new ObservableCollection(); source.Add(new PlotInfo() { Category = "A", Value = 10, Label = "Second Label A" }); source.Add(new PlotInfo() { Category = "B", Value = 5, Label = "Second Label B" }); source.Add(new PlotInfo() { Category = "C", Value = 14, Label = "Second Label C" }); this.DataContext = source; }

示例4:定义两个标签定义的广告d two label per data point

Figure 2: Customized labels

The following list describes the properties available in theChartSeriesLabelDefinitionclass.

• Binding:DataPointBindinginstance that points to a property of the data point underlying data item which gets the content of each label.

• Format: Format string used to format the label content, using theString.Formatmethod.

• Margin: Determines the offset of each label from the four box edges.

• HorizontalAlignment: Determines the horizontal alignment of each label relative to the data point it is associated with.

• VerticalAlignment: Determines the vertical alignment of each label relative to the data point it is associated with.

• DefaultVisualStyle: Sets aStyleinstance that defines the appearance of the default visual element representing the labels. TheTargetTypeproperty of theStyleshould use theTextBlocktype which is the default visual.

• Template: Sets aDataTemplateinstance that will be used to define the visual element of the labels. If the Template property is set, the DefaultVisualStyle doesn't take effect. This is because in this case the default visual element is replaced by a content presenter with the customDataTemplate.

• TemplateSelector: Sets aDataTemplateSelectorinstance that is used to provide context-specific data templates, depending on the provided data point.

• Strategy: Allows you to define and set a customChartSeriesLabelStrategyinstance that determines the labels' appearance, content and layout (size and position). Read more in theChart Series Label Strategyarticle.

  图表还支持智能标签策略is slightly different than the label definition's strategy. Read more in theSmart Labelsarticle.

Using LabelDefinitions and SeriesProvider

In case the chart'sSeriesProvideris used, theLabelDefinitionscollection is not accessible in XAML. In this case, there are two approaches that can be implemented. This section shows how to use them with a sample data binding setup.

Example 5: Defining series model (see Example 2 for the PlotInfo definition)

public class SeriesInfo { public ObservableCollection Items { get; set; } }

Example 6: Populating the data

private static Random r = new Random(); public MyUserControl() { InitializeComponent(); var source = new ObservableCollection(); for (int s = 0; s < 3; s++) { var seriesInfo = new SeriesInfo() { Items = new ObservableCollection() }; for (int i = 0; i < 5; i++) { var dpValue = r.Next(100, 300); seriesInfo.Items.Add(new PlotInfo() { Category = "C" + i, Value = dpValue }); } source.Add(seriesInfo); } this.DataContext = source; }

• Using an attached property

  An attached property implementation will allow you to define a ChartSeriesLabelDefinition in XAML and then add it in code, using the PropertyChangedCallback of the property. The next example shows one way to implement this.

  Example 7: Implementing the attached property

  public static class ChartUtilities { public static readonly DependencyProperty LabelDefinitionProperty = DependencyProperty.RegisterAttached( "LabelDefinition", typeof(ChartSeriesLabelDefinition), typeof(ChartUtilities), new PropertyMetadata(new ChartSeriesLabelDefinition(), OnLabelDefinitionChanged)); public static ChartSeriesLabelDefinition GetLabelDefinition(DependencyObject obj) { return (ChartSeriesLabelDefinition)obj.GetValue(LabelDefinitionProperty); } public static void SetLabelDefinition(DependencyObject obj, ChartSeriesLabelDefinition value) { obj.SetValue(LabelDefinitionProperty, value); } private static void OnLabelDefinitionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var series = (CartesianSeries)d; series.LabelDefinitions.Clear(); if (e.NewValue != null) { var labelDefinition = (ChartSeriesLabelDefinition)e.NewValue; series.LabelDefinitions.Add(labelDefinition); } } }

  
  

  Example 8: Adding label definition with an attached property

• Using the SeriesCreated event

  TheSeriesCreatedevent gives access to the generated series, so the event handler can be used to create ChartSeriesLabelDefinition objects in code.

  Example 9: Adding label definition using the SeriesCreated event

  
  

  Example 10: Implement the SeriesCreated event handler

  private void ChartSeriesProvider_SeriesCreated(object sender, Telerik.Windows.Controls.ChartView.ChartSeriesCreatedEventArgs e) { var labelDefinition = new ChartSeriesLabelDefinition() { Binding = new PropertyNameDataPointBinding("Value"), VerticalAlignment = VerticalAlignment.Top, HorizontalAlignment = HorizontalAlignment.Center, Margin = new Thickness(0, 0, 0, 10), }; e.Series.LabelDefinitions.Add(labelDefinition); }

  Figure 3: Customized labels with SeriesProvider

  

See Also

• Smart Labels