MPAndroidChart PieChart how to change the center text to display the different color and font size

Question

Currently I use the MPAndroidChart from GITHUB and draw the piechart to display the two line text, each line has different color and different font size,I check the source codes and the center text is a string object, and try to use:

PAINT paint = pie_chart.getPaint(Chart.PAINT_CENTER_TEXT);

but looks like not work, would someone has the experience to do it and guide me about it.

Answer 1

after study the source codes, i change the PieChartRenderer.java to change the mCenterTextPaint.setColor(Color.parseColor("#333333")); mCenterTextPaint.setTextSize(Utils.convertDpToPixel(20f)); mCenterTextPaint.setTextAlign(Align.CENTER);

then use the "\n" as a split to get the first line

   int index = centerText.indexOf("\n");

   Spannable tempSpannable = new SpannableString(centerText);
   tempSpannable.setSpan(new RelativeSizeSpan(0.75f), 0, index, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
   tempSpannable.setSpan(new ForegroundColorSpan(Color.parseColor("#999999")),
                        0, index, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

   // If width is 0, it will crash. Always have a minimum of 1
   mCenterTextLayout = new StaticLayout(tempSpannable, 0, centerText.length(),
                        mCenterTextPaint,
                        (int)Math.max(Math.ceil(mCenterTextLastBounds.width()), 1.f),
                        Layout.Alignment.ALIGN_NORMAL, 1.f, 0.f, false);

then get what i wanted is

Answer 2

PieData data = new PieData(dataSet);  
pieChart.setCenterText("Total Questions 5" );        
pieChart.setCenterTextSize(14f);
pieChart.setCenterTextColor(Color.BLUE);

Answer 3

You can accomplish this without modifying MPAndroidChart source by nesting your com.github.mikephil.charting.charts.PieChart component and your center text within a RelativeLayout in your activity layout. You can use a LinearLayout component to format your center text rows.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    >
    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/pieChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.github.mikephil.charting.charts.PieChart>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="vertical">
        <TextView
            android:id="@+id/pieChartMonthlyAverage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/ChartStat"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/ChartStatLabel"
            android:text="@string/charts.label.average"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/ChartStatLabel"
            android:layout_marginTop="-4dp"
            android:text="@string/charts.label.monthly"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/ChartStatLabel"
            android:layout_marginTop="-4dp"
            android:text="@string/charts.label.bill"/>
    </LinearLayout>
</RelativeLayout>

Be careful to place your LinearLayout containing your center text below your PieChart component. Here is the end result.

Answer 4

Use public void setCenterText(CharSequence text) on the chart and pass a SpannableString as its argument. Style your SpannableString to your heart's content.