Can't customise X-axis grid line labels in time value line chart.

[pramittewari]

I am trying to create a Time Value Line Chart and I want to show time labels on the x-axis like so :

But the problem here is that the time is displayed in the half-hour format (8:30, 9:30 and so on.)
I want the time to be displayed in whole hour format (8:00, 9:00 and so on.)

I've tried changing the xAxis.axisMinimum and xAxis.axisMaximum amongst other things.
I can't seem to find a way to achieve the same.

Following is the code I have used :

import UIKit
import Charts

class ViewController: UIViewController {

 @IBOutlet weak var lineChartView: LineChartView!

  let oneHourInSeconds: TimeInterval = 3600.0
 
 override func viewDidLoad() {
     
     super.viewDidLoad()
     setupChartViewPreFilling()
     setupChartData()
 }
 
 func setupChartViewPreFilling() {
     //Chart UI
     lineChartView.drawGridBackgroundEnabled = false
     lineChartView.chartDescription = nil
     lineChartView.legend.enabled = false
     
     lineChartView.backgroundColor = UIColor(red: 38/255, green: 55/255, blue: 70/255, alpha: 1.0)
     lineChartView.noDataTextColor = .white
     lineChartView.noDataText = "No data!"
     

     //y-axis UI
     lineChartView.rightAxis.enabled = false
     
     lineChartView.leftAxis.drawGridLinesEnabled = true
     lineChartView.leftAxis.drawAxisLineEnabled = true
     lineChartView.leftAxis.labelTextColor = UIColor.white
     
     //y-axis limits
     lineChartView.leftAxis.axisMinimum = 60 //min rounded temp
     lineChartView.leftAxis.axisMaximum = 100 //max rounded temp
     
     //x-axis UI
     lineChartView.xAxis.labelPosition = XAxis.LabelPosition.bottom
     lineChartView.xAxis.drawGridLinesEnabled = true
     lineChartView.xAxis.drawAxisLineEnabled = true
     lineChartView.xAxis.labelTextColor = UIColor.white
     
     //x-axis limits and interval
     lineChartView.xAxis.valueFormatter = DateValueFormatter()
     lineChartView.xAxis.granularity = oneHourInSeconds
     
     let currentDate = Date()
     let min = roundedToHourDateForLimits(date: currentDate).timeIntervalSinceReferenceDate
     lineChartView.xAxis.avoidFirstLastClippingEnabled = false
     lineChartView.xAxis.axisMinimum = min //min limit

     let max = roundedToHourDateForLimits(date: currentDate).addingTimeInterval(oneHourInSeconds * 8).timeIntervalSinceReferenceDate
     lineChartView.xAxis.axisMaximum = max //max limit
     
 }
 
 func roundedToHourDateForLimits(date: Date) -> Date {
     let currentDateComp = Calendar.current.dateComponents([.year, .month, .day, .hour, .minute], from: date)
     
     let components = DateComponents(year: currentDateComp.year, month: currentDateComp.month, day: currentDateComp.day, hour: currentDateComp.hour, minute: 0)
     return Calendar.current.date(from: components)!
 }
 
 
 func setupChartData() {
     
     let actualDate = Date()
     // Data Points
     let chartData1 = ChartDataEntry(x: actualDate.timeIntervalSinceReferenceDate, y: 72)
     let chartData2 = ChartDataEntry(x: actualDate.addingTimeInterval(oneHourInSeconds).timeIntervalSinceReferenceDate, y: 69)
     let chartData3 = ChartDataEntry(x: actualDate.addingTimeInterval(oneHourInSeconds*2).timeIntervalSinceReferenceDate, y: 70)
     let chartData4 = ChartDataEntry(x: actualDate.addingTimeInterval(oneHourInSeconds*3).timeIntervalSinceReferenceDate, y: 65)
     let chartData5 = ChartDataEntry(x: actualDate.addingTimeInterval(oneHourInSeconds*4).timeIntervalSinceReferenceDate, y: 65)
     let chartData6 = ChartDataEntry(x: actualDate.addingTimeInterval(oneHourInSeconds*5).timeIntervalSinceReferenceDate, y: 95)
     let chartData7 = ChartDataEntry(x: actualDate.addingTimeInterval(oneHourInSeconds*6).timeIntervalSinceReferenceDate, y: 65)
     let chartData8 = ChartDataEntry(x: actualDate.addingTimeInterval(oneHourInSeconds*7).timeIntervalSinceReferenceDate, y: 72)
     
     // Creating data set (line to be displayed) from data points
     let chartDataSet = LineChartDataSet(values: [chartData1, chartData2, chartData3, chartData4, chartData5, chartData6, chartData7, chartData8], label: "")

     // Modified properties of data set
     chartDataSet.drawIconsEnabled = false
     chartDataSet.setColor(UIColor(red: 113/255, green: 202/255, blue: 153/255, alpha: 1.0))
     chartDataSet.lineWidth = 4
     chartDataSet.drawCirclesEnabled = false
     chartDataSet.mode = .stepped
     chartDataSet.highlightEnabled = false
     chartDataSet.drawValuesEnabled = false
     
     let chartData = LineChartData(dataSet: chartDataSet)
     lineChartView.data = chartData
     
     lineChartView.setVisibleXRangeMaximum(3600*4)
 }
}

And the DateValueFormatter class is as was in the ChartsExampleProject:

import Foundation
import Charts

public class DateValueFormatter: NSObject, IAxisValueFormatter {
    private let dateFormatter = DateFormatter()
    
    override init() {
        super.init()
        dateFormatter.dateFormat = "dd/MM hh:mm"
    }
    
    public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return dateFormatter.string(from: Date(timeIntervalSinceReferenceDate: value))
    }
}

It would be really helpful if anyone could let me know what configuration am I missing to set the grid labels in whole hours.
Thanks in advance!

**Xcode version:9.3
**Swift version:4.1
**macOS version running Xcode:10.13.4

[liuxuan30]

search old issues and ask on stack overflow. We don't prefer answering general how-to questions here anymore. On SO there are more people to help and you can give the credits.

For this time, check out valueFormatter.

[pramittewari]

@liuxuan30
I did post the same question on SO too but I had no response there.

Also, I have used valueFormatter to show dates on the axis, logic shown above in the DateValueFormatter class, but despite that I can't get the graph to show whole hour values.

Thanks for the input though!