ToolTip Behavior

The Tooltip behavior of the Chart is responsible for rendering concise information about a data point in a small popup which is displayed close to its relevant data point.

Features

The ToolTip behavior of the Chart supports the TriggerMode property that determines the gestures on which the ChartToolTipBehavior will show a tool tip. The available values are: - Tap - Hold

Example

The following example shows how the ToolTip behavior of the Chart works:

  1. Create the business object:

    public class TemporalData
    {
    public DateTime Date { get; set; }
    
    public double Value { get; set; }
    }
    
  2. Create a ViewModel:

    public class ViewModel
    {
    public ObservableCollection<TemporalData> Data { get; set; }
    
    public ViewModel()
    {
        this.Data = new ObservableCollection<TemporalData>(GetDateTimeData(200));
    }
    
    private static List<TemporalData> GetDateTimeData(int itemsCount)
    {
        var startDate = new DateTime(2015, 03, 01);
    
        List<TemporalData> items = new List<TemporalData>();
        for (int i = 0; i < itemsCount; i++)
        {
            TemporalData data = new TemporalData();
            data.Date = startDate.AddDays(i);
    
            if (i % 2 == 0)
            {
                data.Value = i + 5;
            }
            else
            {
                if (i % 5 == 0)
                {
                    data.Value = i - 15;
                }
            }
    
            items.Add(data);
        }
    
        return items;
    }
    }
    
  3. Declare a RadCartesianChart in XAML:

    <telerikChart:RadCartesianChart PaletteName="Light"
                                  Zoom="2, 1">
      <telerikChart:RadCartesianChart.BindingContext>
          <local:ViewModel/>
      </telerikChart:RadCartesianChart.BindingContext>
      <telerikChart:RadCartesianChart.HorizontalAxis>
          <telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate"
                                               MajorStepUnit="Day"
                                               PlotMode="OnTicks"
                                               LabelFormat="dd MMM"
                                               MajorStep="20"
                                               ShowLabels="True"/>
      </telerikChart:RadCartesianChart.HorizontalAxis>
      <telerikChart:RadCartesianChart.VerticalAxis>
          <telerikChart:NumericalAxis />
      </telerikChart:RadCartesianChart.VerticalAxis>
      <telerikChart:RadCartesianChart.Series>
          <telerikChart:LineSeries ValueBinding="Value"
                                   CategoryBinding="Date"
                                   DisplayName="Sales"
                                   ItemsSource="{Binding Data}"/>
      </telerikChart:RadCartesianChart.Series>
      <telerikChart:RadCartesianChart.ChartBehaviors>
          <telerikChart:ChartPanAndZoomBehavior ZoomMode="Horizontal"
                                                PanMode="Horizontal"
                                                HandleDoubleTap="True"/>
      </telerikChart:RadCartesianChart.ChartBehaviors>
    </telerikChart:RadCartesianChart>
    

    The following image shows how the ToolTip looks:

Chart Tooltip Behavior

See Also

In this article
Not finding the help you need?