SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components
iOS Chart Annotations are Easy!
// iOS Chart Examples
Please note! These examples are new to SciChart iOS v3 release! SciChart’s OpenGLES and Metal iOS Chart library ships with ~90 Objective-C and Swift iOS Chart Examples which you can browse, play with and view the source-code. All of this is possible with the new and improved SciChart iOS Examples Suite, which ships as part of the SciChart iOS SDK.
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
// Source Code
The Swift 4 and Objective-C source code for the iOS Chart Annotations are Easy! example is included below (Scroll down!).
Did you know that we have the source code for all our example available for free on Github?
Clone the SciChart.iOS.Examples from Github.
Also the SciChart iOS Trial contains the full source for the examples (link below).
The SciChart Examples source code is available on Github and viewable in-app for some platforms
// 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
- (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 = SCIHorizontalAnchorPoint_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:UIColor.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:UIColor.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:UIColor.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:UIColor.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:UIColor.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:UIColor.whiteColor];
SCICustomAnnotation *customAnnotationGreen = [SCICustomAnnotation new];
customAnnotationGreen.customView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.arrow.green"]];
customAnnotationGreen.x1 = @(8);
customAnnotationGreen.y1 = @(5.5);
SCICustomAnnotation *customAnnotationRed = [SCICustomAnnotation new];
customAnnotationRed.customView = [[UIImageView alloc] initWithImage:[UIImage 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:UIColor.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:UIColor.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:ExampleViewBase.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: SingleChartLayout {
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(colorCode: 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(colorCode: 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), startColorCode: 0x550000FF, endColorCode: 0x55FFFF00)
boxAnnotation1.borderPen = SCISolidPenStyle(colorCode: 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(colorCode: 0x55FF1919)
boxAnnotation2.borderPen = SCISolidPenStyle(colorCode: 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(colorCode: 0x55279B27)
boxAnnotation3.borderPen = SCISolidPenStyle(colorCode: 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 = UIImageView(image: #imageLiteral(resourceName: "image.arrow.green"))
customAnnotationGreen.set(x1: 8)
customAnnotationGreen.set(y1: 5.5)
let customAnnotationRed = SCICustomAnnotation()
customAnnotationRed.customView = UIImageView(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: UIColor.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: UIColor.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(colorCode: 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(colorCode: 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(ExampleViewBase.createDefaultModifiers())
}
}
fileprivate func createLabelWith(text: String?, labelPlacement: SCILabelPlacement) -> SCIAnnotationLabel {
let annotationLabel = SCIAnnotationLabel()
if (text != nil) {
annotationLabel.text = text!
}
annotationLabel.labelPlacement = labelPlacement
return annotationLabel
}
}