Charts: PieChart value labels are overlaping when values are between 0 to 9

[serhatsezer]

Hi,

I'm using PieChart but when values are between 0 to 9 side by side they are overlaping. Is there any solution to fix this? I've added screenshot and my implementation below.

Here it is my implementation:

`let chartView = PieChartView()
let screenFrame = view.frame
chartView.frame = CGRect(x: 0, y: 10, width: screenFrame.width, height: screenFrame.height - 100)
chartView.usePercentValuesEnabled = false
chartView.drawSlicesUnderHoleEnabled = false
chartView.chartDescription?.enabled = false
chartView.setExtraOffsets(left: 25.0, top: 10.0, right: 25.0, bottom: 0.0)
chartView.drawCenterTextEnabled = true
chartView.noDataText = "Veri girişi yok."
chartView.drawHoleEnabled = false
chartView.rotationAngle = 10.0
chartView.rotationEnabled = true
chartView.highlightPerTapEnabled = true
chartView.entryLabelColor = .white;
chartView.entryLabelFont = UIFont.defaultAppFont(size: 18)

    let l = chartView.legend
    l.horizontalAlignment = .center;
    l.verticalAlignment = .bottom;
    l.orientation = .vertical;
    l.drawInside = false
    l.xEntrySpace = 7.0
    l.font = UIFont.defaultAppFont(size: 16)
    l.yEntrySpace = 0.0
    l.yOffset = 0.0

    var values = [PieChartDataEntry]()
    var colors = [UIColor]()

    for item in reports {
        let color = UIColor.hexString(hex: item.textColor)
        colors.append(color)
        let pieChartData = PieChartDataEntry(value: Double(item.carCount), label: item.carText)
        values.append(pieChartData)
    }

    let dataSet = PieChartDataSet(values: values, label: "")

// dataSet.xValuePosition = .outsideSlice
dataSet.yValuePosition = .outsideSlice
dataSet.valueLinePart1Length = 0.6
dataSet.valueLinePart2Length = 0.9
dataSet.valueLineColor = UIColor.bgBlackColor
dataSet.sliceSpace = 1.0
dataSet.colors = colors
dataSet.entryLabelColor = UIColor.clear

    let data = PieChartData(dataSet: dataSet)
    data.setValueFont(UIFont.defaultAppBoldFont(size: 15))
    data.setValueTextColor(UIColor.black)
    chartView.data = data;
    chartView.highlightValues(nil)

    chartView.animate(yAxisDuration: 0.95, easingOption: .easeInExpo)
    view.addSubview(chartView)`

[jackCaptian]

Is the problem solved, brother

[liuxuan30]

I don't think this can be easily solved, as the slices are too thin to hold a font that has a bigger height. Think about the math. Either you manually change the offset, if overlap happens, or use a smaller font size. But there will always be corner cases, so...

I will keep this open if someone have better solutions.

[liuxuan30]

crap, I just found https://github.com/danielgindi/Charts/pull/2062, seems a PR to hide small slice labels. but as I said, it solve the issue by hiding the label, not showing two labels without overlap. up to you.

[serhatsezer]

@liuxuan30 Yeah. I saw this when I first face this issue. But I think this can be solved if pie chart a little bigger. But this approach makes other pieces shrink their size. I did some tweaks in this project but I couldn't make it. I don't have enough math knowledge to solve this. :/

[liuxuan30]

how do you want to make the pie chart bigger? in terms of radius? It has to be restrained with the contentRect, and the labels, and the parent view.

[serhatsezer]

@liuxuan30 Nope. I don't want to make the whole chart bigger I just want to make only pieces who has %1 percentage value a bit bigger than others. Thus label can appear without any overlapping.

[liuxuan30]

the arc length and eventually depends on the radius as well

[jjatie]

I think the solution would be to move the label further away from the chart to prevent it from overlapping. I don't think anyone has time to implement a solution for this, and I don't think it's critical.
@serhatsezer It would be appreciated if you can PR an implementation and discussion can continue there.