How to display bar values on the top of bar?

Question

I'm using iOS charts library for add custom charts in my app, I have created a bar chart which is working as my requirement, For some reason I have inverted the graph so now the problem is the values based on which the bar chart is created are displayed on the chart, I want to display these values on the top of the bar. Here is the code that I'm using for creating a graph

@IBOutlet var barChartView: BarChartView!

let unitsSold = [20, 4, 6, 3, 12, 50, 25, 57, 60, 28, 17, 47]
let unitsBought = [10.0, 14.0, 60.0, 13.0, 2.0, 10.0, 15.0, 18.0, 25.0, 05.0, 10.0, 19.0]
let xaxisValue: [String] = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]

//MARK:- View Life Cycle -
override func viewDidLoad() {
    super.viewDidLoad()

    setupView()
}


//MARK:- General Methods -
func setupView() {

    //legend
    let legend = barChartView.legend
    legend.enabled = true
    legend.horizontalAlignment = .right
    legend.verticalAlignment = .bottom
    legend.orientation = .horizontal
    legend.drawInside = true
    legend.yOffset = 10.0;
    legend.xOffset = 10.0;
    legend.yEntrySpace = 0.0;
    legend.textColor = UIColor.white

    // Y - Axis Setup
    let yaxis = barChartView.leftAxis
    yaxis.spaceTop = 0.35
    yaxis.axisMinimum = 0
    yaxis.drawGridLinesEnabled = false
    yaxis.labelTextColor = UIColor.white
    yaxis.axisLineColor = UIColor.white
    yaxis.labelPosition = .insideChart
    yaxis.enabled = false
   // YAxis leftAxis = barChart.getAxisLeft();
    barChartView.rightAxis.enabled = false

    // X - Axis Setup
    let xaxis = barChartView.xAxis
    let formatter = CustomLabelsXAxisValueFormatter()//custom value formatter
    formatter.labels = self.xaxisValue
    xaxis.valueFormatter = formatter

    xaxis.drawGridLinesEnabled = false
    xaxis.labelPosition = .top
    xaxis.labelTextColor = UIColor.white
    xaxis.centerAxisLabelsEnabled = true
    xaxis.axisLineColor = UIColor.white
    xaxis.granularityEnabled = true
    xaxis.enabled = true

    barChartView.delegate = self
    barChartView.noDataText = "You need to provide data for the chart."
    barChartView.noDataTextColor = UIColor.white
    barChartView.chartDescription?.textColor = UIColor.clear

    setChart()
}

func setChart() {
    barChartView.noDataText = "Loading...!!"
    var dataEntries: [BarChartDataEntry] = []
    var dataEntries1: [BarChartDataEntry] = []

    for i in 0..<self.xaxisValue.count {

        let dataEntry = BarChartDataEntry(x: Double(i) , y: Double(self.unitsSold[i]))
        dataEntries.append(dataEntry)

        let dataEntry1 = BarChartDataEntry(x: Double(i) , y: Double(self.unitsBought[i]))
        dataEntries1.append(dataEntry1)

    }

    let chartDataSet = BarChartDataSet(values: dataEntries, label: "Sold")
    let chartDataSet1 = BarChartDataSet(values: dataEntries1, label: "Bought")

    let dataSets: [BarChartDataSet] = [chartDataSet,chartDataSet1]
    chartDataSet.colors = [UIColor(red: 0/255, green: 255/255, blue: 0/255, alpha: 0.5)]
    chartDataSet1.colors = [UIColor(red: 255/255, green: 0/255, blue: 0/255, alpha: 0.8)]


    let chartData = BarChartData(dataSets: dataSets)

    let groupSpace = 0.4
    let barSpace = 0.02
    let barWidth = 0.2

    chartData.barWidth = barWidth
    chartData.setDrawValues(true)
    barChartView.xAxis.axisMinimum = 0.0
    barChartView.xAxis.axisMaximum = 0.0 + chartData.groupWidth(groupSpace: groupSpace, barSpace: barSpace) * Double(self.xaxisValue.count)

    chartData.groupBars(fromX: 0.0, groupSpace: groupSpace, barSpace: barSpace)
    barChartView.xAxis.granularity = barChartView.xAxis.axisMaximum / Double(self.xaxisValue.count)
    barChartView.drawValueAboveBarEnabled = true
    barChartView.keepPositionOnRotation = true
    barChartView.clipValuesToContentEnabled = true
    barChartView.data = chartData
    barChartView.getAxis(.left).inverted = true

    barChartView.notifyDataSetChanged()
    barChartView.setVisibleXRangeMaximum(4)
    barChartView.animate(yAxisDuration: 1.0, easingOption: .linear)
    chartData.setValueTextColor(UIColor.yellow)
}

