Generates a simple iOS line chart with a Chart Legend.

To create a Legend, add a SCILegendModifier to the SCIChartSurface.ChartModifiers collection.

The Legend displays the series names, colours and a checkbox which can be used to change visibility of the series. It is possible to change the legend orientation, to show/hide series markers or visibility checkboxes, as well as set the position of the legend in the chart.

// LegendChartView.m

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

#pragma mark - Selected Series Style

@interface CustomSeriesStyle : SCIStyleBase<id<ISCIRenderableSeries>>
@end
@implementation CustomSeriesStyle

- (instancetype)init {
    return [super initWithStyleableType:SCIRenderableSeriesBase.class];
}

- (void)applyStyleInternalTo:(id<ISCIRenderableSeries>)styleableObject {
    SCIPenStyle *currentPenStyle = styleableObject.strokeStyle;
    [self putProperty:@"Stroke" value:currentPenStyle intoObject:styleableObject];
    
    styleableObject.strokeStyle = [[SCISolidPenStyle alloc] initWithColor:currentPenStyle.color thickness:4];
}

- (void)discardStyleInternalFrom:(id<ISCIRenderableSeries>)styleableObject {
    SCIPenStyle *penStyle = [self getValueFromProperty:@"Stroke" ofType:SCISolidPenStyle.class fromObject:styleableObject];
    styleableObject.strokeStyle = penStyle;
}

@end

#pragma mark - Chart Initialization

@implementation LegendChartView

- (void)initExample {
    id<ISCIAxis> xAxis = [SCINumericAxis new];
    id<ISCIAxis> yAxis = [SCINumericAxis new];
    
    SCIXyDataSeries *dataSeries1 = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    dataSeries1.seriesName = @"Curve A";
    SCIXyDataSeries *dataSeries2 = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    dataSeries2.seriesName = @"Curve B";
    SCIXyDataSeries *dataSeries3 = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    dataSeries3.seriesName = @"Curve C";
    SCIXyDataSeries *dataSeries4 = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    dataSeries4.seriesName = @"Curve D";
    
    SCDDoubleSeries *doubleSeries1 = [SCDDataManager getStraightLinesWithGradient:4000 yIntercept:1.0 pointCount:10];
    SCDDoubleSeries *doubleSeries2 = [SCDDataManager getStraightLinesWithGradient:3000 yIntercept:1.0 pointCount:10];
    SCDDoubleSeries *doubleSeries3 = [SCDDataManager getStraightLinesWithGradient:2000 yIntercept:1.0 pointCount:10];
    SCDDoubleSeries *doubleSeries4 = [SCDDataManager getStraightLinesWithGradient:1000 yIntercept:1.0 pointCount:10];
    
    [dataSeries1 appendValuesX:doubleSeries1.xValues y:doubleSeries1.yValues];
    [dataSeries2 appendValuesX:doubleSeries2.xValues y:doubleSeries2.yValues];
    [dataSeries3 appendValuesX:doubleSeries3.xValues y:doubleSeries3.yValues];
    [dataSeries4 appendValuesX:doubleSeries4.xValues y:doubleSeries4.yValues];
    
    SCIFastLineRenderableSeries *line1 = [SCIFastLineRenderableSeries new];
    line1.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFFFFFF00 thickness:1];
    line1.dataSeries = dataSeries1;
    SCIFastLineRenderableSeries *line2 = [SCIFastLineRenderableSeries new];
    line2.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF279B27 thickness:1];
    line2.dataSeries = dataSeries2;
    SCIFastLineRenderableSeries *line3 = [SCIFastLineRenderableSeries new];
    line3.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFFFF1919 thickness:1];
    line3.dataSeries = dataSeries3;
    SCIFastLineRenderableSeries *line4 = [SCIFastLineRenderableSeries new];
    line4.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF1964FF thickness:1];
    line4.dataSeries = dataSeries4;
    line4.isVisible = NO;
    
    SCILegendModifier *legendModifier = [SCILegendModifier new];
    legendModifier.margins = UIEdgeInsetsMake(16, 16, 16, 16);
    legendModifier.position = SCIAlignment_Top | SCIAlignment_Left;
    SCISeriesSelectionModifier *seriesSelectionModifier = [SCISeriesSelectionModifier new];
    seriesSelectionModifier.selectedSeriesStyle = [CustomSeriesStyle new];
    
    [SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
        [self.surface.xAxes add:xAxis];
        [self.surface.yAxes add:yAxis];
        [self.surface.renderableSeries addAll:line1, line2, line3, line4, nil];
        [self.surface.chartModifiers addAll:legendModifier, seriesSelectionModifier, nil];
        
        [SCIAnimations sweepSeries:line1 duration:3.0 andEasingFunction:[SCICubicEase new]];
        [SCIAnimations sweepSeries:line2 duration:3.0 andEasingFunction:[SCICubicEase new]];
        [SCIAnimations sweepSeries:line3 duration:3.0 andEasingFunction:[SCICubicEase new]];
        [SCIAnimations sweepSeries:line4 duration:3.0 andEasingFunction:[SCICubicEase new]];
    }];
}

@end

// LegendChartView.swift

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

import SciChart.Protected.SCIStyleBase

class CustomSeriesStyle: SCIStyleBase<ISCIRenderableSeries> {
    let Stroke = "Stroke"
    init() {
        super.init(styleableType: SCIRenderableSeriesBase.self)
    }
    override func applyStyleInternal(to styleableObject: ISCIRenderableSeries!) {
        let currentPenStyle = styleableObject.strokeStyle
        putProperty(Stroke, value: currentPenStyle, intoObject: styleableObject)
        
        styleableObject.strokeStyle = SCISolidPenStyle(color: currentPenStyle!.color, thickness: 4)
    }
    
    override func discardStyleInternal(from styleableObject: ISCIRenderableSeries!) {
        let penStyle = getValueFromProperty(Stroke, ofType: SCISolidPenStyle.self, fromObject: styleableObject)
        styleableObject.strokeStyle = penStyle as? SCIPenStyle
    }
}

class LegendChartView: SingleChartLayout {
    
    override func initExample() {
        let xAxis = SCINumericAxis()
        let yAxis = SCINumericAxis()
        
        let dataSeries1 = SCIXyDataSeries(xType: .double, yType: .double)
        dataSeries1.seriesName = "Curve A"
        let dataSeries2 = SCIXyDataSeries(xType: .double, yType: .double)
        dataSeries2.seriesName = "Curve B"
        let dataSeries3 = SCIXyDataSeries(xType: .double, yType: .double)
        dataSeries3.seriesName = "Curve C"
        let dataSeries4 = SCIXyDataSeries(xType: .double, yType: .double)
        dataSeries4.seriesName = "Curve D"
        
        let SCDDoubleSeries1 = SCDDataManager.getStraightLines(withGradient: 4000, yIntercept: 1.0, pointCount: 10)
        let SCDDoubleSeries2 = SCDDataManager.getStraightLines(withGradient: 3000, yIntercept: 1.0, pointCount: 10)
        let SCDDoubleSeries3 = SCDDataManager.getStraightLines(withGradient: 2000, yIntercept: 1.0, pointCount: 10)
        let SCDDoubleSeries4 = SCDDataManager.getStraightLines(withGradient: 1000, yIntercept: 1.0, pointCount: 10)
        
        dataSeries1.append(x: SCDDoubleSeries1.xValues, y: SCDDoubleSeries1.yValues)
        dataSeries2.append(x: SCDDoubleSeries2.xValues, y: SCDDoubleSeries2.yValues)
        dataSeries3.append(x: SCDDoubleSeries3.xValues, y: SCDDoubleSeries3.yValues)
        dataSeries4.append(x: SCDDoubleSeries4.xValues, y: SCDDoubleSeries4.yValues)
        
        let line1 = SCIFastLineRenderableSeries()
        line1.strokeStyle = SCISolidPenStyle(colorCode: 0xFFFFFF00, thickness: 1)
        line1.dataSeries = dataSeries1
        let line2 = SCIFastLineRenderableSeries()
        line2.strokeStyle = SCISolidPenStyle(colorCode: 0xFF279B27, thickness: 1)
        line2.dataSeries = dataSeries2
        let line3 = SCIFastLineRenderableSeries()
        line3.strokeStyle = SCISolidPenStyle(colorCode: 0xFFFF1919, thickness: 1)
        line3.dataSeries = dataSeries3
        let line4 = SCIFastLineRenderableSeries()
        line3.strokeStyle = SCISolidPenStyle(colorCode: 0xFF1964FF, thickness: 1)
        line4.dataSeries = dataSeries4
        line4.isVisible = false
        
        let legendModifier = SCILegendModifier()
        legendModifier.position = [.left, .top]
        legendModifier.margins = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
        let seriesSelectionModifier = SCISeriesSelectionModifier()
        seriesSelectionModifier.selectedSeriesStyle = CustomSeriesStyle()
        
        SCIUpdateSuspender.usingWith(surface) {
            self.surface.xAxes.add(xAxis)
            self.surface.yAxes.add(yAxis)
            self.surface.renderableSeries.add(line1)
            self.surface.renderableSeries.add(line2)
            self.surface.renderableSeries.add(line3)
            self.surface.renderableSeries.add(line4)
            self.surface.chartModifiers.add(legendModifier)
            self.surface.chartModifiers.add(seriesSelectionModifier)
            
            SCIAnimations.sweep(line1, duration: 3.0, easingFunction: SCICubicEase())
            SCIAnimations.sweep(line2, duration: 3.0, easingFunction: SCICubicEase())
            SCIAnimations.sweep(line3, duration: 3.0, easingFunction: SCICubicEase())
            SCIAnimations.sweep(line4, duration: 3.0, easingFunction: SCICubicEase())
        }
    }
}

< BACK TO ALL IOS CHART CHART EXAMPLES