In SciChart iOS, it is possible to customize the look and feel of Tooltips on our iOS Chart control. This example demonstrates how to do this using the SCICursorModifier.

What can be customized? The actual tooltip style (Border, Background, Size, Opacity) as well as text style (Font, Fontsize, weight). The crosshairs lines and also the textformatting of the cursor tooltip itself.

// CustomCursorViewSwift.xib

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB" customClass="CustomCursorViewSwift" customModule="SciChartSwiftDemo" customModuleProvider="target">
            <rect key="frame" x="0.0" y="0.0" width="191" height="49"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="252" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0LP-9f-ItT">
                    <rect key="frame" x="8" y="8" width="175" height="33"/>
                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
            </subviews>
            <constraints>
                <constraint firstItem="0LP-9f-ItT" firstAttribute="bottom" secondItem="iN0-l3-epB" secondAttribute="bottom" constant="-8" id="59Y-5Q-JJt"/>
                <constraint firstItem="0LP-9f-ItT" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="8" id="DBV-y3-VcV"/>
                <constraint firstItem="0LP-9f-ItT" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" constant="8" id="I15-jM-83Q"/>
                <constraint firstItem="0LP-9f-ItT" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" constant="-8" id="sKu-h9-eJK"/>
            </constraints>
            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
            <viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
            <connections>
                <outlet property="seriesName" destination="0LP-9f-ItT" id="iWj-aK-HFA"/>
            </connections>
            <point key="canvasLocation" x="-67.5" y="-257.5"/>
        </view>
    </objects>
</document>

// CursorCustomizationChartView.m

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

static int const PointsCount = 200;

@interface CustomCursorView : SCIXySeriesDataView

@property (weak, nonatomic) IBOutlet UILabel * seriesName;

@end

@implementation CustomCursorView

+ (SCITooltipDataView *)createInstance {
    CustomCursorView * view = [NSBundle.mainBundle loadNibNamed:@"CustomCursorView" owner:nil options:nil].firstObject;
    view.translatesAutoresizingMaskIntoConstraints = false;
    
    return view;
}

- (void)setData:(SCISeriesInfo *)data {
    SCIXySeriesInfo * seriesInfo = (SCIXySeriesInfo *)data;
    
    _seriesName.text = [NSString stringWithFormat:@"%@ - X: %@; Y: %@", seriesInfo.seriesName, [seriesInfo formatXCursorValue:seriesInfo.xValue], [seriesInfo formatYCursorValue:seriesInfo.yValue]];
}

@end

@interface CustomCursorSeriesInfo : SCIXySeriesInfo
@end

@implementation CustomCursorSeriesInfo
- (CustomCursorView *)createDataSeriesView {
    CustomCursorView * view = (CustomCursorView *)[CustomCursorView createInstance];
    [view setData:self];
    
    return view;
}
@end

@interface CustomCursorLineSeries : SCIFastLineRenderableSeries
@end

@implementation CustomCursorLineSeries
- (SCISeriesInfo *)toSeriesInfoWithHitTest:(SCIHitTestInfo)info {
    return [[CustomCursorSeriesInfo alloc] initWithSeries:self HitTest:info];
}
@end

@implementation CursorCustomizationChartView

- (void)initExample {
    id<SCIAxis2DProtocol> xAxis = [SCINumericAxis new];
    id<SCIAxis2DProtocol> yAxis = [SCINumericAxis new];
    
    RandomWalkGenerator * randomWalkGenerator = [RandomWalkGenerator new];
    DoubleSeries * data1 = [randomWalkGenerator getRandomWalkSeries:PointsCount];
    [randomWalkGenerator reset];
    DoubleSeries * data2 = [randomWalkGenerator getRandomWalkSeries:PointsCount];
    
    SCIXyDataSeries * ds1 = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double YType:SCIDataType_Double];
    ds1.seriesName = @"Series #1";
    SCIXyDataSeries * ds2 = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double YType:SCIDataType_Double];
    ds2.seriesName = @"Series #2";
    
    [ds1 appendRangeX:data1.xValues Y:data1.yValues Count:data1.size];
    [ds2 appendRangeX:data2.xValues Y:data2.yValues Count:data2.size];
    
    SCIFastLineRenderableSeries * line1 = [CustomCursorLineSeries new];
    line1.dataSeries = ds1;
    line1.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xff6495ed withThickness:2];
    
    SCIFastLineRenderableSeries * line2 = [CustomCursorLineSeries new];
    line2.dataSeries = ds2;
    line2.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xffe2460c withThickness:2];
    
    SCICursorModifier * cursorModifier = [SCICursorModifier new];
    cursorModifier.style.contentPadding = 0;
    cursorModifier.style.colorMode = SCITooltipColorMode_Default;
    cursorModifier.style.tooltipColor = [UIColor fromARGBColorCode:0xff6495ed];
    cursorModifier.style.tooltipOpacity = 0.8;
    cursorModifier.style.tooltipBorderWidth = 1;
    cursorModifier.style.tooltipBorderColor = [UIColor fromARGBColorCode:0xffe2460c];
    cursorModifier.style.cursorPen = [[SCISolidPenStyle alloc] initWithColor:[UIColor fromARGBColorCode:0xffe2460c] withThickness:0.5];
    cursorModifier.style.axisVerticalTooltipColor = [UIColor fromARGBColorCode:0xffe2460c];
    cursorModifier.style.axisHorizontalTooltipColor = [UIColor fromARGBColorCode:0xffe2460c];
    
    [SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
        [self.surface.xAxes add:xAxis];
        [self.surface.yAxes add:yAxis];
        [self.surface.renderableSeries add:line1];
        [self.surface.renderableSeries add:line2];
        [self.surface.chartModifiers add:cursorModifier];
        
        [line1 addAnimation:[[SCISweepRenderableSeriesAnimation alloc] initWithDuration:3 curveAnimation:SCIAnimationCurve_EaseOut]];
        [line2 addAnimation:[[SCISweepRenderableSeriesAnimation alloc] initWithDuration:3 curveAnimation:SCIAnimationCurve_EaseOut]];
    }];
}

