Android Charting Documentation - SciChart Android Charts SDK v3.x
SciChart Android 2D Charts API > 2D Chart Types > The Donut Chart Type
The Donut Chart Type

In SciChart v2.1 and above, The Donut Chart type is represented by the SciPieChartSurface class.

 

The Donut Chart is similar to Pie Chart except it has a round hole in the center. A PieSegment represents a percentage that corresponds to a particular value. This value appears drawn on every segment and can be set in code. A PieSegment can be selected by clicking either on it or on the corresponding item in the Legend. This action provides a visual feedback on the chart and the Legend.

 

Create a Donut Chart

To create a Donut Chart, you have to provide a PieRenderableSeriesCollection and assign it to RenderableSeries property. The data source is a collection of objects which implement the IPieRenderableSeries interface which contain list of PieSegment instances to draw. Alternatively you can add IPieRenderableSeries into RenderableSeries collection which is by default is empty. In next example we'll use Builders API to configure chart.

Declare SciPieChartSurface
Copy Code 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <com.scichart.charting.visuals.SciPieChartSurface
        android:id="@+id/pieChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
Configure SciPieChartSurface
Copy Code 
SciPieChartSurface pieChartSurface = findViewById(R.id.pieChart);
final float donutSeriesHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getActivity().getResources().getDisplayMetrics());
final IPieRenderableSeries donutSeries = sciChartBuilder.newDonutSeries().withSegments(
        sciChartBuilder.newPieSegment().withValue(40).withTitle("Green").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
        sciChartBuilder.newPieSegment().withValue(10).withTitle("Red").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
        sciChartBuilder.newPieSegment().withValue(20).withTitle("Blue").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build(),
        sciChartBuilder.newPieSegment().withValue(15).withTitle("Yellow").withRadialGradientColors(0xffFFFF00, 0xfffed325).build()
).withHeightSizingModeP(SizingMode.Absolute).withHeight(donutSeriesHeight).build();
Collections.addAll(pieChartSurface.getRenderableSeries(), donutSeries);

 

Styling Pie Chart Segments

Every PieSegment can be configured to show custom label which by default displays formatted value. To do this you'll need use PieSegmentLabelFormatter which is repsonsible for providing labels for each PieSegment. For example if you want to display Title of each label

Donut Series with Title
Copy Code 
final IPieRenderableSeries donutSeries = sciChartBuilder.newDonutSeries().withSegments(
        sciChartBuilder.newPieSegment().withValue(40).withTitle("Green").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
        sciChartBuilder.newPieSegment().withValue(10).withTitle("Red").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
        sciChartBuilder.newPieSegment().withValue(20).withTitle("Blue").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build(),
        sciChartBuilder.newPieSegment().withValue(15).withTitle("Yellow").withRadialGradientColors(0xffFFFF00, 0xfffed325).build()
).withHeightSizingModeP(SizingMode.Absolute).withHeight(donutSeriesHeight).build();
donutSeries.setPieSegmentLabelFormatter(new TitlePieSegmentLabelFormatter());

And TitlePieSegmentLabelFormatter class has next code:

TitlePieSegmentLabelFormatter
Copy Code 
public class TitlePieSegmentLabelFormatter extends PieSegmentLabelFormatterBase{
    @Override
    public CharSequence formatLabel(IPieSegment pieSegment) {
        return pieSegment.getTitle();
    }
}

This will result next output:

 

 

 

Changing Pie Segments Colors

To change colors of PieSegment you can use one next properties:

  • StrokeStyle which is repsonsible for drawing of segment border
  • FillStyle which is responsible for segment fill
Donut Series with custom colors
Copy Code 
final IPieRenderableSeries donutSeries = sciChartBuilder.newDonutSeries().withSegments(
        sciChartBuilder.newPieSegment().withValue(40).withTitle("Green").withFillColor(Color.GREEN).withStrokeStyle(Color.YELLOW).build(),
        sciChartBuilder.newPieSegment().withValue(10).withTitle("Red").withFillColor(Color.RED).withStrokeStyle(Color.BLUE).build(),
        sciChartBuilder.newPieSegment().withValue(20).withTitle("Blue").withFillColor(Color.BLUE).withStrokeStyle(Color.RED).build(),
        sciChartBuilder.newPieSegment().withValue(15).withTitle("Yellow").withFillColor(Color.YELLOW).withStrokeStyle(Color.BLUE).build()
)).withHeightSizingMode(SizingMode.Absolute).withHeight(donutSeriesHeight).build();

 

Changing size of Donut Chart

If you want to change size of Donut Chart you can use combination of HeightSizingMode and Height properties which allows 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 then Height 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 ).

Donut Chart with Relative size
Copy Code 
final IPieRenderableSeries donutSeries = sciChartBuilder.newDonutSeries().withSegments(
        sciChartBuilder.newPieSegment().withValue(40).withTitle("Green").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
        sciChartBuilder.newPieSegment().withValue(10).withTitle("Red").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
        sciChartBuilder.newPieSegment().withValue(20).withTitle("Blue").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build(),
        sciChartBuilder.newPieSegment().withValue(15).withTitle("Yellow").withRadialGradientColors(0xffFFFF00, 0xfffed325).build()
).withHeightSizingMode(SizingMode.Relative).withHeight(0.5f).build();