ios charts label for every bar

Question

I'm using ios charts to display a bar chart. That looks like this:

What I want to achive are the labels in the red box (for all bars, I just didn't want to repeat this so often... :P ). That means that every bar get its own "title" label so the user sees the name of the category for every value.

Another question would be: The more bars I add, the smaller the bars get. Can I somehow put the BarChartView into a scroll view, set the width of the bars to a static value and for example, there are 20 more values, the user just scrolls to the right to see more values?

Edit code:

  func entries(for chart:ChartType, content:ChartContent, max:Int = Int.max)->[ChartDataEntry]{
    let transactions = manager.transactions.value
    let grouped = content == .category ? transactions.categorise({$1.category}) : transactions.categorise({$1.payee})
    var entries:[ChartDataEntry] = []
    let formatter = NumberFormatter()
    formatter.locale = Locale.current
    formatter.numberStyle = .currency

    for i in 0..<grouped.count {
      let c = Array(grouped.keys)[i]
      let ts = grouped[c]!
      var sum = 0.0
      ts.forEach{k,t in
        if t.expense{
           sum +=  Double(t.value)
        }
      }
      if chart == .pie{
        let entry =  PieChartDataEntry(value: sum, label: "\(c)")
        if entries.count < max{
          entries.append(entry)
        }else{
          entries.sort(by: {$0.0.y > $0.1.y})
          break
        }

      }else if chart == .bar{
        let entry =  BarChartDataEntry(x: Double(i), y: sum, data: c as AnyObject?)
        if entries.count < max{
          entries.append(entry)
        }else{
          entries.sort(by: {$0.0.y > $0.1.y})
          break
        }
      }

    }


    return entries
  }

  func showBarChart(content: ChartContent){
    // Do any additional setup after loading the view.

    let data = BarChartData()
    let content = entries(for: .bar, content: content)
    let ds1 = BarChartDataSet(values: content, label: "")

    let xAxis=XAxis()
    let chartFormmater = ChartFormatter()
    chartFormmater.content = content as! [BarChartDataEntry]

    for i in 0..<content.count{

      chartFormmater.stringForValue(Double(i), axis: xAxis)
    }

    xAxis.valueFormatter=chartFormmater
    barChartView.xAxis.valueFormatter=xAxis.valueFormatter
    barChartView.xAxis.labelPosition = .bottom


    ds1.colors = ChartColorTemplates.material()

    data.addDataSet(ds1)

    self.barChartView.data = data

    self.barChartView.gridBackgroundColor = NSUIColor.white



    self.barChartView.animate(xAxisDuration: 0.0, yAxisDuration: 1.0)
  }
@objc(BarChartFormatter)
class ChartFormatter:NSObject,IAxisValueFormatter{

  var content:[BarChartDataEntry]!

  func stringForValue(_ value: Double, axis: AxisBase?) -> String {
    return content[Int(value)].data as! String
  }

}

New Screenshot:

@user2529173 http://stackoverflow.com/questions/41979926/how-to-achieve-trackball-on-charts-in-swift-3x — Harshit Goel, Feb 02 '17 at 09:26

score 10 · Accepted Answer · edited Mar 20 '17 at 11:39

you can implement this below code, to solve you both the problems.

Here in below function, I'm passing two parameters, i.e dataPoints : x-Axis Labels, and values : values for bars. It also solves your scrolling problem.

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

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

    let chartDataSet:BarChartDataSet!

    let chartDataSet = BarChartDataSet(values: dataEntries, label: "BarChart Data")
    let chartData = BarChartData(dataSet: chartDataSet)
    barChartView.data = chartData
    barChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: dataPoints)
    barChartView.xAxis.granularityEnabled = true
    barChartView.xAxis.drawGridLinesEnabled = false
    barChartView.xAxis.labelPosition = .bottom
    barChartView.xAxis.labelCount = 30
    barChartView.xAxis.granularity = 2
    barChartView.leftAxis.enabled = true
    //barChartView.leftAxis.labelPosition = .outsideChart
    //barChartView.leftAxis.decimals = 0
    let minn = Double(values.min()!) - 0.1
    barChartView.leftAxis.axisMinimum = Double(values.min()! - 0.1)
    //barChartView.leftAxis.granularityEnabled = true
    //barChartView.leftAxis.granularity = 1.0
    //barChartView.leftAxis.labelCount = 5
    barChartView.leftAxis.axisMaximum = Double(values.max()! + 0.05)
    barChartView.data?.setDrawValues(false)
    barChartView.pinchZoomEnabled = true
    barChartView.scaleYEnabled = true
    barChartView.scaleXEnabled = true
    barChartView.highlighter = nil
    barChartView.doubleTapToZoomEnabled = true
    barChartView.chartDescription?.text = ""
    barChartView.rightAxis.enabled = false


    barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .easeInOutQuart)
    chartDataSet.colors = [UIColor(red: 0/255, green: 76/255, blue: 153/255, alpha: 1)]

}

