MPAndroidChart: Rotate Labels of X-Axis by 90 degrees in BarChart

Question

My text in xAxes of BarChart from MPAndroidChart is too long. How I can rotate label of xAxes by 90 degrees?

score 35 · Answer 1 · edited Jan 22 '16 at 00:14

35

Now it is possible in library version 2.1.6

try this

XAxis xAxis=barChart.getXAxis();
xAxis.setLabelRotationAngle(-45);

edited Jan 22 '16 at 00:14

Philipp Jahoda

50,880
24
180
187

answered Jan 21 '16 at 15:43

Hardik Amal

1,283
1
16
23

@Phillip How do I rotate them only when my labels doesn't fit the screen size – Prabs Feb 18 '17 at 05:29
Base your angle on the amount of data you have. Say if 6 values fit then dont set the rotation till number of values cross 6 and then after that increase the angle gradually till you reach 90 – Cognoscis Jan 03 '18 at 14:47
@user1615184 If this answer helped you plz do mark it as correct. – Hardik Amal Feb 19 '18 at 08:21

score 5 · Answer 2 · answered Dec 28 '17 at 10:49

5

It is simple, try this...

XAxis xAxis = barChart.getXAxis();
xAxis.setLabelRotationAngle(90);

answered Dec 28 '17 at 10:49

Gurvinder Singh

2,157
3
15
21

1

text overlaps on another text. Is there any fix for this? – Luvnish Monga Aug 09 '19 at 09:49

score 2 · Answer 3 · answered Aug 10 '15 at 04:27

you can hide you xAxis label and put custom text view which is Vertical. Here is code for Vertical Text view.

public class VerticalTextView extends TextView {
final boolean topDown;

public VerticalTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    final int gravity = getGravity();
    if (Gravity.isVertical(gravity) && (gravity & Gravity.VERTICAL_GRAVITY_MASK) == Gravity.BOTTOM) {
        setGravity((gravity & Gravity.HORIZONTAL_GRAVITY_MASK) | Gravity.TOP);
        topDown = false;
    } else
        topDown = true;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(heightMeasureSpec, widthMeasureSpec);
    setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
}

@Override
protected void onDraw(Canvas canvas) {
    TextPaint textPaint = getPaint();
    textPaint.setColor(getCurrentTextColor());
    textPaint.drawableState = getDrawableState();

    canvas.save();

    if (topDown) {
        canvas.translate(getWidth(), 0);
        canvas.rotate(90);
    } else {
        canvas.translate(0, getHeight());
        canvas.rotate(-90);
    }

    canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop());

    getLayout().draw(canvas);
    canvas.restore();
}

}

Put you Chart to one layout and place this textview to left of chart. and Hide xAxis lable. I have used this pattern for My Barchart. — piyush poriya, Aug 10 '15 at 04:38
No dear piyush. My Mean was not xAxis lable. it was all XAxis lables that are depend on Xvalues. Did you get it? — mbagher, Aug 10 '15 at 04:40
ArrayList xVals = new ArrayList(); for (int i = 0; i < count; i++) { xVals.add(Integer.toString(i) ); } — mbagher, Aug 10 '15 at 04:40

score 0 · Answer 4 · answered Sep 10 '18 at 12:28

Just override XAxisRenderer and renderAxisLabels(c: Canvas) method.

And set it to barChart itemView.barChart.setXAxisRenderer(CustomBarChartRenderer(itemView.barChart.viewPortHandler, itemView.barChart.xAxis, itemView.barChart.rendererXAxis.transformer))

    import android.graphics.Canvas
import com.github.mikephil.charting.renderer.XAxisRenderer
import com.github.mikephil.charting.utils.ViewPortHandler
import com.github.mikephil.charting.components.XAxis
import com.github.mikephil.charting.utils.MPPointF
import com.github.mikephil.charting.utils.Transformer

class CustomBarChartRenderer(viewPortHandler: ViewPortHandler, xAxis: XAxis, trans: Transformer) : XAxisRenderer(viewPortHandler, xAxis, trans) {

    override fun renderAxisLabels(c: Canvas) {

        if (!mXAxis.isEnabled || !mXAxis.isDrawLabelsEnabled)
            return

        val yoffset = mXAxis.yOffset

        mAxisLabelPaint.typeface = mXAxis.typeface
        mAxisLabelPaint.textSize = mXAxis.textSize
        mAxisLabelPaint.color = mXAxis.textColor

        val pointF = MPPointF.getInstance(0f, 0f)
        if (mXAxis.position == XAxis.XAxisPosition.TOP) {
            pointF.x = 0.5f
            pointF.y = 1.0f
            drawLabels(c, mViewPortHandler.contentTop() - yoffset, pointF)

        } else if (mXAxis.position == XAxis.XAxisPosition.TOP_INSIDE) {
            pointF.x = 0.5f
            pointF.y = 1.0f
            drawLabels(c, mViewPortHandler.contentBottom() - yoffset, pointF)

        } else if (mXAxis.position == XAxis.XAxisPosition.BOTTOM) {
            pointF.x = 0.5f
            pointF.y = 0.0f
            drawLabels(c, mViewPortHandler.contentBottom() + yoffset, pointF)

        } else if (mXAxis.position == XAxis.XAxisPosition.BOTTOM_INSIDE) {
            pointF.x = 0.5f
            pointF.y = 0.0f
            drawLabels(c, mViewPortHandler.contentBottom() - yoffset - mXAxis.mLabelRotatedHeight.toFloat(), pointF)

        } else { // BOTH SIDED
            pointF.x = 0.5f
            pointF.y = 1.0f
            drawLabels(c, mViewPortHandler.contentTop() - yoffset, pointF)
            pointF.x = 0.5f
            pointF.y = 0.0f
            drawLabels(c, mViewPortHandler.contentBottom() + yoffset, pointF)
        }
        MPPointF.recycleInstance(pointF)
    }
}

MPAndroidChart: Rotate Labels of X-Axis by 90 degrees in BarChart

4 Answers4