Drawing a cubic line chart using MPAndroid chart

5
votes

I was trying to draw a cubic line graph such as this:

enter image description here

using the MPAndroid chart library.

I am able to draw the line but not the fill between the X Axis and the line as shown in the picture.
Have gone through library and many SO questions.

2
androidmpandroidchart
For clarity: in your graph I can see a normal timechart with a smooth curve (sinusoidal). A cubic expression is something else. - Phantômaxx
@FrankN.Stein You can check the heading of the graph in the link itself github.com/PhilJay/MPAndroidChart . I just wanted to know how do I get the fill. Can this be done using a line chart or something else - Yash Ladia
It isn't featured in the example. I know that it is possible. Not just able to figure the stuff out - Yash Ladia
I don't use that library, but I can guess it's some property to set. The documentation should mention that. - Phantômaxx
Why is this question downvoted so many times? - Heisenberg

2 Answers

13
votes

I think you need this:

LineDataSet dataset = new LineDataSet(vals, null);

dataset.setDrawFilled(true);

setDrawFilled(boolean filled)

Set to true if the DataSet should be drawn filled (surface), and not just as a line, disabling this will give great performance boost! default: false

You can also control the transparency:

setFillAlpha(int alpha)

sets the alpha value (transparency) that is used for filling the line surface (0-255), default: 85

And color:

setFillColor(int color)

sets the color that is used for filling the line surface

10
votes

  1. To remove horizontal grid lines:

    chart.getXAxis().setDrawGridLines(false);

  2. For cubic lines:

    dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);

  3. To Fill area below line, disable displayed values:

    dataSet.setDrawFilled(true);
dataSet.setDrawValues(false);

  4. Set fill color and line color:

    dataSet.setFillColor(ContextCompat.getColor(contex,R.color.pale_green));
dataSet.setColor(ContextCompat.getColor(contex,R.color.pale_green));

  5. Disable transparency (values range 0-255) and disable drawing circles on the main chart line:

    dataSet.setFillAlpha(255);
dataSet.setDrawCircles(false);

Result: enter image description here

edit1: To disable legend and hide description:

chart.getDescription().setText("");
chart.getLegend().setEnabled(false);

and:

<color name="pale_green">#6BF3AD</color>

edit2: To disable right axis:

chart.getAxisRight().setEnabled(false);

edit3: Nearly forgot the last thing:

  chart.getAxisLeft().setValueFormatter(new IAxisValueFormatter() {
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            return String.format("%.2f $",value);
        }
    });