In MPAndroidChart Library, How to wrap X Axis Labels to two lines when long?

Question

I am trying to show X axis label to go to 2 lines when they are long. How to achieve this in LineChart? See screenshot below. I want time to go to second line instead of staying next to date

Answer 1

For those like me who want to achieve this but keep the original library, here is a simple solution inspired by @fgueli's modifications. This applies for one break line only (add "\n" in your labels) but you can easily adapt it to your needs.

1. Subclass XAxisRenderer

   public class CustomXAxisRenderer extends XAxisRenderer {
       public CustomXAxisRenderer(ViewPortHandler viewPortHandler, XAxis xAxis, Transformer trans) {
            super(viewPortHandler, xAxis, trans);
       }
   
       @Override
       protected void drawLabel(Canvas c, String formattedLabel, float x, float y, MPPointF anchor, float angleDegrees) {
           String line[] = formattedLabel.split("\n");
           Utils.drawXAxisValue(c, line[0], x, y, mAxisLabelPaint, anchor, angleDegrees);
           Utils.drawXAxisValue(c, line[1], x + mAxisLabelPaint.getTextSize(), y + mAxisLabelPaint.getTextSize(), mAxisLabelPaint, anchor, angleDegrees);
       }
   }
   

---

1. Set this renderer on the desired chart

   lineChart.setXAxisRenderer(new CustomXAxisRenderer(lineChart.getViewPortHandler(), lineChart.getXAxis(), lineChart.getTransformer(YAxis.AxisDependency.LEFT)));
   

---

3. Enjoy!

Answer 2

I modified the library to allow multiline label on the xAxis using \n

https://github.com/fabriziogueli/MPAndroidChart/tree/axis_multiline_labels

It is working right now but need further testing and maybe some code styling / adjustment.

XAxis xAxis = mChart.getXAxis();
xAxis.setMultiLineLabel(true);

Then you can use for example a SimpleDateFormat like this:

SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yy\nHH:mm a");

Maybe you have to set extra bottom offset to your chart:

mChart.setExtraBottomOffset(50);

Answer 3

Improved version of @Guillaume Jounel's answer to support multiple newlines, as well as strings w/o a newline.

@Override
protected void drawLabel(Canvas c, String formattedLabel, float x, float y,
                             MPPointF anchor, float angleDegrees) {
String line[] = formattedLabel.split("\n");
Utils.drawXAxisValue(c, line[0], x, y, mAxisLabelPaint, anchor, angleDegrees);
    for (int i = 1; i < line.length; i++) { // we've already processed 1st line
         Utils.drawXAxisValue(c, line[i], x, y + mAxisLabelPaint.getTextSize() * i,
             mAxisLabelPaint, anchor, angleDegrees);
    }
}

Answer 4

This looks like something that you will have to implement yourself by modifying the library to your needs.

It is currently not possible by default to have multiple lines on the x-axis. The reason therefore is that Android Canvas cannot simply plot a string e.g. like this "Line 1\nLine2" as two lines.

Answer 5

No need to offset x coordinate. And for multi-line scenario the code should be

@Override
protected void drawLabel(Canvas c, String formattedLabel, float x, float y, MPPointF anchor, float angleDegrees) {
    String lines[] = formattedLabel.split("\n");
    for (int i = 0; i < lines.length; i++) {
        float vOffset = i * mAxisLabelPaint.getTextSize();
        Utils.drawXAxisValue(c, lines[i], x, y + vOffset, mAxisLabelPaint, anchor, angleDegrees);
    }
}

Answer 6

Use the @Guillaume Jounel answer and then add:

XAxis xAxis = lineChart.getXAxis();    
xAxis.setLabelRotationAngle(-30f);

Answer 7

In Horizontal Barchart below solved the problem.

class CustomXAxisRenderer(viewPortHandler: ViewPortHandler?, xAxis: XAxis?, trans: Transformer?, chart: HorizontalBarChart) : XAxisRendererHorizontalBarChart(viewPortHandler, xAxis, trans, chart) {
    override fun drawLabel(c: Canvas?, formattedLabel: String, x: Float, y: Float, anchor: MPPointF?, angleDegrees: Float) {
        val line: List<String> = formattedLabel.split("\n")
        Utils.drawXAxisValue(c, line[0], x, y, mAxisLabelPaint, anchor, angleDegrees)
        for (i in 1 until line.size) {
            Utils.drawXAxisValue(c, line[i], x, y + mAxisLabelPaint.textSize * i,
                mAxisLabelPaint, anchor, angleDegrees)
        }
    }
}

and called as follows

barChart.setXAxisRenderer(CustomXAxisRenderer(barChart.viewPortHandler, xAxis, barChart.getTransformer(yAxis.axisDependency), barChart))