Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

enter image description here

like image 248
NinjaCoder Avatar asked Sep 10 '15 18:09

NinjaCoder


4 Answers

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)));
    

  1. Enjoy!

LineChart labels on multiple lines

like image 86
Guillaume Jounel Avatar answered Nov 03 '22 21:11

Guillaume Jounel


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);
like image 20
fgueli Avatar answered Nov 03 '22 20:11

fgueli


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);
    }
}
like image 8
Peter Avatar answered Nov 03 '22 20:11

Peter


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.

like image 7
Philipp Jahoda Avatar answered Nov 03 '22 20:11

Philipp Jahoda