Demonstrates the SciChart iOS Charts Annotations API, which allows UIView elements to be placed over the iOS Chart at specific X and Y data-values.

In this example you can tap and manipulate annotations be dragging the annotation body, or, dragging the annotation corners.

Annotation Types Include:

– AxisMarkerAnnotation
– BoxAnnotation
– CustomAnnotation
– HorizontalLineAnnotation
– LineAnnotation
– LineArrowAnnotation
– TextAnnotation
– VerticalLineAnnotation

Documentation Links

– iOS Annotations API Documentation
– SCIAnnotationCollection

// AnnotationsChartView.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// AnnotationsAreEasyView.m is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

#import "AnnotationsAreEasyView.h"

@implementation AnnotationsAreEasyView

- (Class)associatedType { return SCIChartSurface.class; }

- (BOOL)showDefaultModifiersInToolbar { return NO; }

- (void)initExample  {
    SCINumericAxis *xAxis = [SCINumericAxis new];
    xAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
    xAxis.visibleRange = [[SCIDoubleRange alloc] initWithMin:0.0 max:10.0];
    
    SCINumericAxis *yAxis = [SCINumericAxis new];
    yAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
    yAxis.visibleRange = [[SCIDoubleRange alloc] initWithMin:0.0 max:10.0];
    
    [SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
        [self.surface.xAxes add:xAxis];
        [self.surface.yAxes add:yAxis];
        
        // Watermark
        SCITextAnnotation *watermark = [SCITextAnnotation new];
        watermark.x1 = @(0.5);
        watermark.y1 = @(0.5);
        watermark.coordinateMode = SCIAnnotationCoordinateMode_Relative;
        watermark.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Center;
        watermark.verticalAnchorPoint = SCIVerticalAnchorPoint_Center;
        watermark.text = @"Create \nWatermarks";
        watermark.fontStyle = [[SCIFontStyle alloc] initWithFontSize:42 andTextColorCode:0x55FFFFFF];
        
        // Text annotations
        SCITextAnnotation *textAnnotation1 = [SCITextAnnotation new];
        textAnnotation1.x1 = @(0.3);
        textAnnotation1.y1 = @(9.7);
        textAnnotation1.text = @"Annotations are Easy!";
        textAnnotation1.fontStyle = [[SCIFontStyle alloc] initWithFontSize:22 andTextColor:SCIColor.whiteColor];
        
        SCITextAnnotation *textAnnotation2 = [SCITextAnnotation new];
        textAnnotation2.x1 = @(1.0);
        textAnnotation2.y1 = @(9.0);
        textAnnotation2.text = @"You can create text";
        textAnnotation2.fontStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColor:SCIColor.whiteColor];
        
        SCITextAnnotation *editableTextAnnotation = [SCITextAnnotation new];
        editableTextAnnotation.x1 = @(1.0);
        editableTextAnnotation.y1 = @(8.8);
        editableTextAnnotation.canEditText = YES;
        editableTextAnnotation.text = @"And even edit it ... (tap me)";
        editableTextAnnotation.fontStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColor:SCIColor.whiteColor];
        
        // Text with Anchor Points
        SCITextAnnotation *textAnnotation3 = [SCITextAnnotation new];
        textAnnotation3.x1 = @(5.0);
        textAnnotation3.y1 = @(8.0);
        textAnnotation3.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Center;
        textAnnotation3.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
        textAnnotation3.text = @"Anchor Center (x1, y1)";
        
        SCITextAnnotation *textAnnotation4 = [SCITextAnnotation new];
        textAnnotation4.x1 = @(5.0);
        textAnnotation4.y1 = @(8.0);
        textAnnotation4.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Right;
        textAnnotation4.verticalAnchorPoint = SCIVerticalAnchorPoint_Top;
        textAnnotation4.text = @"Anchor Right";
        
        SCITextAnnotation *textAnnotation5 = [SCITextAnnotation new];
        textAnnotation5.x1 = @(5.0);
        textAnnotation5.y1 = @(8.0);
        textAnnotation5.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Left;
        textAnnotation5.verticalAnchorPoint = SCIVerticalAnchorPoint_Top;
        textAnnotation5.text = @"or Anchor Left";
        
        // Line and line arrow annotations
        SCITextAnnotation *textAnnotation6 = [SCITextAnnotation new];
        textAnnotation6.x1 = @(0.3);
        textAnnotation6.y1 = @(6.1);
        textAnnotation6.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
        textAnnotation6.text = @"Draw Lines with \nor without Arrows";
        textAnnotation6.fontStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColor:SCIColor.whiteColor];
        
        SCILineAnnotation *lineAnnotation = [SCILineAnnotation new];
        lineAnnotation.x1 = @(1.0);
        lineAnnotation.y1 = @(4.0);
        lineAnnotation.x2 = @(2.0);
        lineAnnotation.y2 = @(6.0);
        lineAnnotation.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xFF555555 thickness:2];
        
        SCILineArrowAnnotation *lineArrowAnnotation = [SCILineArrowAnnotation new];
        lineArrowAnnotation.x1 = @(1.2);
        lineArrowAnnotation.y1 = @(3.8);
        lineArrowAnnotation.x2 = @(2.5);
        lineArrowAnnotation.y2 = @(6.0);
        lineArrowAnnotation.headLength = 4;
        lineArrowAnnotation.headWidth = 8;
        lineArrowAnnotation.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xFF555555 thickness:2];
        
        // Box annotations
        SCITextAnnotation *textAnnotation7 = [SCITextAnnotation new];
        textAnnotation7.x1 = @(3.5);
        textAnnotation7.y1 = @(6.1);
        textAnnotation7.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
        textAnnotation7.text = @"Draw Boxes";
        textAnnotation7.fontStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColor:SCIColor.whiteColor];
        
        SCIBoxAnnotation *boxAnnotation1 = [SCIBoxAnnotation new];
        boxAnnotation1.x1 = @(3.5);
        boxAnnotation1.y1 = @(4.0);
        boxAnnotation1.x2 = @(5.0);
        boxAnnotation1.y2 = @(5.0);
        boxAnnotation1.fillBrush = [[SCILinearGradientBrushStyle alloc] initWithStart:CGPointZero end:CGPointMake(0, 1) startColorCode:0x550000FF endColorCode:0x55FFFF00];
        boxAnnotation1.borderPen = [[SCISolidPenStyle alloc] initWithColorCode:0xFF279B27 thickness:1.0];
        
        SCIBoxAnnotation *boxAnnotation2 = [SCIBoxAnnotation new];
        boxAnnotation2.x1 = @(4.0);
        boxAnnotation2.y1 = @(4.5);
        boxAnnotation2.x2 = @(5.5);
        boxAnnotation2.y2 = @(5.5);
        boxAnnotation2.fillBrush = [[SCISolidBrushStyle alloc] initWithColorCode:0x55FF1919];
        boxAnnotation2.borderPen = [[SCISolidPenStyle alloc] initWithColorCode:0xFFFF1919 thickness:1.0];
        
        SCIBoxAnnotation *boxAnnotation3 = [SCIBoxAnnotation new];
        boxAnnotation3.x1 = @(4.5);
        boxAnnotation3.y1 = @(5.0);
        boxAnnotation3.x2 = @(6.0);
        boxAnnotation3.y2 = @(6.0);
        boxAnnotation3.fillBrush = [[SCISolidBrushStyle alloc] initWithColorCode:0x55279B27];
        boxAnnotation3.borderPen = [[SCISolidPenStyle alloc] initWithColorCode:0xFF279B27 thickness:1.0];

        // Custom shapes
        SCITextAnnotation *textAnnotation8 = [SCITextAnnotation new];
        textAnnotation8.x1 = @(7.0);
        textAnnotation8.y1 = @(6.1);
        textAnnotation8.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
        textAnnotation8.text = @"Or Custom Shapes";
        textAnnotation8.fontStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColor:SCIColor.whiteColor];
        
        SCICustomAnnotation *customAnnotationGreen = [SCICustomAnnotation new];
        customAnnotationGreen.customView = [SCIImageView imageViewWithImage:[SCIImage imageNamed:@"image.arrow.green"]];
        customAnnotationGreen.x1 = @(8);
        customAnnotationGreen.y1 = @(5.5);
        
        SCICustomAnnotation *customAnnotationRed = [SCICustomAnnotation new];
        customAnnotationGreen.customView = [SCIImageView imageViewWithImage:[SCIImage imageNamed:@"image.arrow.red"]];
        customAnnotationRed.x1 = @(7.5);
        customAnnotationRed.y1 = @(5);
        
        // Horizontal Line Annotations
        SCIHorizontalLineAnnotation *horizontalLine = [SCIHorizontalLineAnnotation new];
        horizontalLine.x1 = @(5.0);
        horizontalLine.y1 = @(3.2);
        horizontalLine.horizontalAlignment = SCIAlignment_Right;
        horizontalLine.stroke = [[SCISolidPenStyle alloc] initWithColor:SCIColor.orangeColor thickness:2];
        [horizontalLine.annotationLabels add:[self createLabelWithText:@"Right Aligned, with text on left" alignment:SCILabelPlacement_TopLeft]];
        
        SCIHorizontalLineAnnotation *horizontalLine1 = [SCIHorizontalLineAnnotation new];
        horizontalLine1.y1 = @(7.5);
        horizontalLine1.y1 = @(2.8);
        horizontalLine1.stroke = [[SCISolidPenStyle alloc] initWithColor:SCIColor.orangeColor thickness:2];
        [horizontalLine1.annotationLabels add:[self createLabelWithText:nil alignment:SCILabelPlacement_Axis]];
        
        // Vertical Line annotations
        SCIVerticalLineAnnotation *verticalLine = [SCIVerticalLineAnnotation new];
        verticalLine.x1 = @(9.0);
        verticalLine.y1 = @(4.0);
        verticalLine.verticalAlignment = SCIAlignment_Bottom;
        verticalLine.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xFFA52A2A thickness:2];
        [verticalLine.annotationLabels add:[self createLabelWithText:nil alignment:SCILabelPlacement_Axis]];

        SCIVerticalLineAnnotation *verticalLine1 = [SCIVerticalLineAnnotation new];
        verticalLine1.x1 = @(9.5);
        verticalLine1.y1 = @(10.0);
        verticalLine1.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xFFA52A2A thickness:2];
        [verticalLine1.annotationLabels add:[self createLabelWithText:nil alignment:SCILabelPlacement_Axis]];
        SCIAnnotationLabel *label = [self createLabelWithText:@"Bottom-aligned" alignment:SCILabelPlacement_TopRight];
        label.rotationAngle = -90;
        [verticalLine1.annotationLabels add:label];

        self.surface.annotations = [[SCIAnnotationCollection alloc] initWithCollection: @[watermark, textAnnotation1, textAnnotation2, textAnnotation3, editableTextAnnotation, textAnnotation4, textAnnotation5, textAnnotation6, lineAnnotation, lineArrowAnnotation, textAnnotation7, boxAnnotation1, boxAnnotation2, boxAnnotation3, textAnnotation8, customAnnotationGreen, customAnnotationRed, horizontalLine, horizontalLine1, verticalLine, verticalLine1]];
        [self.surface.chartModifiers add:[SCDExampleBaseViewController createDefaultModifiers]];
    }];
}

