IOS Charts Labels not centered to data points. Charts Library

Question

I am currently using IOS Charts to for a line chart.

This is the link to it: Link

It is horribly documented and I am having trouble centering my X-Axis labels to the plots on my chart.

I have already enabled granularity and set it to 1. - This ensures the labels do not get repeated

Here is what my chart looks like now:

Here is what I want it to look like:

I know the spacing of the points is different, but my main focus is how to get the labels centered to the correct data points.

My Code:

`import UIKit import Charts

class ReviewDetailVC: UIViewController, ChartViewDelegate {

@IBOutlet weak var chartView: LineChartView!

var yValues =  [Double]()
var months = [String]()
var xValues = [String]()
let red = UIColor(hue: 0.9639, saturation: 0.62, brightness: 0.93, alpha: 1.0)
let black = UIColor(red:0.29, green:0.29, blue:0.29, alpha:1.0)
let grey = UIColor(red:0.81, green:0.81, blue:0.81, alpha:1.0)

let avenirDemi =  UIFont(name: "AvenirNext-DemiBold", size: 14)
override func viewDidLoad() {
    super.viewDidLoad()

    chartView.delegate = self
    // Chart Ui Settings
    chartView.xAxis.axisMinimum = 1
    chartView.leftAxis.axisMaximum = 5
    chartView.leftAxis.axisMinimum = 0.0
    chartView.chartDescription?.text = ""
    chartView.xAxis.labelPosition = .bottom
    chartView.legend.enabled = false
    chartView.scaleYEnabled = false
    chartView.scaleXEnabled = true
    chartView.doubleTapToZoomEnabled = false
    chartView.highlighter = nil
    chartView.rightAxis.enabled = false
    chartView.xAxis.drawGridLinesEnabled = false
    chartView.dragEnabled = true
    chartView.scaleXEnabled = false
    chartView.scaleYEnabled = false
    chartView.zoom(scaleX: 4, scaleY: 1, x: 0, y: CGFloat(AxisDependency.left.rawValue))
    chartView.xAxis.labelFont = avenirDemi!
    chartView.xAxis.labelTextColor = grey
    chartView.leftAxis.labelFont = avenirDemi!
    chartView.leftAxis.labelTextColor = black
    chartView.xAxis.axisLineWidth = 0
    chartView.leftAxis.axisLineWidth = 0
    //chartView.xAxis.avoidFirstLastClippingEnabled = true
    chartView.xAxis.granularityEnabled = true
    chartView.xAxis.granularity = 1
    chartView.leftAxis.gridColor = grey
    chartView.leftAxis.gridLineDashLengths = [4]
    chartView.leftAxis.gridLineWidth = 1.5
    chartView.xAxis.centerAxisLabelsEnabled = true
    chartView.noDataText = "This person has not reviewed your business."

    //**MARK:: DATA SHIT

    let sales = DataGenerator.data()

    xValues = ["MAR 10"," MAR 15", "APR 7", "APR 8", "APR 15", "APR 30", "MAY 14", "MAY 21","MAY 31", "MAY 31"]
    yValues = [4,2,4,5,3,4,2,4,5]

    var salesEntries = [ChartDataEntry]()

    var salesMonths = [String]()

    var i = 0

    for sale in sales {
        // Create single chart data entry and append it to the array
        let saleEntry = ChartDataEntry(x: Double(i), y: sale.value)
        salesEntries.append(saleEntry)

        // Append the month to the array
        salesMonths.append(sale.date)

        i += 1
    }

    // Create bar chart data set containing salesEntries
    let chartDataSet = LineChartDataSet(values: salesEntries, label: "Profit")

    // Create bar chart data with data set and array with values for x axis

    let chartData = LineChartData(dataSets: [chartDataSet])

    //setChart(dataPoints: xValues, values: yValues)

    //let formatter = CustomLabelsAxisValueFormatter(miniTime: 0.0)
    //formatter.labels = xValues
    chartView.xAxis.valueFormatter = CustomLabelsAxisValueFormatter(miniTime: 0.0)

    //**MARK:: END DATA SHIT


    chartDataSet.colors = [red]
    chartDataSet.drawCirclesEnabled = true
    chartDataSet.circleRadius = 16
    chartDataSet.circleColors = [red]
    chartDataSet.circleHoleRadius = 12
    chartDataSet.circleHoleColor = UIColor.white
    chartDataSet.lineWidth = 4
    chartDataSet.drawValuesEnabled = false


    chartView.animate(yAxisDuration: 1)

    chartView.setVisibleXRangeMaximum(4)



    // Set bar chart data 
        chartView.data = chartData
   setChart(dataPoints: xValues, values: yValues)

}





func setChart(dataPoints: [String], values: [Double]) {
    chartView.noDataText = "You need to provide data for the chart."

    var dataEntries: [ChartDataEntry] = []

    for i in 0..<dataPoints.count {
        let dataEntry = ChartDataEntry(x: Double(i), y: values[i])
        dataEntries.append(dataEntry)
    }

    let chartDataSet = LineChartDataSet(values: dataEntries, label: "")
    let chartData = LineChartData(dataSets: [chartDataSet])


    chartDataSet.colors = [red]
    chartDataSet.drawCirclesEnabled = true
    chartDataSet.circleRadius = 16
    chartDataSet.circleColors = [red]
    chartDataSet.circleHoleRadius = 12
    chartDataSet.circleHoleColor = UIColor.white
    chartDataSet.lineWidth = 4


    chartView.data = chartData

}




        }`

Answer 1

You can change your setChart method to this:

 func setChart(dataPoints: [String], values: [Double]) {
    chartView.noDataText = "You need to provide data for the chart."

    var dataEntries: [ChartDataEntry] = []

    for i in 0..<dataPoints.count {
        let dataEntry = ChartDataEntry(x: Double(i)+0.5, y: values[i])
        dataEntries.append(dataEntry)
    }

    let chartDataSet = LineChartDataSet(values: dataEntries, label: "")
    let chartData = LineChartData(dataSets: [chartDataSet])


    chartDataSet.colors = [red]
    chartDataSet.drawCirclesEnabled = true
    chartDataSet.circleRadius = 16
    chartDataSet.circleColors = [red]
    chartDataSet.circleHoleRadius = 12
    chartDataSet.circleHoleColor = UIColor.white
    chartDataSet.lineWidth = 4


    chartView.data = chartData

}

Result:

update:

chartView.xAxis.axisMinimum = 0.0 //I changed this from 1 to 0
let xvalues = ["MAR 10"," MAR 15", "APR 7", "APR 8", "APR 15", "APR 30", "MAY 14", "MAY 21","MAY 31", "MAY 31"]

chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: xvalues)


class MyIndexFormatter: IndexAxisValueFormatter {

open override func stringForValue(_ value: Double, axis: AxisBase?) -> String
{
        return "\(value)"
}

}