Pre loader

SuccessRateChart based on PieChart for Android

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums



I was wondering if it would be possible to create a simple clean looking chart like described in the attached image. I am looking for a “SuccessRateChart” that has some similarity to the PieChart but does not use the whole circle to describe its content. I would also need a way to adjust the visible radius of the Pie. In means of information visualization you often hear the term “doughnut chart”…

On way could be to draw some circle stacked over the chart itself, but there should be a better solution.

Would love to hear from you,

Kind regards,

Version for Android
  • You must to post comments

Hi Stephan,

We do support drawing of donut charts and if you modify that example like this you can get output like on your image:

protected void initExample() {
    final float donutSeriesHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getActivity().getResources().getDisplayMetrics());

    final int totalCount = 10;
    final int success = 8;

    final DonutRenderableSeries donutSeries = sciChartBuilder.newDonutSeries().withSegments(
            sciChartBuilder.newPieSegment().withValue(totalCount - success).withFillColor(ColorUtil.Transparent).build()


    Collections.addAll(pieChartSurface.getRenderableSeries(), donutSeries);

The only thing that it would require additional TextView with text on top of chart + you may need to set some negative padding on chart, because it will try occupy space to draw entire chart.

Is this suitable for your needs?

Best regards,

  • You must to post comments

Hi Yura

Thank you for the quick answer, I think that is something to work with :-). Do you know if it is also possible to remove the black border of the transparent segment?

Would it also be possible to add a fill gradient along the colored segment. I am talking about an “angle gradient” similar to find in Photoshop where the gradient starts at the left bottom and ends on the other side of the segment.

Best regards,

  • Yura Khariton
    You can set transparent stroke style color for that segment to remove border. I’m not sure about your gradient requirements – currently we support solid, linear + radial gradient and texture as fill for segments. You can use the last one and provide texture with desired gradient if built in gradient styles won’t be suitable for your application.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.