Display PointMarks and Labels for Specific points only

This help article will show you how to show PointMarks and Labels for specific points of Line Chart due to some condition - on every fifth day (assuming that on XAxis you have days of the month displayed).

To learn more about showing DateTime values on XAxis please read the DateTime support section.

  • Create a new class named Data, which implements the INotifyPropertyChanged interface. It will be used as an ItemsSource for the chart control. The class has three properties:

  • Date - will be displayed on the X axis.

  • YValue - will be displayed on the Y axis.

  • PointMarkVisibility - will be applied to the PointMark Style (Visibility property).

public class Data : INotifyPropertyChanged 
{ 
  private DateTime _date; 
  private Visibility _pointMarkVisibility; 
  private int _yvalue; 
  public Data(DateTime date, int yvalue) 
  { 
   this._date = date; 
   this._yvalue = yvalue; 
   this.UpdatePointMarkVisibility(); 
  } 
  public event PropertyChangedEventHandler PropertyChanged; 
  public DateTime Date 
  { 
   get 
   { 
     return _date; 
   } 
   set 
   { 
    if (this._date == value) 
    return; 
    this._date = value; 
    this.OnPropertyChanged("Date"); 
   } 
 } 
   public int YValue 
   { 
     get 
      { 
       return _yvalue; 
       } 
    set 
     { 
      if (this._yvalue == value) 
      return; 
      this._yvalue = value; 
      this.OnPropertyChanged("YValue"); 
     } 
   } 
   public Visibility PointMarkVisibility 
   { 
    get 
     { 
      return _pointMarkVisibility; 
     } 
    private set 
     { 
      if (object.Equals(this._pointMarkVisibility, value)) 
      return; 
      this._pointMarkVisibility = value; 
      this.OnPropertyChanged("PointMarkVisibility"); 
     } 
  } 
   protected virtual void OnPropertyChanged(string propertyName) 
   { 
     if (this.PropertyChanged != null) 
     this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
   } 
   private void UpdatePointMarkVisibility() 
   { 
     if (this.Date.Day%5 != 0) 
     this.PointMarkVisibility = Visibility.Collapsed; 
     else 
     this.PointMarkVisibility = Visibility.Visible; 
   } 
} 
Public Class Data 
    Implements INotifyPropertyChanged 
    Private _date As Date 
    Private _pointMarkVisibility As Visibility 
    Private _yvalue As Integer 
    Public Sub New(ByVal [date] As Date, ByVal yvalue As Integer) 
        Me._date = [date] 
        Me._yvalue = yvalue 
        Me.UpdatePointMarkVisibility() 
    End Sub 
    Public Property Date As Date 
        Get 
            Return _date 
        End Get 
        Set(ByVal value As Date) 
            If Me._date = value Then 
                Return 
            End If 
            Me._date = value 
            Me.OnPropertyChanged("Date") 
        End Set 
    End Property 
    Public Property YValue() As Integer 
        Get 
            Return _yvalue 
        End Get 
        Set(ByVal value As Integer) 
            If Me._yvalue = value Then 
                Return 
            End If 
            Me._yvalue = value 
            Me.OnPropertyChanged("YValue") 
        End Set 
    End Property 
    Public Property PointMarkVisibility() As Visibility 
        Get 
            Return _pointMarkVisibility 
        End Get 
        Private Set(ByVal value As Visibility) 
            If Object.Equals(Me._pointMarkVisibility, value) Then 
                Return 
            End If 
            Me._pointMarkVisibility = value 
            Me.OnPropertyChanged("PointMarkVisibility") 
        End Set 
    End Property 
    Protected Overridable Sub OnPropertyChanged(ByVal propertyName As String) 
        If Me.PropertyChangedEvent IsNot Nothing Then 
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName)) 
        End If 
    End Sub 
    Private Sub UpdatePointMarkVisibility() 
        If Me.Date.Day Mod 5 <> 0 Then 
            Me.PointMarkVisibility = Visibility.Collapsed 
        Else 
            Me.PointMarkVisibility = Visibility.Visible 
        End If 
    End Sub 
 
    Public Event PropertyChanged(sender As Object, e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged 
End Class 

Note the UpdatePointMarkVisibility *method called in the constructor of the class which sets *PointMarkVisibility property to visible only if the Day is dividable by 5, which is our condition to show Point Marks.

Add a new chart declaration to your XAML:

<telerik:RadChart x:Name="chart"/> 
  • Add the PointMark Style between the UserControl starting and ending tag. Add Visibility *Property databound to *DataItem.PointMarksVisibility property of the class. Here is how the Style should look like:

<Style x:Key="MyPointMark_Style" TargetType="telerik:PointMark"> 
    <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate TargetType="telerik:PointMark"> 
                <Canvas> 
                    <Path x:Name="PART_PointMarkPath" 
            Canvas.Left="{TemplateBinding PointMarkCanvasLeft}" 
            Canvas.Top="{TemplateBinding PointMarkCanvasTop}" 
            Style="{TemplateBinding ShapeStyle}" 
            Width="{TemplateBinding Size}" 
            Height="{TemplateBinding Size}" 
            Visibility="{Binding DataItem.PointMarkVisibility}" 
            Stretch="Fill"> 
                        <Path.Data> 
                            <PathGeometry x:Name="PART_PointMarkPathGeometry" /> 
                        </Path.Data> 
                    </Path> 
                </Canvas> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 
  • The chart will be built in the code-behind and White Space String will be assigned to every point's Label if it's Day is not dividable by 5:

List<Data> exportData = new List<Data>(); 
DateTime baseDate = new DateTime(2011, 1, 1); 
Random r = new Random(); 
for (int i = 0; i < 30; i++) 
{ 
    exportData.Add(new Data(baseDate.AddDays(i), r.Next(-10, 20))); 
} 
 
SeriesMapping mapping = new SeriesMapping(); 
mapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue)); 
mapping.ItemMappings.Add(new ItemMapping("Date", DataPointMember.XCategory)); 
chart.ItemsSource = exportData; 
chart.SeriesMappings.Add(mapping); 
chart.DefaultView.ChartArea.AxisX.IsDateTime = true; 
 