- (SCIAnnotationLabel *)createLabelWithText:(NSString *)text alignment:(SCILabelPlacement)labelPlacement {
    SCIAnnotationLabel *annotationLabel = [SCIAnnotationLabel new];
    if (text != nil) {
        annotationLabel.text = text;
    }
    annotationLabel.labelPlacement = labelPlacement;
    
    return annotationLabel;
}

@end

// AnnotationsChartView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// AnnotationsAreEasyView.swift is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

class AnnotationsAreEasyView: SCDSingleChartViewController<SCIChartSurface> {
    
    override var associatedType: AnyClass { return SCIChartSurface.self }
    
    override var showDefaultModifiersInToolbar: Bool { return false }
    
    override func initExample() {
        let xAxis = SCINumericAxis()
        xAxis.growBy = SCIDoubleRange(min: 0.1, max: 0.1)
        
        let yAxis = SCINumericAxis()
        yAxis.growBy = SCIDoubleRange(min: 0.1, max: 0.1)
        
        SCIUpdateSuspender.usingWith(surface) {
            self.surface.xAxes.add(xAxis)
            self.surface.yAxes.add(yAxis)
            
            // Watermark
            let watermark = SCITextAnnotation()
            watermark.set(x1: 0.5)
            watermark.set(y1: 0.5)
            watermark.coordinateMode = .relative
            watermark.horizontalAnchorPoint = .center
            watermark.verticalAnchorPoint = .center
            watermark.text = "Create \nWatermarks"
            watermark.fontStyle = SCIFontStyle(fontSize: 42, andTextColorCode:0x55FFFFFF)
            
            // Text annotations
            let textAnnotation1 = SCITextAnnotation()
            textAnnotation1.set(x1: 0.3)
            textAnnotation1.set(y1: 9.7)
            textAnnotation1.text = "Annotations are Easy!"
            textAnnotation1.fontStyle = SCIFontStyle(fontSize: 22, andTextColor: .white)
            
            let textAnnotation2 = SCITextAnnotation()
            textAnnotation2.set(x1: 1.0)
            textAnnotation2.set(y1: 9.0)
            textAnnotation2.text = "You can create text"
            textAnnotation2.fontStyle = SCIFontStyle(fontSize: 12, andTextColor: .white)
            
            let editableTextAnnotation = SCITextAnnotation()
            editableTextAnnotation.set(x1: 1.0)
            editableTextAnnotation.set(y1: 8.8)
            editableTextAnnotation.canEditText = true
            editableTextAnnotation.text = "And even edit it ... (tap me)"
            editableTextAnnotation.fontStyle = SCIFontStyle(fontSize: 12, andTextColor: .white)
            
            // Text with Anchor Points
            let textAnnotation3 = SCITextAnnotation()
            textAnnotation3.set(x1: 5.0)
            textAnnotation3.set(y1: 8.0)
            textAnnotation3.horizontalAnchorPoint = .center
            textAnnotation3.verticalAnchorPoint = .bottom
            textAnnotation3.text = "Anchor Center (x1, y1)"
            
            let textAnnotation4 = SCITextAnnotation()
            textAnnotation4.set(x1: 5.0)
            textAnnotation4.set(y1: 8.0)
            textAnnotation4.horizontalAnchorPoint = .right
            textAnnotation4.verticalAnchorPoint = .top
            textAnnotation4.text = "Anchor Right"
            
            let textAnnotation5 = SCITextAnnotation()
            textAnnotation5.set(x1: 5.0)
            textAnnotation5.set(y1: 8.0)
            textAnnotation5.horizontalAnchorPoint = .left
            textAnnotation5.verticalAnchorPoint = .top
            textAnnotation5.text = "or Anchor Left"
            
            // Line and line arrow annotations
            let textAnnotation6 = SCITextAnnotation()
            textAnnotation6.set(x1: 0.3)
            textAnnotation6.set(y1: 6.1)
            textAnnotation6.verticalAnchorPoint = .bottom
            textAnnotation6.text = "Draw Lines with \nor without Arrows"
            textAnnotation6.fontStyle = SCIFontStyle(fontSize: 12, andTextColor: .white)
            
            let lineAnnotation = SCILineAnnotation()
            lineAnnotation.set(x1: 1.0)
            lineAnnotation.set(y1: 4.0)
            lineAnnotation.set(x2: 2.0)
            lineAnnotation.set(y2: 6.0)
            lineAnnotation.stroke = SCISolidPenStyle(color: 0xFF555555, thickness: 2)
   
            let lineArrowAnnotation = SCILineArrowAnnotation()
            lineArrowAnnotation.set(x1: 1.2)
            lineArrowAnnotation.set(y1: 3.8)
            lineArrowAnnotation.set(x2: 2.5)
            lineArrowAnnotation.set(y2: 6.0)
            lineArrowAnnotation.headLength = 4
            lineArrowAnnotation.headWidth = 8
            lineArrowAnnotation.stroke = SCISolidPenStyle(color: 0xFF555555, thickness: 2)
            
            // Box annotations
            let textAnnotation7 = SCITextAnnotation()
            textAnnotation7.set(x1: 3.5)
            textAnnotation7.set(y1: 6.1)
            textAnnotation7.text = "Draw Boxes"
            textAnnotation7.verticalAnchorPoint = .bottom
            textAnnotation7.fontStyle = SCIFontStyle(fontSize: 12, andTextColor: .white)
            
            let boxAnnotation1 = SCIBoxAnnotation()
            boxAnnotation1.set(x1: 3.5)
            boxAnnotation1.set(y1: 4.0)
            boxAnnotation1.set(x2: 5.0)
            boxAnnotation1.set(y2: 5.0)
            boxAnnotation1.fillBrush = SCILinearGradientBrushStyle(start: CGPoint(x: 0.0, y: 0.5), end: CGPoint(x: 1.0, y: 0.5), startColor: 0x550000FF, endColor: 0x55FFFF00)
            boxAnnotation1.borderPen = SCISolidPenStyle(color: 0xFF279B27, thickness: 1.0)
            
            let boxAnnotation2 = SCIBoxAnnotation()
            boxAnnotation2.set(x1: 4.0)
            boxAnnotation2.set(y1: 4.5)
            boxAnnotation2.set(x2: 5.5)
            boxAnnotation2.set(y2: 5.5)
            boxAnnotation2.fillBrush = SCISolidBrushStyle(color: 0x55FF1919)
            boxAnnotation2.borderPen = SCISolidPenStyle(color: 0xFFFF1919, thickness: 1.0)
            
            let boxAnnotation3 = SCIBoxAnnotation()
            boxAnnotation3.set(x1: 4.5)
            boxAnnotation3.set(y1: 5.0)
            boxAnnotation3.set(x2: 6.0)
            boxAnnotation3.set(y2: 6.0)
            boxAnnotation3.fillBrush = SCISolidBrushStyle(color: 0x55279B27)
            boxAnnotation3.borderPen = SCISolidPenStyle(color: 0xFF279B27, thickness: 1.0)
            
            // Custom shapes
            let textAnnotation8 = SCITextAnnotation()
            textAnnotation8.set(x1: 7.0)
            textAnnotation8.set(y1: 6.1)
            textAnnotation8.verticalAnchorPoint = .bottom
            textAnnotation8.text = "Or Custom Shapes"
            textAnnotation8.fontStyle = SCIFontStyle(fontSize: 12, andTextColor: .white)
            
            let customAnnotationGreen = SCICustomAnnotation()
            customAnnotationGreen.customView = SCIImageView.init(image: #imageLiteral(resourceName: "image.arrow.green"))
            customAnnotationGreen.set(x1: 8)
            customAnnotationGreen.set(y1: 5.5)
            
            let customAnnotationRed = SCICustomAnnotation()
            customAnnotationRed.customView = SCIImageView.init(image: #imageLiteral(resourceName: "image.arrow.red"))
            customAnnotationRed.set(x1: 7.5)
            customAnnotationRed.set(y1: 5)
            
            // Horizontal Line Annotations
            let horizontalLine = SCIHorizontalLineAnnotation()
            horizontalLine.set(x1: 5.0)
            horizontalLine.set(y1: 3.2)
            horizontalLine.horizontalAlignment = .right
            horizontalLine.stroke = SCISolidPenStyle(color: .orange, thickness: 2)
            horizontalLine.annotationLabels.add(self.createLabelWith(text: "Right Aligned, with text on left", labelPlacement: .topLeft))
            
            let horizontalLine1 = SCIHorizontalLineAnnotation()
            horizontalLine1.set(y1: 7.5)
            horizontalLine1.set(y1: 2.8)
            horizontalLine1.stroke = SCISolidPenStyle(color: .orange, thickness: 2)
            horizontalLine1.annotationLabels.add(self.createLabelWith(text: nil, labelPlacement: .axis))
            
            // Vertical Line annotations
            let verticalLine = SCIVerticalLineAnnotation()
            verticalLine.set(x1: 9.0)
            verticalLine.set(y1: 4.0)
            verticalLine.verticalAlignment = .bottom;
            verticalLine.stroke = SCISolidPenStyle(color: 0xFFA52A2A, thickness: 2)
            verticalLine.annotationLabels.add(self.createLabelWith(text: nil, labelPlacement: .axis))
            
            let verticalLine1 = SCIVerticalLineAnnotation()
            verticalLine1.set(x1: 9.5)
            verticalLine1.set(y1: 10.0)
            verticalLine1.stroke = SCISolidPenStyle(color: 0xFFA52A2A, thickness: 2)
            verticalLine1.annotationLabels.add(self.createLabelWith(text: nil, labelPlacement: .axis))
            let label = self.createLabelWith(text: "Bottom-aligned", labelPlacement: .topRight)
            label.rotationAngle = -90
            verticalLine1.annotationLabels.add(label)
            
            self.surface.annotations = SCIAnnotationCollection(collection: [watermark, textAnnotation1, textAnnotation2, textAnnotation3, editableTextAnnotation, textAnnotation4, textAnnotation5, textAnnotation6, lineAnnotation, lineArrowAnnotation, textAnnotation7, boxAnnotation1, boxAnnotation2, boxAnnotation3, textAnnotation8, customAnnotationGreen, customAnnotationRed, horizontalLine, horizontalLine1, verticalLine, verticalLine1])
            self.surface.chartModifiers.add(SCDExampleBaseViewController.createDefaultModifiers())
        }
    }
    
    fileprivate func createLabelWith(text: String?, labelPlacement: SCILabelPlacement) -> SCIAnnotationLabel {
        let annotationLabel = SCIAnnotationLabel()
        if (text != nil) {
            annotationLabel.text = text!
        }
        annotationLabel.labelPlacement = labelPlacement
        
        return annotationLabel
    }
}

< BACK TO ALL IOS & MACOS CHARTS CHART EXAMPLES