CombinedChartView line + bar

[vigyanhoon]

Hi,

I am trying to plot a graph in Swift2.0 with bar and line. However first and last bars on graph are cut in half. Also I don't get tap highlight for bars. Only bars on which line point is drawn within, accepts highlight. Can you please let me know whats wrong here?

My code
@IBOutlet weak var dayChart: CombinedChartView!

dayChart.delegate = self
    dayChart.descriptionText = ""
    dayChart.noDataText = "Data not available"
    dayChart.legend.enabled = false
    dayChart.animate(xAxisDuration: 1.0, yAxisDuration: 1.0, easingOption: .EaseInCubic)
    dayChart.drawBarShadowEnabled = false

    //        configure X Axis
    let xAxis = dayChart.xAxis
    xAxis.labelPosition = Charts.ChartXAxis.XAxisLabelPosition.Bottom
    xAxis.labelFont = UIHandler.getFont1()
    xAxis.drawGridLinesEnabled = false
    xAxis.labelTextColor = UIHandler.getBlackColor1()
    xAxis.setLabelsToSkip(0)

    //        configure left axis
    let leftAxis = dayChart.leftAxis
    leftAxis.labelFont = UIHandler.getFont1()
    leftAxis.setLabelCount(6, force: false)
    leftAxis.labelTextColor = UIHandler.getBlackColor1()

    //        configure left axis
    let rightAxis = dayChart.rightAxis
    rightAxis.labelFont = UIHandler.getFont1()
    rightAxis.setLabelCount(6, force: false)
    rightAxis.labelTextColor = UIHandler.getBlackColor1()
    rightAxis.drawGridLinesEnabled = false


    // set data
    let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

    var yVals = [BarChartDataEntry]()
    var yVals1 = [ChartDataEntry]()

    for var i = 0; i < months.count; i++
    {
        let val = (Double) (arc4random_uniform(200))
        yVals.append(BarChartDataEntry(value: val, xIndex: i))
        let val1 = (Double) (arc4random_uniform(2000))
        yVals1.append(ChartDataEntry(value: val1, xIndex: i))
    }

    let barDataSet = BarChartDataSet(yVals: yVals, label: "Visit")
    barDataSet.setColor(UIHandler.getBrandingOliveColor1())
    barDataSet.drawValuesEnabled = false
    barDataSet.axisDependency = ChartYAxis.AxisDependency.Left
barDataSet.barSpace = 0.35;
barDataSet.barShadowColor = UIColor.clearColor()
    let barChartData = BarChartData()
    barChartData.addDataSet(barDataSet)


    let lineDataSet = LineChartDataSet(yVals: yVals1, label: "Line data set")
    lineDataSet.drawValuesEnabled = false
    lineDataSet.lineWidth = 3
    lineDataSet.drawFilledEnabled = false
lineDataSet.fillColor = UIColor(red: 186/255, green: 194/255, blue: 195/255, alpha: 1)
lineDataSet.fillAlpha = 0.5
    lineDataSet.setColor(UIHandler.getGraphLineColor())
    lineDataSet.axisDependency = ChartYAxis.AxisDependency.Right
    let lineChartData = LineChartData()
    lineChartData.addDataSet(lineDataSet)

    let combinedChartData = CombinedChartData(xVals: months)

combinedChartData.lineData = lineChartData
    combinedChartData.barData = barChartData
    combinedChartData.setValueFont(UIHandler.getFont1())

    dayChart.data = combinedChartData;

[AlBirdie]

Could you make a screenshot maybe? I don't quite get what you mean with 'bars are cut in half'.
If you mean that the first, and last bar isn't shown with their full widths, that is the correct behaviour of a BarChart.
Bars are nothing but a rectangular representation of a spot. A line chart can point directly to that very spot, whereas a bar has to be drawn from the spot's x value minus barWidth/2 to the spot's x value plus barWidth/2. That way, the bar is centered horizontally around the x value.

[vigyanhoon]

Yes. First and last bars are half in width than others. It doesn't look good. The demo that is provided, has full bars, with line points at center of those bars. I would love a chart that is shown on readme.md (Combined-Chart (bar- and linechart in this case). What am I missing to get that view?

Because of this, point values are overlapping with yAxis values.

[vigyanhoon]

I am encountering another bug in which if I tap on a bar which has line circle drawn within it e.g March, it always shows value of line in chartValueSelected and not of bar. Whereas on bar where circle is outside e.g. Sep, it works well.

[vigyanhoon]

For all circles with bar, hit area seems to be too much!

[liuxuan30]

@vigyanhoon , the half bar issue should be fixed in #324. Could you check on your side? About the other bug, could you be more specific?

[vigyanhoon]

I think its not fixed for line + bar but for bubble + bar.

override func calcMinMax()
{
super.calcMinMax()

    if (self.barData !== nil || self.candleData !== nil || self.bubbleData !== nil)
    {
        _chartXMin = -0.5
        _chartXMax = Double(_data.xVals.count) - 0.5

        if (self.bubbleData !== nil)
        {
            for set in self.bubbleData.dataSets as! [BubbleChartDataSet]
            {
                let xmin = set.xMin
                let xmax = set.xMax

                if (xmin < chartXMin)
                {
                    _chartXMin = xmin
                }

                if (xmax > chartXMax)
                {
                    _chartXMax = xmax
                }
            }
        }
        else
        {
            _chartXMin = 0.0
            _chartXMax = Double(_data.xValCount - 1)
        }

        _deltaX = CGFloat(abs(_chartXMax - _chartXMin))
    }
}

