Mpandroidchart Set Background Between Limit Lines

I a using MpAndroidChart library. I need to implement a design where I need to color the area between two limit lines. I have attached an image for reference. I have tried multiple

Solution 1:

I don't think that there is a direct way to achieve this, but this workaround should help you:

LimitLinell=newLimitLine(lowerLimit, "Systolic range");
ll.setLineColor(Color.GREEN);
ll.setLineWidth(upperLimit - lowerLimit);

ll.setTextColor(Color.WHITE);
ll.setTextSize(12f);

chart.getAxisLeft().setDrawLimitLinesBehindData(true);

The important thing here is the method setDrawLimitLinesBehindData(true).

As always, all the information is available in the documentation.

Solution 2:

I had the same problem but reached a different workaround without having to subclass the LineChart. Using canvas to draw the rectangle works, but you have to translate your charts coordinates to the canvas coordinates. You cannot use a single limit line as there is a limit to the width of the line. The workaround I used was to simply loop through limit lines to create a rectangle within my range.

floatincrement= (rangeHigh - rangeLow) / 20;
    floatmetricLine= rangeLow;

    for(inti=0; i < 20; i++) {
        LimitLinellRange=newLimitLine(metricLine, "");
        llRange.setLineColor(Color.parseColor("#b5eb45"));
        llRange.setLineWidth(10f);
        leftAxis.addLimitLine(llRange);
        metricLine = metricLine + increment;
    }

Solution 3:

As this is still an issue I throw in my two cents. I tried the solution of @HouseOfHufflepuff but I got the error message that I use too much limit lines in the plot. It seems to work anyway but I guess the performance is not optimal.

So I implemented a subclass for drawing zones in the background. Maybe it's helpful for someone:

publicclassTargetZoneCombinedChartextendsCombinedChart {

    protected Paint mYAxisSafeZonePaint;
    private List<TargetZone> mTargetZones;

    publicTargetZoneCombinedChart(Context context) {
        super(context);
    }

    publicTargetZoneCombinedChart(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    publicTargetZoneCombinedChart(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Overrideprotectedvoidinit() {
        super.init();
        mYAxisSafeZonePaint = newPaint();
        mYAxisSafeZonePaint.setStyle(Paint.Style.FILL);
        // mGridBackgroundPaint.setColor(Color.rgb(240, 240, 240));
        mTargetZones = newArrayList<>();
    }

    @OverrideprotectedvoidonDraw(Canvas canvas) {
        for (TargetZone targetZone : mTargetZones) {
            // prepare coordinatesfloat[] pts = newfloat[4];
            pts[1] = targetZone.lowerLimit;
            pts[3] = targetZone.upperLimit;
            mLeftAxisTransformer.pointValuesToPixel(pts);

            // draw
            mYAxisSafeZonePaint.setColor(targetZone.color);
            canvas.drawRect(mViewPortHandler.contentLeft(), pts[1], mViewPortHandler.contentRight(),
                    pts[3], mYAxisSafeZonePaint);
        }
        super.onDraw(canvas);
    }

    publicvoidaddTargetZone(TargetZone targetZone){
        mTargetZones.add(targetZone);
    }

    public List<TargetZone> getTargetZones(){
        return mTargetZones;
    }

    publicvoidclearTargetZones(){
        mTargetZones = newArrayList<>();
    }

    publicstaticclassTargetZone {
        publicfinalint color;
        publicfinalfloat lowerLimit;
        publicfinalfloat upperLimit;

        publicTargetZone(int color, float lowerLimit, float upperLimit) {
            this.color = color;
            this.lowerLimit = lowerLimit;
            this.upperLimit = upperLimit;
        }
    }
}

To add a zone you just need to add a target zone object:

float rangeHigh = 180f;
float rangeLow = 80f;

chart.addTargetZone(new TargetZoneCombinedChart.TargetZone(                Color.parseColor("#33b5eb45"),rangeLow,rangeHigh));

whereby the ranges are y values of the left axis.

Solution 4:

This can be done by sub-classing the chart class (e.g. LineChart) and then overriding the onDraw() method. In the overridden onDraw() you can draw the rectangle(s) you need directly onto the canvas and then call super.onDraw() to complete the rendering of the chart.

There is an example of how to do this on the MP Android Github (see below). I followed the code in the example and it worked well for me.

https://github.com/PhilJay/MPAndroidChart/issues/485