iOS & macOS Charting Documentation - SciChart iOS & macOS Charts SDK v4.x

SciChart iOS Tutorial - Tooltips and Legends

In the previous tutorials we’ve showed how to Create a Simple Chart and add some Zoom and Pan interaction via the Chart Modifiers API.

In this SciChart iOS tutorial we’re going show how to add a Legend and Tooltip to the chart.

Getting Started

This tutorial is suitable for Objective-C, Swift and C# with Xamarin.iOS.

NOTE: Source code for this tutorial can be found at our Github Repository:

Swift

Xamarin

Add a Legend

In SciChart, a chart legend can be created and configured via the SCILegendModifier:

    SCILegendModifier *legendModifier = [SCILegendModifier new];
    legendModifier.orientation = SCIOrientationHorizontal;
    legendModifier.margins = UIEdgeInsetsMake(0, 0, 10, 0);
    legendModifier.position = SCIAlignment_Bottom | SCIAlignment_CenterHorizontal;

    [self.surface.chartModifiers add:tooltipModifier];

    let legendModifier = SCILegendModifier()
    legendModifier.orientation = .horizontal
    legendModifier.position = [.bottom, .centerHorizontal]
    legendModifier.margins = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)

    self.surface.chartModifiers.add(legendModifier)

    var legendModifier = new SCILegendModifier
    {
        Orientation = SCIOrientation.Horizontal,
        Margins = new UIEdgeInsets(0, 0, 10, 0),
        Position = SCIAlignment.Bottom | SCIAlignment.CenterHorizontal
    };

    Surface.ChartModifiers.Add(legendModifier);

Also, if you want to have your series properly named inside the Legend, you will need to provide Series Names for your DataSeries instances, like showed below:

    lineDataSeries.seriesName = @“Line Series”;
    scatterDataSeries.seriesName = @“Scatter Series”;

    lineDataSeries.seriesName = “Line Series”
    scatterDataSeries.seriesName = “Scatter Series”

    lineDataSeries.SeriesName = “Line Series”;
    scatterDataSeries.SeriesName = “Scatter Series”;

NOTE: You can find more information about legends in SciChart in the Legend Modifier article.

Legend Modifier

Adding tooltips using SCIRolloverModifier

Rollover Modifier adds a vertical section onto a SCIChartSurface. When you put your finger on the screen - it shows all series values at the X-Coordinate of that point.

Adding the SCIRolloverModifier is fairly simple with just creation new instance and adding to the ISCIChartSurface.chartModifiers, like below:

[self.surface.chartModifiers add:[SCIRolloverModifier new]];

self.surface.chartModifiers.add(SCIRolloverModifier())

Surface.ChartModifiers.Add(new SCIRolloverModifier());

NOTE: You can find more information about RolloverModifier in the corresponding Rollover Modifier article.

Rollover Modifier

Where to Go From Here?

In SciChart there are a bunch of modifiers, which are able to provide information about series (inspect series), such as:

Also, all of the modifiers is highly customizable, and you can find more information in the Tooltips Customization article.

You can download the final project from our GitHub Repository:

Also, you can found next tutorial from this series here - SciChart iOS Tutorial - Adding Realtime Updates

Of course, this is not the maximum limit of what you can achieve with the SciChart iOS. You can find more information about modifiers which are used in this tutorial in the articles below:

Finally, start exploring. The SciChart iOS is quite extensive. You can look into our SciChart iOS Examples Suite which are full of 2D and 3D examples, which are also available on our GitHub.