How do I display labels on bottom axis (xVals) correctly on iOS Chart?

Question

I have been following very simple tutorial of iOS Charts.

The values in my chart are now showing correctly, however the label on the bottom is not showing.

    override func viewDidLoad() {

    results =  ["Won", "Drawn", "Lost"]
    let games = [totalWins, totalDraws, totalLosses]
    setChart(dataPoints: results, values: games)

    }

    // CHART FUNCTION ************

    func setChart(dataPoints: [String], values: [Double]){

    barChartView.noDataText = "you need to provide some data for the chart."

    var dataEntries: [BarChartDataEntry] = Array()

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


    let chartDataSet = BarChartDataSet(values: dataEntries, label: "Games Played")

    //let chartData = BarChartData(xVals: self.results, dataSet: dataEntries)
    let chartData = BarChartData()
    self.barChartView.xAxis.labelPosition = XAxis.LabelPosition.bottom
    barChartView.leftAxis.granularityEnabled = true
    barChartView.rightAxis.enabled = false
    barChartView.leftAxis.granularity = 1.0
    chartData.addDataSet(chartDataSet)
    barChartView.data = chartData

}

// END OF CHART FUNCTION ***********

As you can see it is displaying numbers, rather than "Won, Drawn, Lost"

I believe this is because I need to assign the labels in a command like this:

let chartData = BarChartData(xVals: self.results, dataSet: dataSet)
chartView.data = chartData

But I get errors and I don't know what needs to go in dataSet as I took that solution from another thread and can't seem to amend it to work.

Temp image:

Sri · Accepted Answer · 2017-01-05T12:02:26.637

You have interchanges x and y values.

let dataEntry = BarChartDataEntry(x: Double(i), y: values[i])

And to get the X-Axis at the bottom, you have to add the following.

self.barChartView.xAxis.labelPosition = XAxis.LabelPosition.bottom

Please find my working code for a sample dataset.

class BarChartViewController: UIViewController {
  @IBOutlet weak var barChartView: BarChartView!
      override func viewDidLoad() {
      super.viewDidLoad()
      let values = [11.00, 90.95, 250.00, 40.90, 60.88, 99.99, 25.00]
      setChart(values: values)
    }

    func setChart(values: [Double]) {
        var daysEntries: [BarChartDataEntry] = []

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

        let data = BarChartData()

        let ds1 = BarChartDataSet(values: daysEntries, label: "Days")
        ds1.colors = [NSUIColor.red]

        data.addDataSet(ds1)

        self.barChartView.data = data
        self.barChartView.gridBackgroundColor = NSUIColor.white
        self.barChartView.chartDescription?.text = "Barchart Days and Gross"
        self.barChartView.rightAxis.enabled = true
        self.barChartView.xAxis.labelPosition = XAxis.LabelPosition.bottom
        self.barChartView.xAxis.axisRange = 5.0
    }

    override func viewWillAppear(_ animated: Bool) {
        self.barChartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.0)
    }
}

Thanks Sriram

Thanks Sriram, that has corrected the data values in the chart - although my labels are still not showing. I have updated the question with what I have now. — RDowns, Jan 05 '17 at 10:25
Hi RDowns, I have updated my response with working code that covers the scenarios. — Sri, Jan 05 '17 at 12:02
Thank you, I get an error with your code: "Missing argument for parameter 'dataPoints' in call" for the line: setChart(values: values) — RDowns, Jan 05 '17 at 12:55
I got your code working by changing the line to setChart(dataPoints: results, values: values) - the variable results pointed to a temp variable- let results = ["One", "Two", "Three"] - but this still doesn't show me how to label the bottom axis with text.... I will update my question with a screenshot of your output to see if i have done it correctly as you would expect. In your example I would want Mon, Tues, Wed, Thurs... across the bottom not 1,2,3,4,5,6... — RDowns, Jan 05 '17 at 13:12

score 4 · Answer 2 · answered Apr 16 '17 at 05:41

4

I had the same issue and I fixed it with these three lines :

self.xAxis.granularity = 1
self.xAxis.granularityEnabled = true
self.xAxis.labelCount = // number of points on X axis

answered Apr 16 '17 at 05:41

Maryam Fekri

605
8
19

score 0 · Answer 3 · answered Jan 02 '20 at 04:54

    // xAxis.labelFont = UIFont.systemFont(ofSize: 13.0)
      // xAxis.labelTextColor = .lightGray
       xAxis.labelPosition = .bottom
      xAxis.setLabelCount(dataPoints.count, force: false)
    if xAxis.labelPosition == .bottom {
     xAxis.valueFormatter = IndexAxisValueFormatter(values: dataPoints)
    }
    xAxis.granularity = 1.0

score 0 · Answer 4 · answered Jul 29 '20 at 16:33

0

I hope this would help you with controlling the xAxis label positions.

First method

chartView.setExtraOffsets(left: 20, top: 0, right: 0, bottom: 0)

Second method

chartView.xAxis.avoidFirstLastClippingEnabled = true

answered Jul 29 '20 at 16:33

Li Jin

1,879
2
16
23

How do I display labels on bottom axis (xVals) correctly on iOS Chart?

4 Answers4