Charts: XAxis label issue with multiple/grouped bar chart

Created on 26 May 2017  路  9Comments  路  Source: danielgindi/Charts

I want to create multiple/grouped bar chart dynamically. In my case data comes from server, so number of bars are not fixed. To calculate group space, i have created this function

func calcGroupSpace(n:Int)->Double{ let y = 0.03 * Double(n) let x : Double = 1 / (y+1) return x }

My xValues are, which is also from server, here i have make array for better understanding.

let xVal = ["Apples", "Oranges", "Pears", "Grapes", "Bananas"]

I have created value formatter class.

`class BarChartFormatter: NSObject, IAxisValueFormatter {

var labels: [String] = []

func stringForValue(_ value: Double, axis: AxisBase?) -> String {
    let index = Int(value) % labels.count
    if index>=0 && index<labels.count{
        return labels[index]
    }
    return ""
}

init(labels: [String]) {
    super.init()
    self.labels = labels
}

}
`

And inside my chart, here is code for x-axis and group space
` let chartFormatter = BarChartFormatter(labels: xAxis)

    let xaxis = barChart.xAxis
    //xaxis.valueFormatter = axisFormatDelegate
    xaxis.drawGridLinesEnabled = true
    xaxis.labelPosition = .bottom
    xaxis.centerAxisLabelsEnabled = true
    xaxis.valueFormatter = chartFormatter
    xaxis.granularityEnabled = true
    xaxis.granularity = 1
    xaxis.labelCount = xAxis.count

    let groupSpace = chartCommanStyle.calcGroupSpace(n: keys.count)
    let barSpace = 0.03
    let barWidth = groupSpace


    let groupCount = xAxis.count+1
    let startYear = 0


    data.barWidth = barWidth;
    barChart.xAxis.axisMinimum = Double(startYear)
    let gg = data.groupWidth(groupSpace: groupSpace, barSpace: barSpace)

    barChart.xAxis.axisMaximum = Double(startYear) + gg * Double(groupCount)

    data.groupBars(fromX: Double(startYear), groupSpace: groupSpace, barSpace: barSpace)

    barChart.data = data

    barChart.setVisibleXRangeMaximum(15)
    barChart.animate(yAxisDuration: 1.0, easingOption: .easeInOutBounce)`

The problem is, my x-axis labels are displayed in wrong order. It should be as given, but it prints something like this

screen shot 2017-05-26 at 5 53 42 pm

Please help me to solve this.

Most helpful comment

@atalayasa & @mazenhalawi : Hello, I have solved this issue, please check this link: https://github.com/sagarsukode/Charts

All 9 comments

I have solved this by changing group space count function. Earlier i was counting it as

(groupSpace * barSpace) * n + groupSpace = 1

But this was wrong, i have change it to

(bar width * barSpace) * n + groupSpace = 1

so my new function for n number of columns is

func calcGroupSpace(n:Int)->Double{ let groupSpace = 1 - (0.23 * Double(n)) return groupSpace }

Hope this may help others..

My question is related to above one only.
(Above answer is not helpful for me thats why I am posting my own issue.)
My code is:

let months = ["Jan", "Feb", "Mar", "Apr", "May"]
let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0]
let unitsBought = [10.0, 14.0, 60.0, 13.0, 2.0]

//legend
        let legend = barChartView.legend
        legend.enabled = true
        legend.horizontalAlignment = .right
        legend.verticalAlignment = .top
        legend.orientation = .vertical
        legend.drawInside = true
        legend.yOffset = 10.0;
        legend.xOffset = 10.0;
        legend.yEntrySpace = 0.0;


        let yaxis = barChartView.leftAxis
        yaxis.spaceTop = 0.35
        yaxis.axisMinimum = 0
        yaxis.drawGridLinesEnabled = false

        barChartView.rightAxis.enabled = true


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

        let xaxis = barChartView.xAxis
        //xaxis.valueFormatter = axisFormatDelegate
        xaxis.forceLabelsEnabled = true
        xaxis.drawGridLinesEnabled = false
        xaxis.labelPosition = .bottom
        xaxis.centerAxisLabelsEnabled = true
        xaxis.valueFormatter = IndexAxisValueFormatter(values:self.months)
        xaxis.granularityEnabled = true
        xaxis.granularity = 1


var dataEntries: [BarChartDataEntry] = []
        var dataEntries1: [BarChartDataEntry] = []

        for i in 0..<self.months.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: "unitsSold")
        let chartDataSet1 = BarChartDataSet(values: dataEntries1, label: "unitsBought")

        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)]

        //chartDataSet.colors = ChartColorTemplates.colorful()
        //let chartData = BarChartData(dataSet: chartDataSet)

        let chartData = BarChartData(dataSets: dataSets)

        let groupSpace = 0.5
        let barSpace = 0.03
        let barWidth = groupSpace


        let groupCount = self.months.count
        let startYear = 0


        chartData.barWidth = barWidth;
        barChartView.xAxis.axisMinimum = Double(startYear)
        let gg = chartData.groupWidth(groupSpace: groupSpace, barSpace: barSpace)

        barChartView.xAxis.axisMaximum = Double(startYear) + gg * Double(groupCount)

        chartData.groupBars(fromX: Double(startYear), groupSpace: groupSpace, barSpace: barSpace)

        barChartView.data = chartData

        barChartView.setVisibleXRangeMaximum(15)
        barChartView.animate(yAxisDuration: 1.0, easingOption: .easeInOutBounce)

Check this ScreenShot:

screen shot 2018-03-17 at 3 10 09 pm

Issues: Why all xaxis labels are not showing? And if showing, it is not in proper manner? I am using Swift 4 & Xcode 9.2

UPDATE(08th of May - 2018): I have solved this issue, please check this link: https://github.com/sagarsukode/Charts

simulator screen shot - iphone x - 2018-05-08 at 16 32 30

@sagarsukode did you find any solution for the problem ?

I had the same issue like the above, i fixed it by duplicating the months in an array so i guess in your case you will have something like:
let xAxisLabels = ["Feb", "Feb", "Mar", "Mar", "Apr", "Apr"...]

in the IndexAxisValueFormatter(values: your_array_here) use the xAxisLabels array;
however, for the labelCount property you need to mention the number of groups so from the above picture i would put 5. dont use the xAxisLabels count.

hope that helps!

@atalayasa & @mazenhalawi : Hello, I have solved this issue, please check this link: https://github.com/sagarsukode/Charts

@sagarsukode Thank you verify much sagarsukode. This really helps me to fix xaxis label issue.

Thank you so much.

@sagarsukode THANK YOU!

Thanks!!!!

Was this page helpful?
0 / 5 - 0 ratings