How to Plot Line Chart in reverse direction ie. starting from right to left direction in Android using MPAndroidChart library?

Question

Hi I am using this library https://github.com/PhilJay/MPAndroidChart and trying to draw line chart from Endpoint to Start point that is from right to left direction, I followed library document and tried to implement below custom class code:

    class CustomLineChartRender(
    chart: LineDataProvider?,
    animator: ChartAnimator?, viewPortHandler: ViewPortHandler?,
) : LineChartRenderer(chart, animator, viewPortHandler) {
    override fun drawHorizontalBezier(dataSet: ILineDataSet) {

        val phaseY = mAnimator.phaseY

        val trans = mChart.getTransformer(dataSet.axisDependency)

        mXBounds[mChart] = dataSet

        cubicPath.reset()

        if (mXBounds.range >= 1) {
            var prev = dataSet.getEntryForIndex(mXBounds.max)
            var cur = prev

            // let the spline start
            cubicPath.moveTo(cur.x, cur.y * phaseY)
            //for (j in mXBounds.min + 1..mXBounds.range + mXBounds.min) {
            for (j in (mXBounds.min until mXBounds.max).reversed()) {
                prev = cur
                cur = dataSet.getEntryForIndex(j)
                val cpx = (prev.x
                        - (prev.x - cur.x) / 2.0f)
                cubicPath.cubicTo(
                    cpx, prev.y * phaseY,
                    cpx, cur.y * phaseY,
                    cur.x, cur.y * phaseY)
            }
        }

        // if filled is enabled, close the path
        if (dataSet.isDrawFilledEnabled) {
            cubicFillPath.reset()
            cubicFillPath.addPath(cubicPath)
            // create a new path, this is bad for performance
            drawCubicFill(mBitmapCanvas, dataSet, cubicFillPath, trans, mXBounds)
        }
        mRenderPaint.color = dataSet.color
        mRenderPaint.style = Paint.Style.STROKE
        trans.pathValueToPixel(cubicPath)
        mBitmapCanvas.drawPath(cubicPath, mRenderPaint)
        mRenderPaint.pathEffect = null
    }
}

But above code stops animation lineChart.animateX(1000, Easing.EasingOption.Linear) starting from right direction at all. Any pointer will be appreciated!!

Current behavior is Line chart start rendering from Left to Right direction and Expected behavior is Line chart should start rendering from Right to Left direction with animation

Thank You

Answer 1

Here is an easy solution I found without any much code if anyone is looking into it:-

Inside your XML file add one View on top of line chart like that below:-

    <FrameLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">
    <com.github.mikephil.charting.charts.LineChart
       android:id="@+id/lineChart"
       android:layout_width="400dp"
       android:layout_height="244dp"/>
    
    <LinearLayout
       android:id="@+id/llOverLay"
       android:layout_width="400dp"
       android:layout_height="200dp"
       android:background="@color/white"/>
   </FrameLayout>

Rendered line chart without animation first

lineChart?.invalidate()

Then apply reveal animation from right to left which is translate llOverLayView on top of line chart like below

lineChart?.doOnLayout {
    ObjectAnimator.ofFloat(binding.llOverLay, "translationX", -screenWidth).apply {
                                    duration = 1000
                                    start()
}

Now this makes Line Chart rendering from right to left and thats it!!