CODEWITHSUNDEEP
swiftios-charts
kclair
kclair

Reputation: 51

Horizontal Bar Chart Labels

I recently upgraded one of my client projects from Swift2 and iOS-charts 2 to Swift3 and iOS-charts 3.

Most of the code is functioning as expected after a few days of manual tweaking, however, I am still having an issue with my horizontal bar chart.

The chart used to display as:

enter image description here

The chart now displays as:

enter image description here

Core code for the chart:

func drawMarginChart() {
    let labels = marginObject!.getLabelsForChart()
    let values = marginObject!.getValuesForChart()

    var dataEntries = [ChartDataEntry]()

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

    let barChartDataSet = BarChartDataSet(values: dataEntries, label: "")
    barChartDataSet.drawValuesEnabled = false
    barChartDataSet.colors = ChartColorTemplates.joyful()

    let barChartData = BarChartData(dataSet: barChartDataSet)
    barChartMargins.data = barChartData
    barChartMargins.legend.enabled = false

    barChartMargins.xAxis.valueFormatter = IndexAxisValueFormatter(values: labels)
    barChartMargins.xAxis.granularityEnabled = true
    barChartMargins.xAxis.granularity = 1

    barChartMargins.animate(xAxisDuration: 3.0, yAxisDuration: 3.0, easingOption: .easeInOutBounce)
}

What I am hoping to find out is:

1) How can I get the label to appear for each bar on the chart

2) How can I get the chart to resize automatically to display the labels

If these other issues could be addressed, that would be fantastic, but we are willing to ship it without these:

1) How can I remove the gridline overlap on the left side of the chart?

2) How can I keep the bottom of the chart from truncating?

I have tried adjusting many of the chart properties per posts I have found here and on other sites, however, nothing fixes the issues. Any help it making the chart appear like the old version would be greatly appreciated by myself and my client.

Upvotes: 5

Views: 3874

Answers (1)

DevB2F
DevB2F

Reputation: 5085

I tested a bit and figured out that when there are 8 values and labels everything works fine. When there are 9 or more values and labels, only half of the labels is shown. You can set the number of visible values for the screen with this: 

 barChartMargins.setVisibleXRange(minXRange: 8.0, maxXRange: 8.0)

It means the chart will be scrollable if you have more values than the maxXRange.

and by zooming with this code you will see all the labels:

 barChartMargins.zoom(scaleX: 1.1, scaleY: 1.0, x: 0, y: 0)

By pinch zooming to right and left you will see all the labels appear in certain circumstances, but not all (and not in your case with 10 labels). But it works if you first set the maxXRange to 8 and allow the scrolling like I do in the example. enter image description here Here is the full code I used (tested with iPhone 5 and 6Plus), the last line solves the truncating problem:

 func drawMarginChart() {

    let values = [1000, 2000, 3000, 5000, 7000, 8000, 15000, 21000, 22000, 35000]
    let labels = ["Blue Yonder Airlines", "Aaron Fitz Electrical", "Central Communications", "Magnificent Office Images", "Breakthrough Telemarke", "Lawrence Telemarketing", "Vancouver Resort Hotels", "Mahler State University", "Astor Suites", "Plaza One"]



    var dataEntries = [ChartDataEntry]()

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

        dataEntries.append(entry)
    }

    let barChartDataSet = BarChartDataSet(values: dataEntries, label: "")
    barChartDataSet.drawValuesEnabled = false
    barChartDataSet.colors = ChartColorTemplates.joyful()

    let barChartData = BarChartData(dataSet: barChartDataSet)
    barChartMargins.data = barChartData
    barChartMargins.legend.enabled = false

    barChartMargins.xAxis.valueFormatter = IndexAxisValueFormatter(values: labels)
    barChartMargins.xAxis.granularityEnabled = true
    barChartMargins.xAxis.granularity = 1

    barChartMargins.animate(xAxisDuration: 3.0, yAxisDuration: 3.0, easingOption: .easeInOutBounce)

    barChartMargins.chartDescription?.text = ""


    barChartMargins.zoom(scaleX: 1.1, scaleY: 1.0, x: 0, y: 0)

    let rightAxis = barChartMargins.rightAxis
    rightAxis.drawGridLinesEnabled = false

    let leftAxis = barChartMargins.leftAxis
    leftAxis.drawGridLinesEnabled = false

    let xAxis = barChartMargins.xAxis
    xAxis.drawGridLinesEnabled = false
    barChartMargins.setVisibleXRange(minXRange: 8.0, maxXRange: 8.0)

    barChartMargins.setExtraOffsets (left: 0, top: 20.0, right:0.0, bottom: 20.0)



}

Btw. I did not encounter the problem of labels being outside the screen, but that might have to do with the size and constraints of your chartview or more zooming might be needed using the barChartMargins.zoom

Upvotes: 4

Related Questions