Want to add rectangle bars some radius to make it curve

[yash23raj]

Hello, I want the rectangle bars with adding some corner radius , I have added the screenshots as well Right now getting below rectangular bars view.

And want the bars to be looks like curve corner as below.

It will be very helpful if anyone give solution to it. Thank you

[almic]

@yash23raj design requests are rarely accepted, but I think this is something that should be added in some way. I'm adding this to the list.

[Shusshu]

Is there anything done on this one? I'd like to configure the radius to make it a pill shape

[martipello]

I did find someone managed to do this i converted it to kotlin

package com.sealstudios.pokemonApp.util

import android.graphics.Canvas import android.graphics.RectF import android.util.Log import com.github.mikephil.charting.animation.ChartAnimator import com.github.mikephil.charting.interfaces.dataprovider.BarDataProvider import com.github.mikephil.charting.interfaces.datasets.IBarDataSet import com.github.mikephil.charting.renderer.HorizontalBarChartRenderer import com.github.mikephil.charting.utils.ViewPortHandler

class RoundedHorizontalBarChartRenderer(chart: BarDataProvider?, animator: ChartAnimator?, viewPortHandler: ViewPortHandler?) : HorizontalBarChartRenderer(chart, animator, viewPortHandler) { private var mRightRadius = 5f private var mLeftRadius = 5f

fun setRightRadius(mRightRadius: Float) {
    this.mRightRadius = mRightRadius
}

fun setLeftRadius(mLeftRadius: Float) {
    this.mLeftRadius = mLeftRadius
}

override fun drawDataSet(c: Canvas, dataSet: IBarDataSet, index: Int) {
    val trans = mChart.getTransformer(dataSet.axisDependency)
    mShadowPaint.color = dataSet.barShadowColor
    val phaseX = mAnimator.phaseX
    val phaseY = mAnimator.phaseY

    // initialize the buffer
    val buffer = mBarBuffers[index]
    buffer.setPhases(phaseX, phaseY)
    buffer.setDataSet(index)
    buffer.setBarWidth(mChart.barData.barWidth)
    buffer.setInverted(mChart.isInverted(dataSet.axisDependency))
    buffer.feed(dataSet)
    trans.pointValuesToPixel(buffer.buffer)

    // if multiple colors
    if (dataSet.colors.size > 1) {
        var j = 0
        while (j < buffer.size()) {
            if (!mViewPortHandler.isInBoundsLeft(buffer.buffer[j + 2])) {
                j += 4
                continue
            }
            if (!mViewPortHandler.isInBoundsRight(buffer.buffer[j])) break
            if (mChart.isDrawBarShadowEnabled) {
                if (mRightRadius > 0) {
                    c.drawRoundRect(RectF(buffer.buffer[j], mViewPortHandler.contentTop(),
                            buffer.buffer[j + 2],
                            mViewPortHandler.contentBottom()), mRightRadius, mRightRadius, mShadowPaint)
                } else {
                    c.drawRect(buffer.buffer[j], mViewPortHandler.contentTop(),
                            buffer.buffer[j + 2],
                            mViewPortHandler.contentBottom(), mShadowPaint)
                }
            }

            // Set the color for the currently drawn value. If the index
            // is
            // out of bounds, reuse colors.
            mRenderPaint.color = dataSet.getColor(j / 4)
            if (mRightRadius > 0) {
                c.drawRoundRect(RectF(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
                        buffer.buffer[j + 3]), mRightRadius, mRightRadius, mRenderPaint)
            } else {
                c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
                        buffer.buffer[j + 3], mRenderPaint)
            }
            j += 4
        }
    } else {
        mRenderPaint.color = dataSet.color
        var j = 0
        while (j < buffer.size()) {
            if (!mViewPortHandler.isInBoundsLeft(buffer.buffer[j + 2])) {
                j += 4
                continue
            }
            if (!mViewPortHandler.isInBoundsRight(buffer.buffer[j])) break
            if (mChart.isDrawBarShadowEnabled) {
                if (mRightRadius > 0) c.drawRoundRect(RectF(buffer.buffer[j], mViewPortHandler.contentTop(),
                        buffer.buffer[j + 2],
                        mViewPortHandler.contentBottom()), mRightRadius, mRightRadius, mShadowPaint) else c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
                        buffer.buffer[j + 3], mRenderPaint)
            }
            if (mRightRadius > 0) {
                c.drawRoundRect(RectF(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
                        buffer.buffer[j + 3]), mRightRadius, mRightRadius, mRenderPaint)
            } else {
                c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
                        buffer.buffer[j + 3], mRenderPaint)
            }
            j += 4
        }
    }
}

}

use it like this

    val renderer = RoundedHorizontalBarChartRenderer(chart, chart.animator, chart.viewPortHandler)
    renderer.setRightRadius(45f)
    chart.renderer = renderer

[katariyapanka]

thats not work my bar gonna disappear and set as horizontal so how can we set vertical

[katariyapanka]

class RoundedBarChartRenderer( chart: BarDataProvider?, animator: ChartAnimator?, viewPortHandler: ViewPortHandler? ) : BarChartRenderer(chart, animator, viewPortHandler) {

private var mTopRadius = 5f
private var mBottomRadius = 5f

fun setTopRadius(mTopRadius: Float) {
    this.mTopRadius = mTopRadius
}

fun setBottomRadius(mBottomRadius: Float) {
    this.mBottomRadius = mBottomRadius
}

override fun drawDataSet(c: Canvas, dataSet: IBarDataSet, index: Int) {
    val trans = mChart.getTransformer(dataSet.axisDependency)
    mShadowPaint.color = dataSet.barShadowColor
    val phaseX = mAnimator.phaseX
    val phaseY = mAnimator.phaseY

    // Initialize the buffer
    val buffer = mBarBuffers[index]
    buffer.setPhases(phaseX, phaseY)
    buffer.setDataSet(index)
    buffer.setBarWidth(mChart.barData.barWidth)
    buffer.setInverted(mChart.isInverted(dataSet.axisDependency))
    buffer.feed(dataSet)
    trans.pointValuesToPixel(buffer.buffer)

    // Draw bars
    if (dataSet.colors.size > 1) {
        var j = 0
        while (j < buffer.size()) {
            if (!mViewPortHandler.isInBoundsTop(buffer.buffer[j + 3])) {
                j += 4
                continue
            }
            if (!mViewPortHandler.isInBoundsBottom(buffer.buffer[j + 1])) break
            if (mChart.isDrawBarShadowEnabled) {
                if (mTopRadius > 0) {
                    c.drawRoundRect(
                        RectF(mViewPortHandler.contentLeft(), buffer.buffer[j + 1],
                            mViewPortHandler.contentRight(), buffer.buffer[j + 3]),
                        mTopRadius, mTopRadius, mShadowPaint)
                } else {
                    c.drawRect(mViewPortHandler.contentLeft(), buffer.buffer[j + 1],
                        mViewPortHandler.contentRight(), buffer.buffer[j + 3], mShadowPaint)
                }
            }

            mRenderPaint.color = dataSet.getColor(j / 4)
            if (mTopRadius > 0) {
                c.drawRoundRect(RectF(buffer.buffer[j], buffer.buffer[j + 1],
                    buffer.buffer[j + 2], buffer.buffer[j + 3]),
                    mTopRadius, mBottomRadius, mRenderPaint)
            } else {
                c.drawRect(buffer.buffer[j], buffer.buffer[j + 1],
                    buffer.buffer[j + 2], buffer.buffer[j + 3], mRenderPaint)
            }
            j += 4
        }
    } else {
        mRenderPaint.color = dataSet.color
        var j = 0
        while (j < buffer.size()) {
            if (!mViewPortHandler.isInBoundsTop(buffer.buffer[j + 3])) {
                j += 4
                continue
            }
            if (!mViewPortHandler.isInBoundsBottom(buffer.buffer[j + 1])) break
            if (mChart.isDrawBarShadowEnabled) {
                if (mTopRadius > 0) {
                    c.drawRoundRect(RectF(mViewPortHandler.contentLeft(), buffer.buffer[j + 1],
                        mViewPortHandler.contentRight(), buffer.buffer[j + 3]),
                        mTopRadius, mTopRadius, mShadowPaint)
                } else {
                    c.drawRect(mViewPortHandler.contentLeft(), buffer.buffer[j + 1],
                        mViewPortHandler.contentRight(), buffer.buffer[j + 3], mShadowPaint)
                }
            }
            if (mTopRadius > 0) {
                c.drawRoundRect(RectF(buffer.buffer[j], buffer.buffer[j + 1],
                    buffer.buffer[j + 2], buffer.buffer[j + 3]),
                    mTopRadius, mBottomRadius, mRenderPaint)
            } else {
                c.drawRect(buffer.buffer[j], buffer.buffer[j + 1],
                    buffer.buffer[j + 2], buffer.buffer[j + 3], mRenderPaint)
            }
            j += 4
        }
    }
}

}

[Dndandroid]

Rounded corner chart will not working when highlighted chart top corner not set rounded it's set square i want only top corner set rounded.