chart.DefaultView.ChartArea.AxisX.LabelRotationAngle = 45; 
chart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "dd-MM-yy"; 
 
LineSeriesDefinition line = new LineSeriesDefinition(); 
chart.DefaultSeriesDefinition = line; 
line.ShowPointMarks = true; 
line.ShowItemLabels = true; 
chart.DefaultSeriesDefinition.PointMarkItemStyle = this.Resources["MyPointMark_Style"] as Style; 
chart.DataBound += (o, e) => 
{ 
    var dataSeries = chart.DefaultView.ChartArea.DataSeries.FirstOrDefault(); 
    if (dataSeries != null) 
    { 
        foreach (var point in dataSeries.ToList()) 
        { 
            DateTime myDate = DateTime.Parse(point.XCategory); 
            if (myDate.Day % 5 != 0) 
            { 
                point.Label = " "; 
            } 
        } 
    } 
}; 
Dim exportData As New List(Of Data)() 
Dim baseDate As New Date(2011, 1, 1) 
Dim r As New Random() 
For i As Integer = 0 To 29 
    exportData.Add(New Data(baseDate.AddDays(i), r.Next(-10, 20))) 
Next i 
 
Dim mapping As New SeriesMapping() 
mapping.ItemMappings.Add(New ItemMapping("YValue", DataPointMember.YValue)) 
mapping.ItemMappings.Add(New ItemMapping("Date", DataPointMember.XCategory)) 
chart.ItemsSource = exportData 
chart.SeriesMappings.Add(mapping) 
chart.DefaultView.ChartArea.AxisX.IsDateTime = True 
 
chart.DefaultView.ChartArea.AxisX.LabelRotationAngle = 45 
chart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "dd-MM-yy" 
 
Dim line As New LineSeriesDefinition() 
chart.DefaultSeriesDefinition = line 
line.ShowPointMarks = True 
line.ShowItemLabels = True 
chart.DefaultSeriesDefinition.PointMarkItemStyle = TryCast(Me.Resources("MyPointMark_Style"), Style) 
AddHandler chart.DataBound, Sub(o, e) 
                                Dim dataSeries = chart.DefaultView.ChartArea.DataSeries.FirstOrDefault() 
                                If dataSeries IsNot Nothing Then 
                                    For Each point In dataSeries.ToList() 
                                        Dim myDate As Date = Date.Parse(point.XCategory) 
                                        If myDate.Day Mod 5 <> 0 Then 
                                            point.Label = " " 
                                        End If 
                                    Next point 
                                End If 
                            End Sub 

The result can be seen on the image below:

In this article
Not finding the help you need? Improve this article