Pie Chart Alignment issue using MPAndroidChart

Question

In my application am using piechart. Using the following library
api 'com.github.PhilJay:MPAndroidChart:v3.0.3'.

But am facing an issue the alignment problem.Attaching the screenshots,Please have a look on it:

Code:

public static void chartDetails(PieChart mChart, Typeface tf) {
    mChart.animateXY(1400, 1400);
    mChart.getDescription().setEnabled(false);
    mChart.setCenterTextTypeface(tf);
    mChart.setCenterText("");
    mChart.setCenterTextSize(10f);
    mChart.setCenterTextTypeface(tf);
    // radius of the center hole in percent of maximum radius
    mChart.setHoleRadius(45f);
    mChart.setTransparentCircleRadius(50f);
    Legend l = mChart.getLegend();
    l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
    l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
    l.setOrientation(Legend.LegendOrientation.VERTICAL);
    l.setDrawInside(false);
    mChart.setTouchEnabled(true);
}

Marc Estrada · Accepted Answer · 2018-06-18T12:13:18.550

9

You could use outside values in order to keep clear your dataset names for small pieces of data.

For example, you could achieve something like that:

Here is the code. This code is supposed to use when overriding a PieChart. If you are not overriding it, you should adapt this code to work with your PieChart directly, such as mChart.setData(); instead of setData();.

PieDataSet dataSet = new PieDataSet(entries, null);
dataSet.setSliceSpace(3f);
dataSet.setIconsOffset(new MPPointF(0, 40));
dataSet.setSelectionShift(5f);

// Outside values
dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
dataSet.setValueLinePart1OffsetPercentage(100f); /** When valuePosition is OutsideSlice, indicates offset as percentage out of the slice size */
dataSet.setValueLinePart1Length(0.6f); /** When valuePosition is OutsideSlice, indicates length of first half of the line */
dataSet.setValueLinePart2Length(0.6f); /** When valuePosition is OutsideSlice, indicates length of second half of the line */
setExtraOffsets(0.f, 5.f, 0.f, 5.f); // Ofsets of the view chart to prevent outside values being cropped /** Sets extra offsets (around the chart view) to be appended to the auto-calculated offsets.*/

PieData data = new PieData(dataSet);
data.setValueTextSize(10f);
data.setValueTextColor(Color.BLACK);
setData(data);

edited Jun 18 '18 at 12:13

answered Jun 18 '18 at 10:38

Marc Estrada

1,657
10
20

setDrawEntryLabels(false); setExtraOffsets(0.f, 5.f, 0.f, 5.f); can you tell what is this. – Sunisha Guptan Jun 18 '18 at 10:47
Don't understand your comment. You can test and modify these values as you want. – Marc Estrada Jun 18 '18 at 10:48
Ya that should apply like mChart.setExtraOffsets(0.f, 5.f, 0.f, 5.f); – Sunisha Guptan Jun 18 '18 at 10:49
`setDrawEntryLabels(false);` prevent showing the name of your dataset, set to true if your want to show it. `setExtraOffsets(0.f, 5.f, 0.f, 5.f);` as I've just edited sets extra padding in order to prevent outside values being cropped if the line is too long. You can test some values until you find thats you like. – Marc Estrada Jun 18 '18 at 10:51
@SunishaSindhu I've just added some JavaDoc provided by the library in order you to understand better what do each method. – Marc Estrada Jun 18 '18 at 10:56
Ya i understood..But i need to share some other image after i did what you suggest that screenshot. – Sunisha Guptan Jun 18 '18 at 11:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173325/discussion-between-sunisha-sindhu-and-marc-estrada). – Sunisha Guptan Jun 18 '18 at 11:05

Sunisha Guptan · Answer 2 · 2018-06-18T14:48:42.933

Finally i got solution,Thanks to @Marc Estrada answer.But some more changes i have done.

The following thing code i have used,

  public static void chartDetails1(PieChart mChart, Typeface tf) {
    mChart.animateXY(1400, 1400);
    mChart.getDescription().setEnabled(false);
    mChart.setCenterTextTypeface(tf);
    mChart.setCenterText("");
    mChart.setCenterTextSize(10f);
    mChart.setCenterTextTypeface(tf);
    // radius of the center hole in percent of maximum radius
    mChart.setHoleRadius(45f);
    mChart.setTransparentCircleRadius(50f);
    Legend l = mChart.getLegend();
    l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
    l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
    l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
    l.setWordWrapEnabled(true);
    l.setDrawInside(false);
    mChart.setTouchEnabled(true);
    mChart.setDrawEntryLabels(false);
    mChart.setExtraOffsets(25.f, 0.f, 25.f, 0.f);

    mChart.setUsePercentValues(true);
    mChart.setDragDecelerationFrictionCoef(0.95f);
    mChart.setDrawHoleEnabled(true);
    mChart.setHoleColor(Color.WHITE);
    mChart.setTransparentCircleColor(Color.WHITE);
    mChart.setTransparentCircleAlpha(110);
    mChart.setTransparentCircleRadius(61f);
    mChart.setRotationAngle(0);
    // enable rotation of the chart by touch
    mChart.setHighlightPerTapEnabled(true);
    // mChart.setUnit(" €");
    // mChart.setDrawUnitsInChart(true);
    l.setEnabled(true);
    mChart.highlightValues(null);
    mChart.setUsePercentValues(true);
    /*new*/
    mChart.setHoleRadius(30f);
    mChart.setDrawCenterText(false);
    mChart.setTransparentCircleRadius(35f);

    mChart.getDescription().setEnabled(false);
    mChart.setRotationEnabled(false);

    mChart.setEntryLabelColor(Color.WHITE);
    mChart.setEntryLabelTextSize(9f);

}

public static ArrayList<Integer> colorsList() {
    ArrayList<Integer> colors = new ArrayList<Integer>();

    for (int c : ColorTemplate.MATERIAL_COLORS)
        colors.add(c);

    for (int c : ColorTemplate.JOYFUL_COLORS)
        colors.add(c);

    for (int c : ColorTemplate.COLORFUL_COLORS)
        colors.add(c);

    for (int c : ColorTemplate.LIBERTY_COLORS)
        colors.add(c);

    for (int c : ColorTemplate.PASTEL_COLORS)
        colors.add(c);

    colors.add(ColorTemplate.getHoloBlue());
    return colors;

}
public static PieData pieDatasetSlice(PieDataSet dataSet){
    dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
    dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
    dataSet.setValueLinePart1OffsetPercentage(100f); /** When valuePosition is OutsideSlice, indicates offset as percentage out of the slice size */
    dataSet.setValueLinePart1Length(0.6f); /** When valuePosition is OutsideSlice, indicates length of first half of the line */
    dataSet.setValueLinePart2Length(0.6f); /** When valuePosition is OutsideSlice, indicates length of second half of the line */
    dataSet.setSliceSpace(0f);
    PieData data = new PieData(dataSet);
    data.setValueTextSize(5f);
    data.setValueTextColor(Color.BLACK);
    data.setValueFormatter(new PercentFormatter());
    return data;
}

After adding your entries add these lines,

    PieDataSet dataSet = new PieDataSet(entries1, null);
    ArrayList<Integer> colors = Constants.colorsList();
    dataSet.setColors(colors);
    PieData data = Constants.pieDatasetSlice(dataSet);

If you want to see more details of each slice,do the following ,

implements OnChartValueSelectedListener

Hi can you please share your code of how you are creating entries ? — Sharp Edge, Jan 17 '19 at 12:44

Pie Chart Alignment issue using MPAndroidChart

2 Answers2