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

The Donut Chart Type

In SciChart, the Donut Chart type is represented by the SCIPieChartSurface class.

The SCIDonutRenderableSeries is very similar to the Pie Chart, except it has a round hole in its’ center. A SCIPieSegment represents a percentage that corresponds to a particular value. This value appears drawn on every segment and can be set in code.

A SCIPieSegment can be selected by clicking on either of them (via the Selection Modifier) or on the corresponding item in the Legend. This action provides a visual feedback on the chart and the Legend.

Donut Chart Type

NOTE: Examples for the Pie Chart can be found in the SciChart iOS Examples Suite as well as on GitHub:

The SCIPieSegment allows you to specify different styles to control rendering of the segments, e.g.:

  • SCIPieSegment.fillStyle;
  • SCIPieSegment.strokeStyle;
  • SCIPieSegment.outlineStyle;
  • SCIPieSegment.titleStyle.

NOTE: To learn more about Pens and Brushes and how to utilize them, please refer to the SCIPenStyle, SCIBrushStyle and SCIFontStyle article.

Also, you can control whether to draw labels on segments or not via the SCIPieDonutRenderableSeriesBase.drawLabels property.

Create a Donut Chart

To create a Donut Chart, you have to provide a SCIPieRenderableSeriesCollection and assign it to SCIPieChartSurface.renderableSeries property. The data source is a collection of objects that conforms to the ISCIPieRenderableSeries protocol which contain list of SCIPieSegment instances to draw.

// Assume a surface has been created and configured somewhere SCIPieChartSurface pieChartSurface; pieChartSurface.holeRadius = 100; // Create Donut Series and fill it with Segments SCIDonutRenderableSeries *donutSeries = [SCIDonutRenderableSeries new]; [donutSeries.segments add:[self buildSegmentWithValue:40.0 Title:@“Green” RadialGradient:[[SCIRadialGradientBrushStyle alloc] initWithCenterColorCode:0xff84BC3D edgeColorCode:0xff5B8829]]]; [donutSeries.segments add:[self buildSegmentWithValue:10.0 Title:@“Red” RadialGradient:[[SCIRadialGradientBrushStyle alloc] initWithCenterColorCode:0xffe04a2f edgeColorCode:0xffB7161B]]]; [donutSeries.segments add:[self buildSegmentWithValue:20.0 Title:@“Blue” RadialGradient:[[SCIRadialGradientBrushStyle alloc] initWithCenterColorCode:0xff4AB6C1 edgeColorCode:0xff2182AD]]]; [donutSeries.segments add:[self buildSegmentWithValue:15.0 Title:@“Yellow” RadialGradient:[[SCIRadialGradientBrushStyle alloc] initWithCenterColorCode:0xffFFFF00 edgeColorCode:0xfffed325]]]; [pieChartSurface.renderableSeries add:donutSeries];
// Assume a surface has been created and configured somewhere let pieChartSurface: SCIPieChartSurface pieChartSurface.holeRadius = 100 // Create Donut Series and fill it with Segments let donutSeries = SCIDonutRenderableSeries() donutSeries.segments.add(buildSegmentWithValue(segmentValue: 40, title: “Green”, gradientBrush: SCIRadialGradientBrushStyle(centerColorCode: 0xff84BC3D, edgeColorCode: 0xff5B8829))) donutSeries.segments.add(buildSegmentWithValue(segmentValue: 10, title: “Red”, gradientBrush: SCIRadialGradientBrushStyle(centerColorCode: 0xffe04a2f, edgeColorCode: 0xffB7161B))) donutSeries.segments.add(buildSegmentWithValue(segmentValue: 20, title: “Blue”, gradientBrush: SCIRadialGradientBrushStyle(centerColorCode: 0xff4AB6C1, edgeColorCode: 0xff2182AD))) donutSeries.segments.add(buildSegmentWithValue(segmentValue: 15, title: “Yellow”, gradientBrush: SCIRadialGradientBrushStyle(centerColorCode: 0xffFFFF00, edgeColorCode: 0xfffed325))) pieChartSurface.renderableSeries.add(donutSeries)
// Assume a surface has been created and configured somewhere SCIPieChartSurface pieChartSurface; pieChartSurface.HoleRadius = 100; // Create Donut Series and fill it with Segments var donutSeries = new SCIDonutRenderableSeries { IsVisible = false, Segments = new SCIPieSegmentCollection { new SCIPieSegment { Value = 40, Title = “Green”, FillStyle = new SCIRadialGradientBrushStyle(0xff84BC3D, 0xff5B8829), CenterOffset = 1 }, new SCIPieSegment { Value = 10, Title = “Red”, FillStyle = new SCIRadialGradientBrushStyle(0xffe04a2f, 0xffB7161B), CenterOffset = 1 }, new SCIPieSegment { Value = 20, Title = “Blue”, FillStyle = new SCIRadialGradientBrushStyle(0xff4AB6C1, 0xff2182AD), CenterOffset = 1 }, new SCIPieSegment { Value = 15, Title = “Yellow”, FillStyle = new SCIRadialGradientBrushStyle(0xffFFFF00, 0xfffed325), CenterOffset = 1 }, }, }; pieChartSurface.RenderableSeries.Add(donutSeries);

