Search code examples
swiftios-charts

Change yValue label vertical spacing in combined chart (ios-charts)

I have a combined chart that uses a line and bar chart to show yValues. In some instances the line and bar chart values will overlap, is there a way to set the vertical spacing of the labels for the yValues so that they're not on top of each other (like Jan to Oct in the image)?

Combined Chart Image

I'm using the Charts framework (formerly ios-charts), here is the code to setup the CombineChartView:

        let xValues = getXAxisLabelsForYear(year)
        let runningTotalsByMonth = getRunningTotalByMonthForYear(year)!
        var yValsBar = [BarChartDataEntry]()
        var yValsLine = [ChartDataEntry]()

        for i in 0 ..< xValues.count {
            let yBarDataEntry = BarChartDataEntry(value: monthlyWinnings[i], xIndex: i)
            yValsBar.append(yBarDataEntry)
            let yLineDataEntry = ChartDataEntry(value: runningTotalsByMonth[i], xIndex: i)
            yValsLine.append(yLineDataEntry)
        }
        let barChartDataSet = BarChartDataSet(yVals: yValsBar, label: "Monthly Winnings")

        //setup bar chart
        var barChartColors = [UIColor]()
        for i in monthlyWinnings {
            if i >= 0.0 {
                barChartColors.append(myGreen)
            } else {
                barChartColors.append(UIColor.redColor())
            }
        }
        barChartDataSet.colors = barChartColors
        barChartDataSet.barShadowColor = UIColor.clearColor()
        barChartDataSet.valueFont = UIFont.systemFontOfSize(10.0)

        //setup line chart
        let lineChartDataSet = LineChartDataSet(yVals: yValsLine, label: "Cumulative Winnings")
        var lineChartColors = [UIColor]()
        for i in runningTotalsByMonth {
            if i >= 0.0 {
                lineChartColors.append(myGreen)
            } else {
                lineChartColors.append(UIColor.redColor())
            }
        }
        lineChartDataSet.colors = lineChartColors
        lineChartDataSet.circleColors = [UIColor.blueColor()]
        lineChartDataSet.drawCircleHoleEnabled = false
        lineChartDataSet.circleRadius = 5
        lineChartDataSet.lineWidth = 2
        lineChartDataSet.valueFont = UIFont.systemFontOfSize(10.0)

        //combine data
        let data = CombinedChartData(xVals: xValues)
        data.barData = BarChartData(xVals: xValues, dataSet: barChartDataSet)
        data.lineData = LineChartData(xVals: xValues, dataSet: lineChartDataSet)

        combinedChartView.data = data

        //format the chart
        combinedChartView.xAxis.setLabelsToSkip(0)
        combinedChartView.xAxis.labelPosition = .Bottom
        combinedChartView.descriptionText = ""
        combinedChartView.rightAxis.drawLabelsEnabled = false
        combinedChartView.rightAxis.drawGridLinesEnabled = false
        combinedChartView.drawGridBackgroundEnabled = false
        combinedChartView.leftAxis.drawZeroLineEnabled = true
        combinedChartView.xAxis.drawGridLinesEnabled = false
        combinedChartView.xAxis.wordWrapEnabled = true
Solution

  • You can draw bar chart values below the top of the bar using

    chartView.drawValueAboveBarEnabled = false

    and setting some color

    barChartDataSet.valueTextColor = UIColor.someColor()

    Will look like this: Image