Rounded bars in ios Charts

Question

I've created a BarChart using BarChartView from ios-Charts but I can't figure out howto add rounded corners to bars.

This is the code that I'm using:

let barChart: BarChartView
//...
var xVals = [String]()
var yVals = [BarChartDataEntry]()
//...

let set1 = BarChartDataSet(yVals: yVals, label: "Label")

set1.drawValuesEnabled = false
set1.highlightLineWidth = 3
set1.colors = [UIColor.whiteColor()]

barChart.data = BarChartData(xVals: xVals, dataSet: set1)

I've looked for a property like set1.barCornerRadius to set, but I didn't find anything.

Here is what I have:

Here is what I need:

http://stackoverflow.com/questions/25476139/how-do-i-make-an-uiimage-view-with-rounded-corners-cgrect-swift ? — oren, Jun 20 '16 at 10:55
No @oren, bars are managed directly by the BarChartView. By default they are squared [like these](https://camo.githubusercontent.com/78b4bc4e50e151970961daf56e81c4c0db72d27c/68747470733a2f2f7261772e6769746875622e636f6d2f5068696c4a61792f4d5043686172742f6d61737465722f73637265656e73686f74732f73696d706c6564657369676e5f6261726368617274332e706e67) and I don't know howto round their corners. — lifeisfoo, Jun 20 '16 at 14:03
Ok, sorry... I just thought that after all, this is a UIView, so maybe possible to use its layer... — oren, Jun 20 '16 at 14:17
check out https://github.com/danielgindi/Charts/issues/1066. There are demo code, you can try first — Wingzero, Jun 21 '16 at 22:35

score 41 · Answer 1 · edited Feb 02 '17 at 15:08

41

In BarChartRenderer.swift you can to modify open func drawDataSet(context: CGContext, dataSet: IBarChartDataSet, index: Int)

Then there's if-statement for stacked and nonstacked bars, choose your case and remove:

context.fill(barRect)

and instead of it add:

let bezierPath = UIBezierPath(roundedRect: barRect, cornerRadius: %YOUR_CORNER_RADIUS%)
context.addPath(bezierPath.cgPath)

context.drawPath(using: .fill)

edited Feb 02 '17 at 15:08

Boris Y.

4,387
2
32
50

answered Jun 21 '16 at 13:12

keyv

2,430
1
18
15

4

I've tried to override `drawDataSet` but I got dozen of errors that property is inaccessible due to `fileprivate` protection level. Do I have to copy them(and their init methods) into my subclass, or is there a better solution? – Adam Bardon May 12 '17 at 14:09
2

i implemented your code in my file ,but this file is not called , so what is the problem is that? – Jaydeep Virani Jan 19 '19 at 06:41
2

If you just want to round the upper corners: let bezierPath = UIBezierPath(roundedRect:barRect,byRoundingCorners:[.topRight, .topLeft], cornerRadii: CGSize(width: 5, height: 5)) – Java Feb 09 '21 at 00:38
Replace Line 434 if you have confusion – Krunal Nagvadia Mar 18 '21 at 07:36

Sergey Grischyov · Answer 2 · 2019-03-04T06:48:38.157

If you don't want to wait for this pull request to be merged in the original library, there's a working solution that I use myself in a couple of projects.

This working example is based on all of the previous data I've collected all over the Internet. It works as of today but you have to do a few precautions before using it.

To make it work, all you have to do is replace the whole BarChartRenderer.swift file with this one.

First, have a backup copy of the original file. Then, make sure you replace the file every time you update your Charts CocoaPod, otherwise, the file will be overwritten.

In the end, to control the corner radius of your chart, just change the barCornerRadius = CGFloat(5.0) to whatever you want to.

Here's the final result I've got:

After you've replaced the file, make sure to clean your Xcode's build folder and then recompile your project for changes to take effect immediately.

lifeisfoo · Answer 3 · 2017-07-24T11:27:53.047

0

Seems that this feature is currently not supported but is under development. In the meanwhile take a look at this pull request.

edited Jul 24 '17 at 11:27

answered Jun 21 '16 at 06:32

lifeisfoo

15,478
6
74
115

nope, the link is wrong. Correct is https://github.com/danielgindi/Charts/issues/1066 – Wingzero Jun 21 '16 at 22:35
Is this feature still under development? If not, please consider updating your answer As to the link to the pull request, whilst this may theoretically answer the question, [it would be preferable](//meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Please [edit] the answer with all relevant information. – Adriaan Oct 11 '22 at 05:32
The issue and the related PR are still open – lifeisfoo Oct 11 '22 at 09:20

score 0 · Answer 4 · edited Oct 10 '22 at 14:05

0

You can use the following to round the edges:

You have to change in Charts library, Go to the BarchartRenderer.swift and unlock the file
Line No: 434 comment/remove it.
Add this below code

let bezierPath = UIBezierPath(roundedRect: barRect, cornerRadius:3.2)
context.addPath(bezierPath.cgPath)
context.drawPath(using: .fill)

edited Oct 10 '22 at 14:05

Adriaan

17,741
7
42
75

answered Nov 25 '21 at 08:29

Sanjay Mali

506
6
13

Please [edit] your post to add code and data as text ([using code formatting](https://stackoverflow.com/editing-help#code)), not images. Images: A) don't allow us to copy-&-paste the code/errors/data for testing; B) don't permit searching based on the code/error/data contents; and [many more reasons](https://meta.stackoverflow.com/a/285557). Images should only be used, in addition to text in code format, if having the image adds something significant that is not conveyed by just the text code/error/data. See [mcve] on what code is required. – Adriaan Oct 10 '22 at 13:49

Rounded bars in ios Charts

4 Answers4

Linked