Here is the output of above code

And I want to display the label as below image (when the graph is in the inverted state)

Please let me know how can I achieve this.

https://github.com/i-schuetz/SwiftCharts check this link you can show the labels on top of the bars — Zeeshan Ahmed, Apr 15 '19 at 12:17
I'm already using https://github.com/danielgindi/Charts library for draw charts. I have checked this link but didn't found any specific code that related to above mentioned problem, Can you please let me know what will i do for this. — gurmeet kaur, Apr 15 '19 at 12:27
Yes i have checked, but as i mentioned that I'm using a different library, so didn't get any thing that relates to this. — gurmeet kaur, Apr 15 '19 at 12:35
Can you please provide me reference code, as i know we can use barChartView.drawValueAboveBarEnabled = true but I'm not able to set label on the top the bar using this code. — gurmeet kaur, Apr 15 '19 at 12:44

LorenzOliveto · Accepted Answer · 2019-04-15T13:17:37.773

1

I don't think that this is possible at the moment using Charts. The values are rendered in BarChartRender.swift in the drawValues(context: CGContext) function but always above the bar. They are not rendered below if the left axis is inverted. If you want this behavior you should implement it yourself changing this part of code of the function:

drawValue(
    context: context,
    value: formatter.stringForValue(
    val,
    entry: e,
    dataSetIndex: dataSetIndex,
    viewPortHandler: viewPortHandler),
    xPos: x,
    yPos: val >= 0.0
    ? (rect.origin.y + rect.size.height + posOffset)
    : (rect.origin.y + negOffset), // Those lines should do what you're trying to achieve
    font: valueFont,
    align: .center,
    color: dataSet.valueTextColorAt(j))

edited Apr 15 '19 at 13:17

answered Apr 15 '19 at 13:12

LorenzOliveto

7,796
1
20
47

Thanks for your help, I have tried this solution but its not working. – gurmeet kaur Apr 16 '19 at 05:14
What is not working? You see labels always in the same place? – LorenzOliveto Apr 16 '19 at 06:33
Yes, The labels are still on the same place after using this code in BarChartRenderer class. – gurmeet kaur Apr 16 '19 at 06:49
If you're using CocoaPods try to clean the project (cmd + shift + k) and rebuild it. – LorenzOliveto Apr 16 '19 at 07:21
Yes, I'm using pod's. I have just tried (cmd + shift + k) and rebuild, and It works. Thanks @LorenzOliveto for your help. – gurmeet kaur Apr 16 '19 at 07:37
Can you please let me know how can i convert the double value into int. As you can see in my graph image the label values are shown in double, I want to show these values in Int. I have searched about it and add a custom formatter also, but these solutions are not worked for me, I will be very thankful for you if you help me in this. – gurmeet kaur Apr 19 '19 at 07:36

score 1 · Answer 2 · answered Apr 24 '21 at 17:40

1

i think you have to set - like below

set = BarChartDataSet(entries: yData , label: "Dataset")

//make this enable
set.drawValuesEnabled = true

answered Apr 24 '21 at 17:40

Daksh Patel

1,266
10
9

score 1 · Answer 3 · answered Nov 21 '22 at 13:55

1

Easy today!

barChart.drawValueAboveBarEnabled = true

answered Nov 21 '22 at 13:55

Johan Sleman

56
3

How to display bar values on the top of bar?

3 Answers3