OR

How to set x-axis labels?

Since Swift 3.0.1, we can also do:

let labels = ["Value 1", "Value 2", "Value 3"]

barChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values:labels)
//Also, you probably we want to add:

barChartView.xAxis.granularity = 1

Hope it helps you.

Ashish can you help me with this https://github.com/danielgindi/Charts/issues/2131 — Harshit Goel, Feb 02 '17 at 05:28
Hello @Harshit, I didn't used combined Bar and Line chart, But I'ld recommend you to go through this link... https://www.codebeaulieu.com/96/How-to-create-a-Combined-Bar-and-Line-chart-using-ios-charts where they have explained about combined Bar and Line chart, with x-Axis labels. — , Feb 02 '17 at 06:09
Also go through this answer, where they have set x-axis labels for combined chart http://stackoverflow.com/q/36150886/5886755 — , Feb 02 '17 at 06:14
http://stackoverflow.com/questions/41979926/how-to-achieve-trackball-on-charts-in-swift-3x — Harshit Goel, Feb 02 '17 at 09:21

score 2 · Answer 2 · answered Jan 29 '17 at 09:54

2

you can implement IAxisValueFormatter in your own classes:

for this you need only to implement this method:

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

Examples:

DefaultAxisValueFormatter -> here you can use a block to add your custom calculation
IndexAxisValueFormatter
LargeValueFormatter

or you follow the RayWenderlich Tutorial "Using Realm and Charts with Swift 3 in iOS 10":

you have to set some delegates and more but this is the key code snippet for a custom formatter:

// MARK: axisFormatDelegate
extension ViewController: IAxisValueFormatter {

  func stringForValue(_ value: Double, axis: AxisBase?) -> String {
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = “HH:mm.ss”
    return dateFormatter.string(from: Date(timeIntervalSince1970: value))
  }
}

answered Jan 29 '17 at 09:54

muescha

1,544
2
12
22

1

This nearly works thanks. It just shows the label for every second bar (will update code and screenshot in a minute) – user2529173 Jan 29 '17 at 10:18
`content[Int(value)].data as! String` -> then your `content` don't have a value for your `value`? – muescha Jan 29 '17 at 10:46
1

debug what you get aleways in value? – muescha Jan 29 '17 at 10:48
@muescha http://stackoverflow.com/questions/41979926/how-to-achieve-trackball-on-charts-in-swift-3x – Harshit Goel Feb 02 '17 at 09:21

score 1 · Answer 3 · answered May 03 '17 at 15:26

To Complement the previous answers, if you DO WANT to display all values and you have more than 25 Values, remember to modify the Hardcoded Limit for the LabelCount within AxisBase.swift, Like this:

    open var labelCount: Int
    {
        get
        {
            return _labelCount
        }
        set
        {
            _labelCount = newValue
            // WHY?
            // This limits the Amount of Labels We can Display: (Removing) -> Comment OUT
//            
//            if _labelCount > 25
//            {
//                _labelCount = 25
//            }
//            if _labelCount < 2
//            {
//                _labelCount = 2
//            }
//            
            forceLabelsEnabled = false
        }
    }

I Hope this Helps :-)

score 0 · Answer 4 · answered Jan 29 '17 at 09:54

to answer both your first and second question. What I would recommend you to do would be to have a side scrolling collection view. Inside each collection view cell you can include the title the bar and the value. This would help you all as you repeat as many graphs as you want and like you request you want a scroll view.

ios charts label for every bar

4 Answers4