How can i remove the space between xAxis and the chart?

Question

In the following image there is a space between the xAxis of the chart and the bottom of the bars, the area in red.

I want to know how to remove such space so the labels get closer to the bars. Here is my code:

        let chart = BarChartView()
               
        chart.leftAxis.drawGridLinesEnabled = true
        chart.leftAxis.drawAxisLineEnabled = false
        chart.leftAxis.axisLineColor = .paleBlue
        
        chart.rightAxis.drawGridLinesEnabled = false
        chart.rightAxis.drawAxisLineEnabled = false
        chart.rightAxis.drawLabelsEnabled = false
        
        chart.xAxis.drawGridLinesEnabled = false
        chart.xAxis.labelPosition = .bottom
        chart.xAxis.centerAxisLabelsEnabled = true
        chart.xAxis.granularityEnabled = true
        chart.xAxis.enabled = true
        
        chart.legend.enabled = true
        chart.legend.horizontalAlignment = .center
        
        chart.doubleTapToZoomEnabled = false
        chart.pinchZoomEnabled = false
        
        chart.noDataText = ""

dengST30 · Answer 1 · 2021-02-24T07:58:03.093

1

patch the code

chart.xAxis.yOffset = 0

from the source code,

start with

@objc(ChartXAxis)
open class XAxis: AxisBase

then

/// Base class for all axes
@objc(ChartAxisBase)
open class AxisBase: ComponentBase

got it here, the lib author has explained in comments

/// This class encapsulates everything both Axis, Legend and LimitLines have in common
@objc(ChartComponentBase)
open class ComponentBase: NSObject
{
    /// flag that indicates if this component is enabled or not
    @objc open var enabled = true
    

    /// The offset this component has on the x-axis
    /// **default**: 5.0
    @objc open var xOffset = CGFloat(5.0)
    
    /// The offset this component has on the x-axis
    /// **default**: 5.0 (or 0.0 on ChartYAxis)
    @objc open var yOffset = CGFloat(5.0)
    
    public override init()
    {
        super.init()
    }

    @objc open var isEnabled: Bool { return enabled }
}

edited Feb 24 '21 at 07:58

answered Feb 24 '21 at 03:25

dengST30

3,643
24
25

1

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn and eventually apply that knowledge to their own code. You are also likely to have positive feedback/upvotes from users, when the code is explained. – Amit Verma Feb 24 '21 at 07:33
Unfortunately set yOffset to 0 didn't work. – Bruno Simas Hadlich Feb 24 '21 at 16:41
Sorry @dengST30, actually yOffset was the right attribute, I just had to set it to a negative value which I did not realize before. – Bruno Simas Hadlich Feb 24 '21 at 18:11

score 0 · Accepted Answer · answered Feb 24 '21 at 18:07

To solve my problem I found out that I had to remove the xAxis line, the line inside the red rectangle.

I did it by changing attribute xAxis.drawAxisLineEnabled to false. Then I got a whitespace area here painted in red.

To remove this space I changed attribute xAxis.yOffset to -10, this brought the xAxis labels closer to the chart.

I had to change xAxis.drawAxisLineEnabled to false because this line is not affected by xAxis.yOffset, if I did not set it to false the result would be this.

How can i remove the space between xAxis and the chart?

2 Answers2