Pie Chart's label overlapping to pie chart in small device

Question

I have used following library to display pie chart in my current project: https://github.com/danielgindi/Charts.

But, I'm facing an issue with pie chart in iPhone smaller devices. I have implemented following code to display pi chart:

class ChartVC: UIViewController {

    @IBOutlet weak var pieChartView : PieChartView!

    var arrPiChartData : [PiChartData]?

    func setupPiChart() {

        let l = pieChartView.legend
        l.horizontalAlignment = .right
        l.verticalAlignment = .bottom
        l.orientation = .vertical
        l.xEntrySpace = 0
        l.yEntrySpace = 0
        l.yOffset = 0
        l.font = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18

        self.pieChartView.entryLabelFont = Typography.robotoRegular14
        self.pieChartView.drawHoleEnabled = false
        self.pieChartView.notifyDataSetChanged()
    }

    func setupData() {

        var arr = [PieChartDataEntry]()

        if self.arrPiChartData != nil {

            for piChartData in self.arrPiChartData! {

                var name = ""
                if let strName = piChartData.name {
                    name = strName
                }

                var value = 0.0
                if let floatValue = piChartData.percentAmount {
                    value = Double(floatValue)
                }

                let entry = PieChartDataEntry(value: value, label: name)
                arr.append(entry)
            }

            let set = PieChartDataSet(values: arr, label: "Total Sales by Company Users")
            set.drawIconsEnabled = false
            set.sliceSpace = 2
            set.xValuePosition = .outsideSlice
            set.entryLabelColor = UIColor.black
            set.entryLabelFont = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18

            set.colors = self.arrColours

            let data = PieChartData(dataSets: [set])

            let pFormatter = NumberFormatter()
            pFormatter.numberStyle = .percent
            pFormatter.maximumFractionDigits = 1
            pFormatter.multiplier = 1
            pFormatter.percentSymbol = " %"
            data.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))

            self.pieChartView.data = data

        } else {
            self.pieChartView.data = nil
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.setupPiChart()
        self.setupData()
    }

    //------------------------------------------------------------------------------

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        self.pieChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
    }
}

This code working to display pie chart. But there was an issue when I have run app in small device like iPhone SE, 5S, 6, 7, 8. There are label data overlapping to pie chart.

Please see following image which will describe what actual issue.

I have tried to find solution but didn't get.

I need help to fix this issue or better solution.

Answer 1

Due to there aren't good way to display more legends vertically in pie chart, I have updated my code to display it in horizontal direction. Also title is not display properly in pie chart so remove it. For that I have updated my code as follows to display proper pie chart:

func setupPiChart() {

    // This will align label text to top right corner
    let l = pieChartView.legend
    l.horizontalAlignment = .left
    l.verticalAlignment = .bottom
    l.orientation = .horizontal
    l.xEntrySpace = 10
    l.yEntrySpace = 0
    l.font = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18

    self.pieChartView.entryLabelFont = Typography.robotoRegular14
    self.pieChartView.drawHoleEnabled = false
    self.pieChartView.drawEntryLabelsEnabled = false
    self.pieChartView.notifyDataSetChanged()
}

Now, it's display good as looks in following image: