Mpandroidchart: Rounded bar chart with customize background

Created on 24 Jun 2015  路  17Comments  路  Source: PhilJay/MPAndroidChart

I would like add rounded corners on bar chart and add a customized background. In Android, I know I can create rounded corner for rectangle on a drawable but this library doesn't support "barchart.setBackground(R.drawable.my_custom_back);"
It is possible to add this function? Or, may be, is there an another solution?

Most helpful comment

@sbron Here's what I did to accomplish what you're looking for...

  1. Make custom render Class that extends BarChartRenderer
  2. Override method drawDataSet (easiest approach is to copy over drawDataSet method code from BarChartRenderer.java)
  3. Change occurrences of "drawRect" to "drawRoundedRect"
  4. Set the renderer to your bar chart...
    barChart.setRenderer(new MyRenderer(barChart, barChart.getAnimator(), barChart.getViewPortHandler()));

You can also add any other customizations for drawing the bars in that method. Good luck!

All 17 comments

Sorry, it's my fault. I would like create rounded BAR!

@sbron Here's what I did to accomplish what you're looking for...

  1. Make custom render Class that extends BarChartRenderer
  2. Override method drawDataSet (easiest approach is to copy over drawDataSet method code from BarChartRenderer.java)
  3. Change occurrences of "drawRect" to "drawRoundedRect"
  4. Set the renderer to your bar chart...
    barChart.setRenderer(new MyRenderer(barChart, barChart.getAnimator(), barChart.getViewPortHandler()));

You can also add any other customizations for drawing the bars in that method. Good luck!

@alliecurry Ty it works! There so much to account for though.

Like If you round the rect, it rounds all 4 corners. If I want to round just the top 2 corners, a solution might be to draw a regular square rect on bottom half and have it overlap the rounded rect.

Then you have to account for the highlight color which is a completely separate bar that is overlayed on top the regular bar. That also needs to be rounded. The highlight color has some transparency to it so if you draw a square rect on bottom of the rounded highlight bar, the bottom part will be visibly darker than the top half.

I'll just stick with the square bar, imo it looks a lot more cleaner anyways.

@alliecurry I'm using method you described. But for some reason I get only top corners rounded.
Is there a reason for that?

 fun drawRoundRect(canvas: Canvas, left: Float, top: Float, right: Float, bottom: Float) {
    val rad = (right - left) / 2
    canvas.drawRoundRect(left, top, right, bottom, rad, rad, mRenderPaint)
}

@alliecurry, thanks for the tip. I got it to work here.

i need to add round corner to radar chat in Xamarin. pls help

Is there a 2018 in-library solution for this?

^

  • Wrong language
  • Wrong library

... @idofle?

@AdityaAnand1 have you solve this issues and make a success to build a rounded bar charts?

@alliecurry I'm using method you described. But for some reason I get only top corners rounded.
Is there a reason for that?

 fun drawRoundRect(canvas: Canvas, left: Float, top: Float, right: Float, bottom: Float) {
    val rad = (right - left) / 2
    canvas.drawRoundRect(left, top, right, bottom, rad, rad, mRenderPaint)
}

I am also getting only top corners to be round and I need also bottom corners to be round. Any one has accomplished having all 4 corners round in the barchart?

For rounding the top corners I followed this link: https://stackoverflow.com/questions/30761082/mpandroidchart-round-edged-bar-chart/

Hey everyone I'm trying to achieve this:
chart

And this is what i've done so far:
screenshot_20181226-153130

Now i need to overlap first value bar to the next one and so on how can i do this please help

@tabish075 i'm also running on same issue. have you got a solution

@Hashan1599 Not with this library.. no

@tabish075 how can i get rid of this issue. what library should i want to tryout

I'll make a gist and share soon !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mrZizik picture mrZizik  路  3Comments

andreyfel picture andreyfel  路  3Comments

vishvendu picture vishvendu  路  3Comments

SutharRohit picture SutharRohit  路  3Comments

OnlyInAmerica picture OnlyInAmerica  路  3Comments