Changing size of the Donut Chart

If you want to change size of Donut Chart you can use combination of the following properties:

The above allows you to specify how much space Donut Chart should use for its’ rendering. If you use Absolute mode then height accepts size in pixels, and if you use Relative mode, it expects value from 0 to 1, which tells how much of the available space it should use for rendering (e.g. 0.5 will tell Donut series to use 50% of available space).

Also, you can control the center hole size via the SCIPieChartSurface.holeRadius property.

SCIPieChartSurface’ Modifiers

SCIPieChartSurface supports modifiers like Legend and Selection, which are synced if both are added.

Donut Chart Modifiers

Donut Chart Selection

To add the SCIPieSelectionModifier, please use the following code:

SCIPieSelectionModifier *selectionModifier = [SCIPieSelectionModifier new]; // Select the mode that fits your requirements selectionModifier.selectionMode = SCIPieSelectionModifierSelectionMode_SingleSelectDeselectOnDoubleTap; [pieChartSurface.chartModifiers add:selectionModifier];
let selectionModifier = SCIPieSelectionModifier() // Select the mode that fits your requirements selectionModifier.selectionMode = .singleSelectDeselectOnDoubleTap pieChartSurface.chartModifiers.add(selectionModifier)
// Select the mode that fits your requirements pieChartSurface.ChartModifiers.Add(new SCIPieSelectionModifier { SelectionMode = SCIPieSelectionModifierSelectionMode.SingleSelectDeselectOnDoubleTap });

Donut Chart Legend

To add the SCIPieLegendModifier, use the following code:

SCIPieLegendModifier *legendModifier = [SCIPieLegendModifier new]; legendModifier.sourceSeries = pieSeries; legendModifier.margins = UIEdgeInsetsMake(17, 17, 17, 17); legendModifier.position = SCIAlignment_Bottom | SCIAlignment_CenterHorizontal; [pieChartSurface.chartModifiers add:legendModifier];
let legendModifier = SCIPie`LegendModifier() legendModifier.sourceSeries = pieSeries; legendModifier.margins = UIEdgeInsets(top: 17, left: 17, bottom: 17, right: 17) legendModifier.position = [.bottom, .centerHorizontal] pieChartSurface.chartModifiers.add(legendModifier)`
pieChartSurface.ChartModifiers.Add(new SCIPieLegendModifier { SourceSeries = rSeries, Position = SCIAlignment.Bottom | SCIAlignment.CenterHorizontal, Margins = new UIEdgeInsets(17, 17, 17, 17), });

Multi Pie Donut Chart

In SciChart you can have both Pie Chart and Donut Chart placed inside SCIPieChartSurface at the same time.

Multi Pie Donut

NOTE: Examples of the Multi Pie Donut Chart can be found in the SciChart iOS Examples Suite as well as on GitHub

In the example above we used SCIPieTooltipModifier. To use it in your chart, just use the following code:

[pieChartSurface.chartModifiers add:[SCIPieTooltipModifier new]];
pieChartSurface.ChartModifiers.Add(new SCIPieTooltipModifier());