@end

// CursorCustomizationChartView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2018. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// CursorCustomizationChartView.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 CustomCursorViewSwift: SCIXySeriesDataView {
    
    @IBOutlet weak var seriesName: UILabel!
    
    static override func createInstance() -> SCITooltipDataView! {
        let view : CustomCursorViewSwift = (Bundle.main.loadNibNamed("CustomCursorViewSwift", owner: nil, options: nil)![0] as? CustomCursorViewSwift)!
        view.translatesAutoresizingMaskIntoConstraints = false
        
        return view
    }
    
    func setData(_ data: SCIXySeriesInfo!) {
        seriesName.text = String(format: "%@ - X: %@; Y: %@", data.seriesName(), data.formatXCursorValue(data.xValue()), data.formatXCursorValue(data.yValue()))
    }
}

fileprivate class CustomSeriesInfo: SCIXySeriesInfo {
    override func createDataSeriesView() -> SCITooltipDataView! {
        let view : CustomCursorViewSwift = CustomCursorViewSwift.createInstance() as! CustomCursorViewSwift
        view.setData(self)
        
        return view
    }
}

fileprivate class CustomLineSeries: SCIFastLineRenderableSeries {
    override func toSeriesInfo(withHitTest info: SCIHitTestInfo) -> SCISeriesInfo! {
        return CustomSeriesInfo(series: self, hitTest: info)
    }
}

class CursorCustomizationChartView: SingleChartLayout {
    
    private let PointsCount: Int32 = 200
    
    override func initExample() {
        let xAxis = SCINumericAxis()
        let yAxis = SCINumericAxis()
        
        let randomWalkGenerator = RandomWalkGenerator()
        let data1 = randomWalkGenerator?.getRandomWalkSeries(PointsCount)
        randomWalkGenerator?.reset()
        let data2 = randomWalkGenerator?.getRandomWalkSeries(PointsCount)
        
        let ds1 = SCIXyDataSeries(xType: .double, yType: .double)
        ds1.seriesName = "Series #1"
        let ds2 = SCIXyDataSeries(xType: .double, yType: .double)
        ds2.seriesName = "Series #2"
        
        ds1.appendRangeX(data1!.xValues, y: data1!.yValues, count: data1!.size)
        ds2.appendRangeX(data2!.xValues, y: data2!.yValues, count: data2!.size)
        
        let line1 = CustomLineSeries()
        line1.dataSeries = ds1
        line1.strokeStyle = SCISolidPenStyle(colorCode: 0xff6495ed, withThickness: 2)
        
        let line2 = CustomLineSeries()
        line2.dataSeries = ds2
        line2.strokeStyle = SCISolidPenStyle(colorCode: 0xffe2460c, withThickness: 2)

        let cursorModifier = SCICursorModifier()
        cursorModifier.style.contentPadding = 0
        cursorModifier.style.colorMode = .default
        cursorModifier.style.tooltipColor = UIColor.fromARGBColorCode(0xff6495ed)
        cursorModifier.style.tooltipOpacity = 0.8
        cursorModifier.style.tooltipBorderWidth = 1
        cursorModifier.style.tooltipBorderColor = UIColor.fromARGBColorCode(0xffe2460c)
        cursorModifier.style.cursorPen = SCISolidPenStyle(color: UIColor.fromARGBColorCode(0xffe2460c), withThickness: 0.5)
        cursorModifier.style.axisVerticalTooltipColor = UIColor.fromARGBColorCode(0xffe2460c)
        cursorModifier.style.axisHorizontalTooltipColor = UIColor.fromARGBColorCode(0xffe2460c)
        
        SCIUpdateSuspender.usingWithSuspendable(surface) {
            self.surface.xAxes.add(xAxis)
            self.surface.yAxes.add(yAxis)
            self.surface.renderableSeries.add(line1)
            self.surface.renderableSeries.add(line2)
            self.surface.chartModifiers.add(cursorModifier)
            
            line1.addAnimation(SCISweepRenderableSeriesAnimation(duration: 3, curveAnimation: .easeOut))
            line2.addAnimation(SCISweepRenderableSeriesAnimation(duration: 3, curveAnimation: .easeOut))
        }
    }
}

< BACK TO ALL IOS CHART CHART EXAMPLES