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

// InteractionWithAnnotations.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// InteractionWithAnnotations.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 "InteractionWithAnnotations.h"
#import "SCDDataManager.h"
#import "SCDMarketDataService.h"

@implementation InteractionWithAnnotations

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

- (BOOL)showDefaultModifiersInToolbar { return NO; }

- (void)initExample {
    SCICategoryDateAxis *xAxis = [SCICategoryDateAxis new];
    SCINumericAxis *yAxis = [SCINumericAxis new];
    yAxis.visibleRange = [[SCIDoubleRange alloc] initWithMin:30 max:37];
    
    SCIOhlcDataSeries *dataSeries = [[SCIOhlcDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Double];
    
    SCDMarketDataService *marketDataService = [[SCDMarketDataService alloc] initWithStartDate:NSDate.date TimeFrameMinutes:5 TickTimerIntervals:0.005];
    SCDPriceSeries *data = [marketDataService getHistoricalData:200];
    
    [dataSeries appendValuesX:data.dateData open:data.openData high:data.highData low:data.lowData close:data.closeData];
    
    SCIFastCandlestickRenderableSeries *rSeries = [SCIFastCandlestickRenderableSeries new];
    rSeries.dataSeries = dataSeries;
    rSeries.opacity = 0.4;
    
    [self.surface.xAxes add:xAxis];
    [self.surface.yAxes add:yAxis];
    [self.surface.renderableSeries add:rSeries];
    [self.surface.chartModifiers add:[SCIZoomPanModifier new]];

    SCITextAnnotation *textAnnotation1 = [SCITextAnnotation new];
    textAnnotation1.x1 = @(10);
    textAnnotation1.y1 = @(30.5);
    textAnnotation1.isEditable = YES;
    textAnnotation1.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
    textAnnotation1.text = @"Buy";
    textAnnotation1.fontStyle = [[SCIFontStyle alloc] initWithFontSize:20 andTextColor:SCIColor.whiteColor];
                                       
    SCITextAnnotation *textAnnotation2 = [SCITextAnnotation new];
    textAnnotation2.x1 = @(50);
    textAnnotation2.y1 = @(34);
    textAnnotation2.isEditable = YES;
    textAnnotation2.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
    textAnnotation2.text = @"Sell";
    textAnnotation2.fontStyle = [[SCIFontStyle alloc] initWithFontSize:20 andTextColor:SCIColor.whiteColor];
    
    SCITextAnnotation *rotatedTextAnnotation = [SCITextAnnotation new];
    rotatedTextAnnotation.x1 = @(80);
    rotatedTextAnnotation.y1 = @(36);
    rotatedTextAnnotation.isEditable = YES;
    rotatedTextAnnotation.rotationAngle = -30;
    rotatedTextAnnotation.text = @"Rotated text";
    rotatedTextAnnotation.fontStyle = [[SCIFontStyle alloc] initWithFontSize:20 andTextColor:SCIColor.whiteColor];
    
    SCIBoxAnnotation *boxAnnotation = [SCIBoxAnnotation new];
    boxAnnotation.x1 = @(50);
    boxAnnotation.y1 = @(35.5);
    boxAnnotation.x2 = @(120);
    boxAnnotation.y2 = @(32);
    boxAnnotation.isEditable = YES;
    boxAnnotation.fillBrush = [[SCISolidBrushStyle alloc] initWithColorCode:0x33FF6600];
    boxAnnotation.borderPen = [[SCISolidPenStyle alloc] initWithColorCode:0x77FF6600 thickness:1.0];
    
    SCILineAnnotation *lineAnnotation1 = [SCILineAnnotation new];
    lineAnnotation1.x1 = @(30);
    lineAnnotation1.y1 = @(30.5);
    lineAnnotation1.x2 = @(60);
    lineAnnotation1.y2 = @(35.5);
    lineAnnotation1.isEditable = YES;
    lineAnnotation1.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xAAFF6600 thickness:2];
    
    SCILineAnnotation *lineAnnotation2 = [SCILineAnnotation new];
    lineAnnotation2.x1 = @(120);
    lineAnnotation2.y1 = @(30.5);
    lineAnnotation2.x2 = @(175);
    lineAnnotation2.y2 = @(36);
    lineAnnotation2.isEditable = YES;
    lineAnnotation2.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xAAFF6600 thickness:2];
    
    SCILineArrowAnnotation *lineArrowAnnotation = [SCILineArrowAnnotation new];
    lineArrowAnnotation.x1 = @(120);
    lineArrowAnnotation.y1 = @(35);
    lineArrowAnnotation.x2 = @(80);
    lineArrowAnnotation.y2 = @(31.4);
    lineArrowAnnotation.headLength = 8;
    lineArrowAnnotation.headWidth = 16;
    lineArrowAnnotation.isEditable = YES;
    
    SCIAxisMarkerAnnotation *axisMarker1 = [SCIAxisMarkerAnnotation new];
    axisMarker1.y1 = @(32.7);
    axisMarker1.isEditable = YES;

    SCIAxisMarkerAnnotation *axisMarker2 = [SCIAxisMarkerAnnotation new];
    axisMarker2.x1 = @(100);
    axisMarker2.isEditable = YES;
    axisMarker2.formattedValue = @"Horizontal";
    axisMarker2.annotationSurface = SCIAnnotationSurface_XAxis;

    SCIHorizontalLineAnnotation *horizontalLine1 = [SCIHorizontalLineAnnotation new];
    horizontalLine1.x1 = @(150);
    horizontalLine1.y1 = @(32.2);
    horizontalLine1.isEditable = YES;
    horizontalLine1.horizontalAlignment = SCIAlignment_Right;
    horizontalLine1.stroke = [[SCISolidPenStyle alloc] initWithColor: SCIColor.redColor thickness:2];
    [horizontalLine1.annotationLabels add:[self createLabelWithText:nil alignment:SCILabelPlacement_Axis]];
    
    SCIHorizontalLineAnnotation *horizontalLine2 = [SCIHorizontalLineAnnotation new];
    horizontalLine2.x1 = @(130);
    horizontalLine2.x2 = @(160);
    horizontalLine2.y1 = @(33.9);
    horizontalLine2.isEditable = YES;
    horizontalLine2.horizontalAlignment = SCIAlignment_CenterHorizontal;
    horizontalLine2.stroke = [[SCISolidPenStyle alloc] initWithColor: SCIColor.blueColor thickness:2];
    [horizontalLine2.annotationLabels add:[self createLabelWithText:@"Top" alignment:SCILabelPlacement_Top]];
    [horizontalLine2.annotationLabels add:[self createLabelWithText:@"Left" alignment:SCILabelPlacement_Left]];
    [horizontalLine2.annotationLabels add:[self createLabelWithText:@"Right" alignment:SCILabelPlacement_Right]];
    
    SCIVerticalLineAnnotation *verticalLine1 = [SCIVerticalLineAnnotation new];
    verticalLine1.x1 = @(20);
    verticalLine1.y1 = @(35);
    verticalLine1.y2 = @(33);
    verticalLine1.isEditable = YES;
    verticalLine1.verticalAlignment = SCIAlignment_CenterVertical;
    verticalLine1.stroke = [[SCISolidPenStyle alloc] initWithColorCode: 0xFF006400 thickness:2];
    
    SCIVerticalLineAnnotation *verticalLine2 = [SCIVerticalLineAnnotation new];
    verticalLine2.x1 = @(40);
    verticalLine2.y1 = @(34);
    verticalLine2.isEditable = YES;
    verticalLine2.verticalAlignment = SCIAlignment_Top;
    verticalLine2.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xFF006400 thickness:2];
    [verticalLine2.annotationLabels add:[self createLabelWithText:nil alignment:SCILabelPlacement_Top]];
    
    SCITextAnnotation *textAnnotation3 = [SCITextAnnotation new];
    textAnnotation3.x1 = @(0.5);
    textAnnotation3.y1 = @(0.5);
    textAnnotation3.coordinateMode = SCIAnnotationCoordinateMode_Relative;
    textAnnotation3.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Center;
    textAnnotation3.text = @"EUR/USD";
    textAnnotation3.fontStyle = [[SCIFontStyle alloc] initWithFontSize:72 andTextColorCode:0x77FFFFFF];

    self.surface.annotations = [[SCIAnnotationCollection alloc] initWithCollection:@[textAnnotation3, textAnnotation1, textAnnotation2, rotatedTextAnnotation, boxAnnotation, lineAnnotation1, lineAnnotation2, lineArrowAnnotation, axisMarker1, axisMarker2, horizontalLine1, horizontalLine2, verticalLine1, verticalLine2]];
}

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

