20

I am looking to use MPAndroid Chart in my application. But currently, specifying points gives a line graph with sharp edges. How do I make the transition of the graph smooth (similar to a sine-wave for example) ?

Thanks !

2

4 Answers 4

54

MPAndroidChart:v3.0.0-beta1:

lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
2
  • 2
    You can also set the cubic intensity of the line dataset, as per the JavaDoc: lineDataset.cubicIntensity = 1.0f Aug 25, 2021 at 19:50
  • 1
    JavaDoc: Sets the intensity for cubic lines (if enabled). Max = 1f = very cubic, Min = 0.05f = low cubic effect, Default: 0.2f Aug 25, 2021 at 19:53
12

I made the smooth line chart this could help the community. Its look like this:

enter image description here

public LineChart lineChartDownFill;
...

private void initLineChartDownFill(View view) {

        lineChartDownFill = view.findViewById(R.id.lineChartDownFill);
        lineChartDownFill.setTouchEnabled(false);
        lineChartDownFill.setDragEnabled(true);
        lineChartDownFill.setScaleEnabled(true);
        lineChartDownFill.setPinchZoom(false);
        lineChartDownFill.setDrawGridBackground(false);
        lineChartDownFill.setMaxHighlightDistance(200);
        lineChartDownFill.setViewPortOffsets(0, 0, 0, 0);
        lineChartDownFillWithData();

    }

    private void lineChartDownFillWithData() {


        Description description = new Description();
        description.setText("Days Data");

        lineChartDownFill.setDescription(description);


        ArrayList<Entry> entryArrayList = new ArrayList<>();
        entryArrayList.add(new Entry(0, 60f, "1"));
        entryArrayList.add(new Entry(1, 55f, "2"));
        entryArrayList.add(new Entry(2, 60f, "3"));
        entryArrayList.add(new Entry(3, 40f, "4"));
        entryArrayList.add(new Entry(4, 45f, "5"));
        entryArrayList.add(new Entry(5, 36f, "6"));
        entryArrayList.add(new Entry(6, 30f, "7"));
        entryArrayList.add(new Entry(7, 40f, "8"));
        entryArrayList.add(new Entry(8, 45f, "9"));
        entryArrayList.add(new Entry(9, 60f, "10"));
        entryArrayList.add(new Entry(10, 45f, "10"));
        entryArrayList.add(new Entry(11, 20f, "10"));


        //LineDataSet is the line on the graph
        LineDataSet lineDataSet = new LineDataSet(entryArrayList, "This is y bill");

        lineDataSet.setLineWidth(5f);
        lineDataSet.setColor(Color.GRAY);
        lineDataSet.setCircleColorHole(Color.GREEN);
        lineDataSet.setCircleColor(R.color.colorWhite);
        lineDataSet.setHighLightColor(Color.RED);
        lineDataSet.setDrawValues(false);
        lineDataSet.setCircleRadius(10f);
        lineDataSet.setCircleColor(Color.YELLOW);

        //to make the smooth line as the graph is adrapt change so smooth curve
        lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        //to enable the cubic density : if 1 then it will be sharp curve
        lineDataSet.setCubicIntensity(0.2f);

        //to fill the below of smooth line in graph
        lineDataSet.setDrawFilled(true);
        lineDataSet.setFillColor(Color.BLACK);
        //set the transparency
        lineDataSet.setFillAlpha(80);

        //set the gradiant then the above draw fill color will be replace
        Drawable drawable = ContextCompat.getDrawable(getContext(), R.drawable.gradiant);
        lineDataSet.setFillDrawable(drawable);

        //set legend disable or enable to hide {the left down corner name of graph}
        Legend legend = lineChartDownFill.getLegend();
        legend.setEnabled(false);

        //to remove the cricle from the graph
        lineDataSet.setDrawCircles(false);

        //lineDataSet.setColor(ColorTemplate.COLORFUL_COLORS);


        ArrayList<ILineDataSet> iLineDataSetArrayList = new ArrayList<>();
        iLineDataSetArrayList.add(lineDataSet);

        //LineData is the data accord
        LineData lineData = new LineData(iLineDataSetArrayList);
        lineData.setValueTextSize(13f);
        lineData.setValueTextColor(Color.BLACK);


        lineChartDownFill.setData(lineData);
        lineChartDownFill.invalidate();


    }
11

Okay I found the answer myself and it is pretty straightforward. I just added the line

set.setDrawCubic(true);

to my LineDataSet and it was done.

1
  • 1
    This is not available in v3.1.
    – Machado
    May 12, 2020 at 14:03
1

Kotlin:

val uploadLineDataSet = LineDataSet(uploadList, "Upload")
uploadLineDataSet.mode = LineDataSet.Mode.CUBIC_BEZIER

Java:

LineDataSet uploadLineDataSet = new LineDataSet(uploadList, "Upload");
uploadLineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.