Mpandroidchart: How to have a gradient background under LineChart

Created on 6 Oct 2015  路  3Comments  路  Source: PhilJay/MPAndroidChart

Being a "Frequently Asked Qustion", I did it subclassing LineChartRenderer in this way.

public class LineChartRenderer extends com.github.mikephil.charting.renderer.LineChartRenderer {

    public LineChartRenderer(LineDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler) {
        super(chart, animator, viewPortHandler);
    }

    @Override
    protected void drawLinearFill(Canvas c, LineDataSet dataSet, List<Entry> entries, int minx, int maxx, Transformer trans) {

        mRenderPaint.setStyle(Paint.Style.FILL);

        mRenderPaint.setColor(dataSet.getFillColor());
        // filled is drawn with less alpha
        mRenderPaint.setAlpha(dataSet.getFillAlpha());

        Path filled = generateFilledPath(entries, dataSet.getFillFormatter().getFillLinePosition(dataSet, mChart), minx, maxx);

        trans.pathValueToPixel(filled);

        // GRADIENT BG - SET SHADER
        ALog.d(this, "drawLinearFill @LineChartRenderer - c.getHeight()=" + c.getHeight());
        mRenderPaint.setShader(new LinearGradient(0, 0, 0, c.getHeight(), AConstant.COLOR_CHART_LINE, AConstant.COLOR_CHART_BG,
                Shader.TileMode.CLAMP));

        c.drawPath(filled, mRenderPaint);

        // restore alpha
        mRenderPaint.setAlpha(255);

        // GRADIENT BG - REMOVE SHADER
        mRenderPaint.setShader(null);
    }

    /**
     * Generates the path that is used for filled drawing.
     * 
     * @param entries
     * @return
     */
    private Path generateFilledPath(List<Entry> entries, float fillMin, int from, int to) {
        ALog.d(this, "generateFilledPath @LineChartRenderer");

        float phaseX = mAnimator.getPhaseX();
        float phaseY = mAnimator.getPhaseY();

        Path filled = new Path();
        filled.moveTo(entries.get(from).getXIndex(), fillMin);
        filled.lineTo(entries.get(from).getXIndex(), entries.get(from).getVal() * phaseY);

        // create a new path
        for (int x = from + 1, count = (int) Math.ceil((to - from) * phaseX + from); x < count; x++) {

            Entry e = entries.get(x);
            filled.lineTo(e.getXIndex(), e.getVal() * phaseY);
        }

        // close up
        filled.lineTo(entries.get(Math.max(Math.min((int) Math.ceil((to - from) * phaseX + from) - 1, entries.size() - 1), 0))
                .getXIndex(), fillMin);

        filled.close();

        return filled;
    }

}

Being AConstant.COLOR_CHART_LINE and AConstant.COLOR_CHART_BG the START and END color of the gradient.

Hope can be useful to someone.

Most helpful comment

For reference: There's a new way to set this by

lineDataSet.setDrawFilled(true);
lineDataSet.setFillDrawable(gradientDrawable);

Details are at #104 and [stackoverflow]

All 3 comments

thanks

For reference: There's a new way to set this by

lineDataSet.setDrawFilled(true);
lineDataSet.setFillDrawable(gradientDrawable);

Details are at #104 and [stackoverflow]

Thank buddy that's worked.
can I make the chart line also gradient??

Was this page helpful?
0 / 5 - 0 ratings