Change Bar Chart Design [iOS Charts]

Question

I've created a BarChart using BarChartView from Charts but I can't figure out how to change the bar design.

The design I am using is seen on the right side of the image whereas I need to achieve the left side design.

@IBOutlet weak var charts: BarChartView!

charts.chartDescription?.enabled = false
charts.isUserInteractionEnabled = false
//charts.maxVisibleCount = 10
charts.drawBarShadowEnabled = false
charts.legend.enabled = false

let xAxis = charts.xAxis
xAxis.labelPosition = .bottom
xAxis.labelTextColor = .white
charts.xAxis.drawGridLinesEnabled = false
charts.rightAxis.drawGridLinesEnabled = false
charts.rightAxis.drawLabelsEnabled = false
charts.leftAxis.drawGridLinesEnabled = false
charts.leftAxis.drawLabelsEnabled = false
charts.leftAxis.axisMinimum = 0 ///
charts.rightAxis.axisMinimum = 0
charts.fitBars = true
charts.legend.textColor = .white

charts.setBarChartData(xValues: time, yValues: data, label: "Bar Chart")

Any help will be appreciated.

Could you please share some code of your current implementation? — Grumme

staticVoidMan staticVoidMan · Accepted Answer · 2019-03-13T13:45:27

Currently, there's no way to change the bar design in the way you want.

However, someone did try a similar thing by changing the grid line to draw over the bars but it wasn't added.
See: Added drawGridLinesOnTopEnabled boolean flag to draw grid lines on top of Bar Charts.
You can check out his work here.

Another manual workaround, although not the best but should work if you absolutely need it, is by putting a transparent view with non-transparent lines on top of the chartView (or any other UIView for that matter)

Example:

class HorizontalLines: UIView {        
    override func draw(_ rect: CGRect) {

        //number of parts to divide the height of view by
        let segments = 20

        //number of lines ignoring the bottom most line
        let numberOfLines = segments - 1

        //draw the lines from left to right
        for i in (1...numberOfLines).reversed() {
            let multiplier = CGFloat(i)/CGFloat(segments)
            let y = rect.size.height * multiplier
            let startPoint = CGPoint(x:0, y:y)
            let endPoint = CGPoint(x:rect.size.width, y:y)

            let aPath = UIBezierPath()
            aPath.move(to: startPoint)
            aPath.addLine(to: endPoint)
            aPath.close()

            //line width
            aPath.lineWidth = 1

            aPath.stroke()
            aPath.fill()
        }
    }
}

Usage:

let lineView = HorizontalLines()
lineView.isUserInteractionEnabled = false
lineView.backgroundColor = .clear

lineView.translatesAutoresizingMaskIntoConstraints = false
chartView.addSubview(lineView)

lineView.leadingAnchor.constraint(equalTo: chartView.leadingAnchor).isActive = true
lineView.trailingAnchor.constraint(equalTo: chartView.trailingAnchor).isActive = true
lineView.topAnchor.constraint(equalTo: chartView.topAnchor).isActive = true
lineView.bottomAnchor.constraint(equalTo: chartView.bottomAnchor).isActive = true

Be aware that this will draw a line over anything shown on the chartView.
So if you decide to show bar data label, then the lines would draw over that as well.

I hope this helps you in some way :)

Change Bar Chart Design [iOS Charts]

1 Answers

Example:

Usage: