Edit this page

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).

C#

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;
   }
}

VB.NET

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:

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:

XAML

<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:

C#

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 = " ";
            }
        }
    }
};

VB.NET

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: