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
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!!
Please be advised, this approach has one restriction which enforced single or multiple series rendering in one fixed direction. Either forward or reverse direction at the same time.