X axis values are getting overlapped - iOS Charts

Question

Here is the screenshot of chart view.

I am using ios https://github.com/danielgindi/Charts library

Values (dates) on x axis are getting overlapping.

 axisMinValue = 50.0
 axixMaxvalue = 300.0

unitsSold = [65.0,88.0, 114.0, 111.0, 88.0 ]
months = ["Sep 12, 2019”,"Sep 12, 2019”,"Sep 12, 2019”,"Sep 11, 2019”,"Sep 11, 2019"]

Here is the code I wrote,

    if unitsSold.count < 1{

         cell.chartViewOutlet.noDataText = "No data available!"
    }
    else{

        dataEntries = []
        for i in 0 ..< unitsSold.count {
            let dataEntry = ChartDataEntry(x: Double(i), y: unitsSold[i]) 
            dataEntries.append(dataEntry) // here we add it to the data set
        }

        let lineChartDataSet = LineChartDataSet(values: dataEntries, label: "Units Consumed")

        lineChartDataSet.setCircleColor(UIColor.clear) // hide the outer circle color
        lineChartDataSet.circleRadius = 0.0
        lineChartDataSet.lineWidth = 2.0 //1.0
        lineChartDataSet.valueTextColor = UIColor.clear //hide the values on the curve line


        lineChartDataSet.colors = [NSUIColor.blue] //Sets the line colour to blue
        lineChartDataSet.mode = .cubicBezier
        lineChartDataSet.cubicIntensity = 0.2

        var dataSets = [LineChartDataSet]() 
        dataSets.append(lineChartDataSet)  

        let lineChartData = LineChartData(dataSets: dataSets)
        cell.chartViewOutlet.data = lineChartData 

        cell.chartViewOutlet.chartDescription?.text = "" 

        cell.chartViewOutlet.xAxis.enabled = true 
        cell.chartViewOutlet.leftAxis.enabled = true 
        cell.chartViewOutlet.rightAxis.enabled = false 
        cell.chartViewOutlet.animate(xAxisDuration: 1.5) 
        cell.chartViewOutlet.drawGridBackgroundEnabled = true 




        cell.chartViewOutlet.xAxis.drawGridLinesEnabled = true 
        cell.chartViewOutlet.xAxis.drawAxisLineEnabled = true 

        cell.chartViewOutlet.xAxis.labelPosition = .bottom 
        cell.chartViewOutlet.xAxis.drawLabelsEnabled = true 


        cell.chartViewOutlet.leftAxis.drawGridLinesEnabled = true 

        cell.chartViewOutlet.legend.enabled = false //show.hide legend - below graph


        let customFormater = CustomFormatter1()
        customFormater.labels =  months
        cell.chartViewOutlet.xAxis.valueFormatter = customFormater

// showing values on x axis

final class CustomFormatter1: IAxisValueFormatter {

var labels: [String] = []

func stringForValue(_ value: Double, axis: AxisBase?) -> String {

    let count = self.labels.count

    guard let axis = axis, count > 0 else {
        return ""
    }

    let factor = axis.axisMaximum / Double(count)

    let index = Int((value / factor).rounded())

    if index >= 0 && index < count {
        return self.labels[index]
    }

    return ""
}

How we can solve this overlapping issue? or is there any way so that, this values will adjust automatically according to its screen or month length ?

Answer 1

Try to use following and try, it will work 100 %

cell.chartViewOutlet.xAxis.labelRotationAngle = -45