Value Overlay
Send Feedback

Glossary Item Box

Topic Overview


This topic is a conceptual overview of the IGChartView™ control’s Value Overlay and provides a code example demonstrating how to add it to the chart view.

In this topic


Value Overlay summary

A Value Overlay uses the value property to bind a numeric value to display as a line superimposed over other types of series in order to highlight important values such as a data set’s mean, median, mode etc…. The Value Overlay uses either the horizontal or the vertical axis, as a reference, when bound to an IGNumericXAxis and IGNumericYAxis respectively, as a line segment emanating from the center of the chart when bound to an IGNumericAngleAxis, or a circle when bound to IGNumericRadiusAxis.

The Value Overlay inherits its appearance properties from the IGSeries base class, so brush, thickness, and dashArray are available and work the same way as they do with other types of series.

Adding a Value Overlay to the IGChartView – Code Example


The code below uses the IGCategorySeriesDataSourceHelper to supply randomly generated data to a Spline Area series by first adding to the IGChartView instance, next added as a Value Overlay with the value property set to 17.5 with a thickness of 15.0, and then finally added to the IGChartView as a subview of the current UIView.


This code example requires the inclusion of the IGChartView framework, detail about how to add this framework are available in the Adding the Chart Framework File topic.


In C#:

List<NSObject> values = new List<NSObject>();
for (int i = 0; i < 25; i++) {
      values.Add(new NSNumber((new Random(i).Next() % 100)));
IGCategorySeriesDataSourceHelper source = new IGCategorySeriesDataSourceHelper();
source.Values = values.ToArray();
IGChartView infraChart = new IGChartView(this.View.Frame);
infraChart = new IGChartView();
infraChart.Frame = new RectangleF(0, 0, this.View.Frame.Size.Width, this.View.Frame.Size.Height);
infraChart.Frame = RectangleF.Inflate(infraChart.Frame, -10.0f, -10.0f);
infraChart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
IGSplineAreaSeries splineAreaSeries = (IGSplineAreaSeries) infraChart.AddSeries(new MonoTouch.ObjCRuntime.Class(typeof(IGSplineAreaSeries)), "splineAreaSeries", source, "xAxis", "yAxis");
((IGCategoryXAxis) splineAreaSeries.XAxis).LabelOrientationAngle = 45;
splineAreaSeries.XAxis.Extent = 40;
IGValueOverlay valueOverlay = new IGValueOverlay("Value Overlay");
valueOverlay.Axis = splineAreaSeries.YAxis;
valueOverlay.Value = 17.5f;
valueOverlay.Thickness = 15.0f;
valueOverlay.Brush = new IGBrush(1.0f, 0.0f, 0.0f, 0.3f);

In Objective-C:

    NSMutableArray *values = [[NSMutableArray alloc] init];    for (int i = 0; i < 25; i++)     {        [values addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100)]];    }
    IGCategorySeriesDataSourceHelper *source = [[IGCategorySeriesDataSourceHelper alloc] init];    source.values = values;
    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    infraChart = [[IGChartView alloc] init];
    infraChart.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    infraChart.frame = CGRectInset(infraChart.frame, 10, 10);
    infraChart.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
    IGSplineAreaSeries *splineAreaSeries = (IGSplineAreaSeries *)[infraChart addSeriesForType:[IGSplineAreaSeries class] usingKey:@"splineAreaSeries" withDataSource:source firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
    ((IGCategoryXAxis *)splineAreaSeries.xAxis).labelOrientationAngle = 45;
    splineAreaSeries.xAxis.extent = 40;
    IGValueOverlay *valueOverlay = [[IGValueOverlay alloc] initWithKey:@"Value Overlay"];
    valueOverlay.axis = splineAreaSeries.yAxis;
    valueOverlay.value = 17.5;
    valueOverlay.thickness = 15.0;
    valueOverlay.brush = [[IGBrush alloc] initWithR:1.0 andG:0.0 andB:0.0 andA:0.3];
    [infraChart addSeries:valueOverlay];
    [self.view addSubview:infraChart];

Related Content


The following topics provide additional information related to this topic.



This collection of topics explains each of the individual charts supported by the IGChartView control.