Using Custom Markers
Send Feedback

Glossary Item Box

Topic Overview


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


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


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.


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.



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


The following topic provides additional information related to this topic.



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