Configuring the Callout Layer (igDataChart)

Topic Overview

Purpose

This topic provides information about the callout layer annotations. It describes the properties of the callout layer and also provides an example of its implementation.

Required background

The following topics are prerequisites to understanding this topic:

• Adding igDataChart: This topic demonstrates how to add the igDataChart™ control to a page and bind it to data.

• Binding igDataChart to Data: This topic explains how to bind the igDataChart™ control to various data sources (JavaScript array, IQueryable<T>, web service).

In this topic

This topic contains the following sections:

• Overview
  • Preview
• Properties
• Example
• Related Content
  • Topics
  • Samples

Overview

Callout Layer Overview

The calloutLayer displays annotations from existing or new data on the chart.

Preview

The following image is a preview of how the igDataChart control renders with the calloutLayer added.

Properties

Callout Layer Summary

The following table summarizes the properties of the calloutLayer layer.

Example

The code snippet below demonstrates how to configure a couple callout layers.

In HTML:

$(function () {
    $("#chart1").igDataChart({
        series: [
            {
                name: "calloutSeriesUsa",
                type: "calloutLayer",
                dataSource: usaCallouts,
                xMemberPath: "Index",
                yMemberPath: "Value",
                labelMemberPath: "Label"
            },
            {
                name: "calloutSeriesRus",
                type: "calloutLayer",
                dataSource: rusCallouts,
                xMemberPath: "Index",
                yMemberPath: "Value",
                labelMemberPath: "Label"
            }
        ]
    });
});

Related Content

Topics

• Hover Interactions Overview (igDataChart): This topic provides conceptual information about the hover interactions available on the igDataChart control including the different types of hover interaction layers available.

Samples

The following samples provide additional information related to this topic.

• Callouts Layers: This sample demonstrates using the Callout annotation layer in the igDataChart