Using Custom Markers
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides an introductory overview of using custom markers on the IGChartView™ control and provides a code example demonstrating its configuration.

In this topic


Introduction

Custom markers summary

The use of custom markers allows you to insert a UIView in place of a marker on a data point. To enable custom markers, adopt the IGChartViewDelegate protocol, and handle the chartView:viewForMarkerInSeries:withItem:index:originalSourceItem:displayOptions: method. Custom markers can display as an image of a UIView or a UIView for greater functionality. By default the custom marker will display as an image of a UIView , to display the marker as an interactive UIView set the displayAsImage property found in the displayOptions parameter to NO.

The displayOptions parameter contains two other properties for customizing the display of custom marker, showOriginalMarker and bringOriginalMarkerToFront. The showOriginalMarker property will place the original marker shape before displaying the custom view. The marker shape will only be seen if the view is not fully opaque or if the view is offset enough not to obstruct the marker. The bringOriginalMarkerToFront property makes the marker shape top-most, so the custom view can be fully opaque and the marker shape will still be visible.


Configuring Custom Markers – Code Example

Description

The code example demonstrates how the IGChartViewDelegate handles the chartView:viewForMarkerInSeries:withItem:index:originalSourceItem:displayOptions: delegate method. The method returns a rounded UILabel containing the value of the category point. The chart using custom markers illustrated in the preview is a column chart using the IGThemeDark gradient theme.

Prerequisites

This code example requires the inclusion of the Chart framework; details about how to add this framework are available in the Adding the Chart Framework File topic.

Preview

Code

In Objective-C:

- (UIView *)chartView:(IGChartView *)chartView viewForMarkerInSeries:(IGSeries *)series withItem:(NSObject *)item index:(NSInteger)index originalSourceItem:(NSObject *)originalSourceItem displayOptions:(IGMarkerDisplayOptions *)options
{
    UILabel *label = [[UILabel alloc] init];
    IGCategoryPoint *pt = (IGCategoryPoint *)item;
    if (pt == nil) return nil;
    label.backgroundColor = [UIColor lightGrayColor];
    label.text = [NSString stringWithFormat:@" %.1f ", pt.value];
    label.layer.cornerRadius = 8.0;
    [label sizeToFit];
    return label;
}

In C#:

public class ChartDelegate : IGChartViewDelegate
{
      public override UIView ResolveMarkerView (IGChartView chartView, IGSeries series, NSObject item, int index, NSObject originalSourceItem, IGMarkerDisplayOptions options)
      {
            UILabel label = new UILabel ();
            IGCategoryPoint pt = item as IGCategoryPoint;
            if (pt == null) return null;
            label.BackgroundColor = UIColor.LightGray;
            label.Text = String.Format (" {0:0.0} ", pt.Value);
            label.Layer.CornerRadius = 8.0f;
            label.SizeToFit ();
            return label;
      }
}

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

The topics in this group cover enabling, configuring, and using the IGChartView control’s supported features.