Charts icon indicating copy to clipboard operation
Charts copied to clipboard

Rounding the corners of bars

Open ricburton opened this issue 9 years ago • 25 comments

screen shot 2016-05-23 at 17 58 03

What would be the best way to achieve this effect? I’m guessing I’ll need to modify the way Charts draws in some way.

ricburton avatar May 24 '16 00:05 ricburton

I have been investigated on this a few months ago. It's possible, however, we need to change how we create the bar rect. Not so hard, but some decent work is needed

liuxuan30 avatar Jun 02 '16 03:06 liuxuan30

That's what I investigated before, you can try first. I am still looking for other options.

in public func drawDataSet: of bar chart renderer

                let cornerRadius: CGFloat = CGRectGetWidth(barRect) <= 5 ? 1.0 : 2.0
                let bezierPath = UIBezierPath(roundedRect: barRect, byRoundingCorners: UIRectCorner.AllCorners, cornerRadii: CGSizeMake(cornerRadius, cornerRadius))

                let roundedPath = bezierPath.CGPath

                // if drawing the bar shadow is enabled
                if (drawBarShadowEnabled)
                {
                    barShadow.origin.x = barRect.origin.x
                    barShadow.origin.y = viewPortHandler.contentTop
                    barShadow.size.width = barRect.size.width
                    barShadow.size.height = viewPortHandler.contentHeight

                    CGContextSetFillColorWithColor(context, dataSet.barShadowColor.CGColor)
//                    CGContextFillRect(context, barShadow)
                    CGContextAddPath(context, roundedPath)
                    CGContextFillPath(context)
                }

                // Set the color for the currently drawn value. If the index is out of bounds, reuse colors.
                CGContextSetFillColorWithColor(context, dataSet.colorAt(j).CGColor)
//                CGContextFillRect(context, barRect)
                CGContextAddPath(context, roundedPath)
                CGContextFillPath(context)

liuxuan30 avatar Jun 02 '16 03:06 liuxuan30

Thanks so much for the feedback! I’ll play with this.

ricburton avatar Jun 06 '16 15:06 ricburton

yeah I don't think it's a great one, especially your bars are very thin

liuxuan30 avatar Jun 14 '16 19:06 liuxuan30

its not working can anyone help me to do it ?

FahadIqbal avatar Oct 18 '16 17:10 FahadIqbal

@liuxuan30请问下,这个在最新的版本还可以?

CoderZyc avatar Dec 27 '16 11:12 CoderZyc

Thanks for your dearness

Sent from my iPhone

On Dec 27, 2016, at 15:30, CoderZyc [email protected] wrote:

@liuxuan30请问下,这个在最新的版本还可以?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

FahadIqbal avatar Dec 27 '16 12:12 FahadIqbal

@CoderZyc not merged yet. there is a PR for it.

liuxuan30 avatar Dec 28 '16 01:12 liuxuan30

Hey @liuxuan30 this looks awesome, any ETA on this?

acegreen avatar Feb 17 '17 14:02 acegreen

not really. I don't think it's perfect, and not having time to investigate other options.

liuxuan30 avatar Feb 20 '17 00:02 liuxuan30

@liuxuan30 no worries, there is another solution that worked out nicely #1917

acegreen avatar Feb 21 '17 13:02 acegreen

@acegreen basically they work the same way. Just wrap up nicely. Since more people asking, I am reopening this topic

liuxuan30 avatar Feb 24 '17 05:02 liuxuan30

Hi, Can you please help me with adding vertical dashed lines in between bars in bar graph and making the top corner of the bar slightly curvy . I am uploading the screenshot for the sample. screenshot_2018-09-06 zeplin - project

kirti0525 avatar Sep 06 '18 13:09 kirti0525

Any update on this?

lalkrishna avatar Nov 18 '20 08:11 lalkrishna

It looks like this and a similar pull request - https://github.com/danielgindi/Charts/pull/1917 - have been dead for at least 2 years. Is it worth throwing away all the work they took?

jacobsapps avatar Nov 25 '20 11:11 jacobsapps

Is there a way to achieve the same with the slices of a piechart?

kelvinofula avatar Jan 14 '21 21:01 kelvinofula

+1

scinfu avatar Jan 22 '21 15:01 scinfu

+1

JanC avatar Jan 25 '21 20:01 JanC

If #4297 was merged, you could just override the renderer.

4np avatar Jan 29 '21 08:01 4np

Not merged :/

scinfu avatar Feb 12 '21 15:02 scinfu

Recently I have been working on a project, to which I have added a chart library and display a beautiful rounded bar chart in swift. We can achieve this functionality easily. Please check this demo. Screenshot 2021-03-27 at 7 42 42 PM

AppCodeZip avatar Mar 27 '21 17:03 AppCodeZip

+1

nunocaseiro avatar Jul 25 '22 18:07 nunocaseiro

when this will be merge?

Eramirez06 avatar Dec 27 '22 07:12 Eramirez06

Hi All,

I want to get a Barchart with rounded bar corners and pie having rounded corners for every section. Waiting for this PR to be merged.

Any advise would be appreciated.

Also can someone suggest me how to get pie chart like added image.

PieChart_Requirement

iOSLeadGautam avatar Jan 16 '23 10:01 iOSLeadGautam

Is it still not possible to round the corners? https://github.com/danielgindi/Charts/issues/1066#issuecomment-223186364 does not work for me, since I'm using SPM

BenjaminAlbrectsen avatar Oct 28 '23 17:10 BenjaminAlbrectsen