[vigyanhoon]

There are two issues which are even reproducible in the chartDemo given in source:

1. first and last line values overlap with left and right axis values.
2. If line circle is plotted within a bar (e.g. see June in above graph), even if I tap on bar to select it, only line value will be selected if I have tapped below the line or a certain points away upwards from the line (this upward boundary is variable for different bars e.g. tapping on some bars 100 points upwards from line on bar selects only line point, whereas for some bars its only 10). Hope I am making myself clear and not confusing...

[liuxuan30]

@vigyanhoon , your pasted code is before fix, not after. check out #323. Should be the same problem? It's for line+bar without bubble.

[liuxuan30]

For the second issue, I am still confused, what you mean by only line value will be selected? I tried, it will highlight the bar and bubble, and draw a cross line on the line dot. Seems fine.

[vigyanhoon]

Now I am confused! I still see exact same lines as pasted by me at https://github.com/danielgindi/ios-charts/blob/swift-2.0/Charts/Classes/Charts/CombinedChartView.swift

[vigyanhoon]

I will explain the second issue again. See following chart plotted in demo project. If I tap Jun bar, above 50% of bar height, it selects bar only. But below that, it will only print line value in (void)chartValueSelected: delegate, that means its only selecting line after a certain point. Ideally it should select line only when I tap on any of the line circles, but no portion of bar should allow selection of line or any other graph type.

[liuxuan30]

For the half bar issue, you are on swift-2.0 branch, which does not merged from master for a while. That's why you see old code.

[liuxuan30]

For the second issue, are you saying when you tap the top part of the Jun bar, the bar, line, bubble are not getting highligted sometimes? On my side, when I tap the higher part of the bar, sometimes the highlight is not working, but when you tap the lower part, it almost highlight every time.

For what you want, it seems like a customization, you could do whatever you like when highlighting. The ChartsDemo just write simple effect. You need to override those methods to get your effect.

[vigyanhoon]

Its not a customization. (void)chartValueSelected: delegate should return the source of interaction correctly. For top bar its perfect as it returns bar, but for bottom part it always returns line. Thats incorrect. Even at bottom part of bar, it should return bar when tapped on bar, and line only when tapped on line circle. But it always return 0 as dataset index when tapping on bottom bar in (void)chartValueSelected.

Thats how its with all other chart libraries e.g. http://www.highcharts.com/demo/combo

[vigyanhoon]

I am using an empty instance to make bars proper for now.
combinedChartData.bubbleData = BubbleChartData()

Can you please let me know when the changes will be pushed to swift branch?

[liuxuan30]

You can ask @danielgindi. Giving the iOS 9 is releasing on 9.16, it should be soon?

[liuxuan30]

Closing, it should be resolved now, swift 2.0 has merged into master.

[ratka6]

I still have the cutting bars problem today

[nitinvsingh]

Any updates on the issue? I am still facing the issue. Please refer the code and output screenshot below.
Code:

private func setupChart() {

    combinedChartView.setScaleEnabled(false)
    combinedChartView.pinchZoomEnabled = false
    
    combinedChartView.chartDescription?.text = "Revenue againsts Visits"
    combinedChartView.xAxis.drawAxisLineEnabled = true
    combinedChartView.xAxis.labelPosition = .bottom
    combinedChartView.xAxis.granularityEnabled = true
    combinedChartView.xAxis.granularity = 1
    combinedChartView.xAxis.valueFormatter = DefaultAxisValueFormatter(block: { (axisValue, axis) -> String in
        let currentYear = String(Calendar.current.component(.year, from: Date()))
        let monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        let index = Int(axisValue)
        guard index >= monthNames.startIndex && index <= monthNames.endIndex else { return "" }
        return monthNames[index] + "\n" + currentYear
    })
}

private func setupChartData() {
    let barChartData = BarChartData(dataSet: BarChartDataSet(values:
        [
            BarChartDataEntry(x: 2, y: 5),
            BarChartDataEntry(x: 3, y: 9),
            BarChartDataEntry(x: 4, y: 8),
            BarChartDataEntry(x: 5, y: 11)
        ], label: "Visits")
    )
    
    
    let lineChartData = LineChartData(dataSet: LineChartDataSet(values:
        [
            ChartDataEntry(x: 2, y: 105),
            ChartDataEntry(x: 3, y: 78),
            ChartDataEntry(x: 4, y: 250),
            ChartDataEntry(x: 5, y: 17)
        ], label: "Revenue")
    )
    
    let combinedChartData = CombinedChartData()
    combinedChartData.barData = barChartData
    combinedChartData.lineData = lineChartData
    
    combinedChartView.data = combinedChartData
}

[everlof]

I can just concur with @ratka6 and @nitinvsingh. I just updated to v3.0.2 and I got the first-last half-bar problem.

[everlof]

@arorajatin's workaround works for me (from #323)

[Renub25]

Hi, in horizontal bar chart we could implement stacked bar chart(grouped), but in chart 3.0 version it is getting overlapped, can you please explain how to solve it? Im using Xcode 9 and chart 3.0. please check screenshots, and also i want to give X axis label which we have done in older chart version.
before

now

[LukasSanda]

I have the same issue but with BarChart. I'm using classic BarChart, not stacked.