How to switch from Grouped Bar chart to Simple Bar Charts

Question

Hello everyone i recently tried out the iOS-Charts library which is great.

I made a Grouped Bar chart, and its working fine. I also have a Bar chart which works also.

The Problem is if i switch from the Grouped barchart to the normal one, then my bars get thicker and get zoomed in.

But i cant zoom out or change the width of the bars.

This is the Normal bar how it should be

This is the Grouped bar chart

And if i switch back from the grouped to the normal i get this

Under switch i mean i update the chart by creating a new dataset

the code looks like this:

func updateBarchart(which segment: Int)
{

    //getSumofMonths()


    let pecsColor = UIColor(red:0.278, green:0.247, blue:0.247, alpha: 1.000)
    let petreColor = UIColor(red:0.941, green:0.400, blue:0.184, alpha: 1.000)

    if segment == 1
    {
        let dataSets = [createDataSet(from: pecsBevetel, label: "Pécs", color: pecsColor),createDataSet(from: petreBevetel, label: "Újpetre", color: petreColor)]
        groupedBarChart.setGroupedBarchartData(from: dataSets, xValues: monthStrings)
        groupedBarChart.xAxis.granularityEnabled = true
        groupedBarChart.xAxis.granularity = groupedBarChart.xAxis.axisMaximum / Double(monthStrings.count)

        groupedBarChart.xAxis.axisMaximum = Double(12)
        groupedBarChart.setVisibleXRangeMaximum(6)
        groupedBarChart.xAxis.centerAxisLabelsEnabled = true

    }
    else if segment == 0
    {
        groupedBarChart.setBarChartData(xValues: monthStrings, yValues: pecsBevetel, label: "Pécs", colors: [pecsColor])




    }
    else if segment == 2
    {
        groupedBarChart.setBarChartData(xValues: monthStrings, yValues: petreBevetel, label: "Újpetre", colors: [petreColor])




    }

    //groupedBarChart.xAxis.axisMinimum = Double(-0.5)
    groupedBarChart.xAxis.labelPosition = XAxis.LabelPosition.bottom
    groupedBarChart.chartDescription?.text = ""

    //groupedBarChart.fitBars = true

    groupedBarChart.doubleTapToZoomEnabled = false



    let legend = groupedBarChart.legend
    legend.enabled = true
    legend.horizontalAlignment = .center
    legend.verticalAlignment = .bottom
    legend.orientation = .horizontal
    legend.drawInside = false
    legend.yEntrySpace = 0.0;

    let  marker =  BalloonMarker(color: UIColor.white, font: UIFont.systemFont(ofSize: 12), textColor: UIColor.black, insets: UIEdgeInsetsMake(8.0, 8.0, 20.0, 8.0))
    marker.minimumSize = CGSize(width: 75.0, height: 35.0)
    groupedBarChart.marker = marker
    groupedBarChart.drawMarkers = true


}

The data is updated with this two extensions

func setBarChartData(xValues: [String], yValues: [Double], label: String?, colors: [UIColor]?) {

    var dataEntries: [BarChartDataEntry] = []

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

    let chartDataSet = BarChartDataSet(values: dataEntries, label: label)
    if let colours = colors
    {
        chartDataSet.colors = colours
    }
    let chartData = BarChartData(dataSet: chartDataSet)


    setxAxxis(with: xValues)

    chartData.barWidth = Double(0.85)


    self.animate(xAxisDuration: 1.0, yAxisDuration: 1.0, easingOption: .easeOutCirc)

    self.data = chartData
}

func setxAxxis(with items: [String])
{
    let chartFormatter = BarChartFormatter(labels: items)
    let xAxis = XAxis()
    xAxis.valueFormatter = chartFormatter
    self.xAxis.valueFormatter = xAxis.valueFormatter
}

func setGroupedBarchartData(from entries: [BarChartDataSet], xValues: [String])
{
    let groupedChartData = BarChartData(dataSets: entries)
    setxAxxis(with: xValues)


    let groupSpace = 0.1
    let barSpace = 0.05
    let barWidth = 0.4

    groupedChartData.barWidth = barWidth
    groupedChartData.groupBars(fromX: Double(0), groupSpace: groupSpace, barSpace: barSpace)

    self.animate(xAxisDuration: 1.0, yAxisDuration: 1.0, easingOption: .easeOutCirc)

    self.data = groupedChartData
}

Please help me because after hours of Google i just cannot get it to Work I was thinking about zooming it out, but it doesnt worked. Or how could I do a clean redraw so everything is set back to default so that the barwidth is normal again?

Thank you for time if u help me! :)

@DilipTiwari Sure, i try! Whats your problem? – Elliot Czigány Feb 27 '21 at 10:01 — Elliot Czigány, Feb 27 '21 at 10:01
i solved thanks for reply – Dilip Tiwari Feb 27 '21 at 14:48 — Dilip Tiwari, Feb 27 '21 at 14:48

score 2 · Accepted Answer · answered Jul 09 '18 at 07:25

I found the answer on the Documentation. It was quite hard to find. The only thing u have to do is call the fitScreen() method And its gets to the original state.

func updateBarchart(which segment: Int)
{

    //getSumofMonths()

    let pecsColor = UIColor(red:0.278, green:0.247, blue:0.247, alpha: 1.000)
    let petreColor = UIColor(red:0.941, green:0.400, blue:0.184, alpha: 1.000)

    if segment == 1
    {
        let dataSets = [createDataSet(from: pecsBevetel, label: "Pécs", color: pecsColor),createDataSet(from: petreBevetel, label: "Újpetre", color: petreColor)]

        groupedBarChart.setGroupedBarchartData(from: dataSets, xValues: monthStrings)
        groupedBarChart.xAxis.granularityEnabled = true
        groupedBarChart.xAxis.granularity = groupedBarChart.xAxis.axisMaximum / Double(monthStrings.count)

        groupedBarChart.xAxis.axisMaximum = Double(12)
        groupedBarChart.setVisibleXRangeMaximum(6)
        //groupedBarChart.setVisibleXRangeMinimum(0)
        groupedBarChart.xAxis.centerAxisLabelsEnabled = true

    }
    else if segment == 0
    {
        groupedBarChart.setBarChartData(xValues: monthStrings, yValues: pecsBevetel, label: "Pécs", colors: [pecsColor])
        //groupedBarChart.setVisibleXRangeMinimum(12)
        groupedBarChart.xAxis.centerAxisLabelsEnabled = false
        groupedBarChart.fitScreen() //<- This method solves the problem.




    }
    else if segment == 2
    {
        groupedBarChart.setBarChartData(xValues: monthStrings, yValues: petreBevetel, label: "Újpetre", colors: [petreColor])
        //groupedBarChart.setVisibleXRangeMinimum(12)
        groupedBarChart.xAxis.centerAxisLabelsEnabled = false
        groupedBarChart.fitScreen() //<- This method solves the problem.

    }

    //groupedBarChart.xAxis.axisMinimum = Double(0.5)
    groupedBarChart.xAxis.labelPosition = XAxis.LabelPosition.bottom
    groupedBarChart.chartDescription?.text = ""

    groupedBarChart.fitBars = true


    groupedBarChart.doubleTapToZoomEnabled = false


    let legend = groupedBarChart.legend
    legend.enabled = true
    legend.horizontalAlignment = .center
    legend.verticalAlignment = .bottom
    legend.orientation = .horizontal
    legend.drawInside = false
    legend.yEntrySpace = 0.0;

    let  marker =  BalloonMarker(color: UIColor.white, font: UIFont.systemFont(ofSize: 12), textColor: UIColor.black, insets: UIEdgeInsetsMake(8.0, 8.0, 20.0, 8.0))
    marker.minimumSize = CGSize(width: 75.0, height: 35.0)
    groupedBarChart.marker = marker
    groupedBarChart.drawMarkers = true
    groupedBarChart.moveViewToX(0)

}

So to be short call this method AFTER you set the data of the chart.

groupedBarChart.fitScreen() //<- This method solves the problem.

score 0 · Answer 2 · answered Jul 09 '18 at 06:29

I am facing same problem and after hours of research I ended up with below solution.

You need to reset and nil previous data setup like below every time while you are switching from Group => Normal or visa versa.

Reset Old Data Set :

if barChartView.xAxis.isAxisMinCustom {
    barChartView.xAxis.resetCustomAxisMin()
}

if barChartView.xAxis.isAxisMaxCustom {
    barChartView.xAxis.resetCustomAxisMax()
}

//Remove all old Data Set from chart.
if ((barChartView.data?.dataSetCount)! > 0)
{
   barChartView.data = nil
}

Notify Data Changed :

if you are updating data with new data use below methods after updating data set.

barChartView.data?.notifyDataChanged()
barChartView.notifyDataSetChanged()

By doing this you will get proper expected width of your bar.

Hope this will helps.

Hey, thank you for your answer, but unfortunatelly it didnt worked for me! But i have found a way simpler solution. just right after u have given the data call the function fitScreen() and it will resize it correctly. I will post the answer with code. — Elliot Czigány, Jul 09 '18 at 07:17

How to switch from Grouped Bar chart to Simple Bar Charts

2 Answers2