@end

// InteractionWithAnnotations.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// InteractionWithAnnotations.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 InteractionWithAnnotations: SCDSingleChartViewController<SCIChartSurface> {
    
    override var associatedType: AnyClass { return SCIChartSurface.self }
    
    override var showDefaultModifiersInToolbar: Bool { return false }
    
    override func initExample() {
        let xAxis = SCICategoryDateAxis()
        let yAxis = SCINumericAxis()
        yAxis.visibleRange = SCIDoubleRange(min: 30, max: 37)
        
        let dataSeries = SCIOhlcDataSeries(xType: .date, yType: .double)
        
        let marketDataService = SCDMarketDataService(start: Date(), timeFrameMinutes: 5, tickTimerIntervals: 0.005)
        let data = marketDataService.getHistoricalData(200)
        
        dataSeries.append(x: data.dateData, open: data.openData, high: data.highData, low: data.lowData, close: data.closeData)
        
        let rSeries = SCIFastCandlestickRenderableSeries()
        rSeries.dataSeries = dataSeries
        rSeries.opacity = 0.4
        
        surface.xAxes.add(xAxis)
        surface.yAxes.add(yAxis)
        surface.renderableSeries.add(rSeries)
        surface.chartModifiers.add(SCIZoomPanModifier())
        
        let textAnnotation1 = SCITextAnnotation()
        textAnnotation1.set(x1: 10)
        textAnnotation1.set(y1: 30.5)
        textAnnotation1.isEditable = true
        textAnnotation1.verticalAnchorPoint = .bottom
        textAnnotation1.text = "Buy"
        textAnnotation1.fontStyle = SCIFontStyle(fontSize: 20, andTextColor: .white)
        
        let textAnnotation2 = SCITextAnnotation()
        textAnnotation2.set(x1: 50)
        textAnnotation2.set(y1: 34)
        textAnnotation2.isEditable = true
        textAnnotation2.text = "Sell"
        textAnnotation2.fontStyle = SCIFontStyle(fontSize: 20, andTextColor: .white)
        
        let rotatedTextAnnotation = SCITextAnnotation()
        rotatedTextAnnotation.set(x1: 80)
        rotatedTextAnnotation.set(y1: 36)
        rotatedTextAnnotation.isEditable = true
        rotatedTextAnnotation.rotationAngle = -30
        rotatedTextAnnotation.text = "Rotated text"
        rotatedTextAnnotation.fontStyle = SCIFontStyle(fontSize: 20, andTextColor: .white)
        
        let boxAnnotation = SCIBoxAnnotation()
        boxAnnotation.set(x1: 50)
        boxAnnotation.set(y1: 35.5)
        boxAnnotation.set(x2: 120)
        boxAnnotation.set(y2: 32)
        boxAnnotation.isEditable = true
        boxAnnotation.fillBrush = SCISolidBrushStyle(color: 0x33FF6600)
        boxAnnotation.borderPen = SCISolidPenStyle(color: 0x77FF6600, thickness: 1.0)
        
        let lineAnnotation1 = SCILineAnnotation()
        lineAnnotation1.set(x1: 30)
        lineAnnotation1.set(y1: 30.5)
        lineAnnotation1.set(x2: 60)
        lineAnnotation1.set(y2: 35.5)
        lineAnnotation1.isEditable = true
        lineAnnotation1.stroke = SCISolidPenStyle(color: 0xAAFF6600, thickness: 2)
        
        let lineAnnotation2 = SCILineAnnotation()
        lineAnnotation2.set(x1: 120)
        lineAnnotation2.set(y1: 30.5)
        lineAnnotation2.set(x2: 175)
        lineAnnotation2.set(y2: 36)
        lineAnnotation2.isEditable = true
        lineAnnotation2.stroke = SCISolidPenStyle(color: 0xAAFF6600, thickness: 2)
        
        let lineArrowAnnotation = SCILineArrowAnnotation()
        lineArrowAnnotation.set(x1: 120)
        lineArrowAnnotation.set(y1: 35)
        lineArrowAnnotation.set(x2: 80)
        lineArrowAnnotation.set(y2: 31.4)
        lineArrowAnnotation.headLength = 8
        lineArrowAnnotation.headWidth = 16
        lineArrowAnnotation.isEditable = true
        
        let axisMarker1 = SCIAxisMarkerAnnotation()
        axisMarker1.set(y1: 32.7)
        axisMarker1.isEditable = true
        
        let axisMarker2 = SCIAxisMarkerAnnotation()
        axisMarker2.set(x1: 100)
        axisMarker2.isEditable = true
        axisMarker2.formattedValue = "Horizontal"
        axisMarker2.annotationSurface = .xAxis
        
        let horizontalLine1 = SCIHorizontalLineAnnotation()
        horizontalLine1.set(x1: 150)
        horizontalLine1.set(y1: 32.2)
        horizontalLine1.isEditable = true
        horizontalLine1.horizontalAlignment = .right
        horizontalLine1.stroke = SCISolidPenStyle(color: .red, thickness: 2)
        horizontalLine1.annotationLabels.add(createLabelWith(text: nil, labelPlacement: .axis))
        
        let horizontalLine2 = SCIHorizontalLineAnnotation()
        horizontalLine2.set(x1: 130)
        horizontalLine2.set(x2: 160)
        horizontalLine2.set(y1: 33.9)
        horizontalLine2.isEditable = true
        horizontalLine2.horizontalAlignment = .centerHorizontal
        horizontalLine2.stroke = SCISolidPenStyle(color: .blue, thickness: 2)
        horizontalLine2.annotationLabels.add(createLabelWith(text: "Top", labelPlacement: .top))
        horizontalLine2.annotationLabels.add(createLabelWith(text: "Left", labelPlacement: .left))
        horizontalLine2.annotationLabels.add(createLabelWith(text: "Right", labelPlacement: .right))
        
        let verticalLine1 = SCIVerticalLineAnnotation()
        verticalLine1.set(x1: 20)
        verticalLine1.set(y1: 35)
        verticalLine1.set(y2: 33)
        verticalLine1.isEditable = true
        verticalLine1.verticalAlignment = .centerVertical
        verticalLine1.stroke = SCISolidPenStyle(color: 0xFF006400, thickness: 2)
        
        let verticalLine2 = SCIVerticalLineAnnotation()
        verticalLine2.set(x1: 40)
        verticalLine2.set(y1: 34)
        verticalLine2.isEditable = true
        verticalLine2.verticalAlignment = .top
        verticalLine2.stroke = SCISolidPenStyle(color: 0xFF006400, thickness: 2)
        verticalLine2.annotationLabels.add(createLabelWith(text: nil, labelPlacement: .top))
        
        let textAnnotation3 = SCITextAnnotation()
        textAnnotation3.set(x1: 0.5)
        textAnnotation3.set(y1: 0.5)
        textAnnotation3.coordinateMode = .relative
        textAnnotation3.horizontalAnchorPoint = .center
        textAnnotation3.text = "EUR/USD"
        textAnnotation3.fontStyle = SCIFontStyle(fontSize: 72, andTextColorCode: 0x77FFFFFF)
        
        surface.annotations = SCIAnnotationCollection(collection: [textAnnotation3, textAnnotation1, textAnnotation2, rotatedTextAnnotation, boxAnnotation, lineAnnotation1, lineAnnotation2, lineArrowAnnotation, axisMarker1, axisMarker2, horizontalLine1, horizontalLine2, verticalLine1, verticalLine2])
    }
    
    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