Tooltips

All chart types can show tooltips. Currently there are two ways to show tooltips.

I. Using DataBinding

If you read your data from a data source you can use the toolTipsDataFields property to assign fields from your data source that will provide data for the tooltips. Let's assume you have a list of the following objects:

  

JavaScript

var StudentData = (function () {
        function StudentData(subject, gpa1, gpa2, gpa3) {
            this.Subject = subject;
            this.GPA1 = gpa1;
            this.GPA2 = gpa2;
            this.GPA3 = gpa3;
        }
        return StudentData;
}());

You render a radar chart with three series - each one with data from GPA1, GPA2 and GPA3. 

JavaScript

radarChart.xDataFields = radarChart.yDataFields = new Collections.ObservableCollection(["GPA1", "GPA2", "GPA3"]);
radarChart.toolTipsDataFields = new Collections.ObservableCollection(["Subject", "Subject", "Subject"]);

This is how you set the data and how you specify that the labels from the Subject field shall appear as tooltips.

Alternatively, you can create three DataBoundSeries objects and set the tooltip data fields.

JavaScript

DataBoundSeries series1 = new DataBoundSeries(studenDataList);
series1.xDataField = series1.yDataField = "GPA1";
series1.toolTipsDataField = "Subject";
chart.series.add(series1);
//repeat for the next two series with GPA2 and GPA3 data

II. Customize a Series

The second approach is to customize your chosen Series object. First, define the tooltips:

JavaScript

var tooltips = new Collections.List(["32.7%", "29.5%", "26.2%", "12%", "5%", "2%"]);
funnelChart.series.tooltips = tooltips;

The next step is to override the supportedLabels property of your Series and make it return LabelKinds.ToolTip in addition to the type of labels it already supports. Here we use the SimpleSeries class.

JavaScript

Object.defineProperty(Charting.SimpleSeries.prototype, "supportedLabels", {
            get: function () { return Charting.LabelKinds.InnerLabel | Charting.LabelKinds.ToolTip; },
            enumerable: true,
            configurable: true
        });

The last thing to do is return the correct tooltip when asked for it:

JavaScript

Charting.SimpleSeries.prototype.getLabel = function (index, kind) {
  if ((kind & Charting.LabelKinds.ToolTip) != 0 && this.tooltips)
   return this.tooltips.items()[index];
  
  if (this.labels == null)
   return null;
  return this.labels.items()[index];
 };

You can follow these steps to add tooltip support to any kind of Series.