Charts: Padding/spacing when rotating X-axis labels 90 degrees

[grafi]

Sorry if there is some obvious setting I am missing, but I haven't found any solution so far.

I'm having some trouble with the spacing of the x-axis labels when rotating them -90 degrees.

http://imgur.com/LMs3WSQ

http://imgur.com/6PXzPDm

Longer the text is, wider the bottom spacing/padding gets.

XAxis setup:

let xAxis: XAxis = self.chartView.xAxis
xAxis.labelPosition = .bottom
xAxis.valueFormatter = axisFormatDelegate
xAxis.labelRotationAngle = -90.0

IAxisValueFormatter delegate:

func stringForValue(_ value: Double, axis: AxisBase?) -> String {
  return "Very, very, very long XAxis label" //"Long XAxis label"
}

Edit:
I see that I can change the viewport offsets using setViewPortOffsets(), but is there a better solution?

[liuxuan30]

I remember this is an old bug, not fixed yet.

[elchris78]

Hey guys,

I have the same exact problem. I got rid of some padding space by reducing the size of the field in the SQL database (from varchar(50) to varchar(15)). But the problem is still there, any solution yet guys?

[thierryH91200]

@grafi @elchris78

I found the cause of the problem, there is a research to be done on this side
Displaying the legend is the source of the problem
The solution for now but it is not terrible is to put the legend to false
or

 legend.drawInside = true
 legend.verticalAlignment = .top

and
xAxis.labelPosition = .bottom
legend / label In reverse position

Maybe in BarLineChartViewBase / internal override func calculateOffsets ()

_// offsets for x-labels
                if xAxis.labelPosition == .bottom
                {
                    **offsetBottom += xlabelheight**
                }
                else if xAxis.labelPosition == .top
                {
                    offsetTop += xlabelheight
                }
                else if xAxis.labelPosition == .bothSided
                {
                    offsetBottom += xlabelheight
                    offsetTop += xlabelheight
                }_

and
internal func calculateLegendOffsets

case .bottom: offsetBottom += min(_legend.neededHeight, _viewPortHandler.chartHeight * _legend.maxSizePercent) + _legend.yOffset if xAxis.isEnabled && xAxis.isDrawLabelsEnabled { **offsetBottom += xAxis.labelRotatedHeight** }

This is 2 times
There is an investigation to be done on this side
The problem is more visible when you rotate the label but there is always 2x the height of the label whatever the angle

    `chartView.legend.enabled = true`

chartView.legend.enabled = false

[thierryH91200]

another solution possible :

BarLineChartViewBase / internal func calculateLegendOffsets

           case .horizontal:

                switch _legend.verticalAlignment
                {
                case .top:
                    offsetTop += min(_legend.neededHeight, _viewPortHandler.chartHeight * _legend.maxSizePercent) + _legend.yOffset
//                    if xAxis.isEnabled && xAxis.isDrawLabelsEnabled
//                    {
//                        offsetTop += xAxis.labelRotatedHeight
//                    }

                case .bottom:
                    offsetBottom += min(_legend.neededHeight, _viewPortHandler.chartHeight * _legend.maxSizePercent) + _legend.yOffset
//                    if xAxis.isEnabled && xAxis.isDrawLabelsEnabled
//                    {
//                        offsetBottom += xAxis.labelRotatedHeight
//                    }

                default:
                    break

Comment or delete the lines above "if xAxis.isEnabled ........xAxis.labelRotatedHeight}"
It's recalculated a little lower exactly the same thing in calculateOffsets

I made all possible combinations it's good at 90% it remains a problem with
legend.drawInside = true

It is rather outside ???

[elchris78]

Awesome @thierryH91200 !
I'm about to make those changes, I'll let you know the result in a sec.! thanks

[thierryH91200]

@elchris78 and the result is ok for you ???

[elchris78]

hey @thierryH91200 , I finally decided to use your first piece of advice, I moved the legend to the top of the chart, and that was it! Here's the result:

I've been searching for a solution but not succeeded yet.
Sorry for the late response, took some days off work! Did you find something else meanwhile?

[thierryH91200]

the true soluce is remove

           case .horizontal:

                switch _legend.verticalAlignment
                {
                case .top:
                    offsetTop += min(_legend.neededHeight, _viewPortHandler.chartHeight * _legend.maxSizePercent) + _legend.yOffset
//                    if xAxis.isEnabled && xAxis.isDrawLabelsEnabled
//                    {
//                        offsetTop += xAxis.labelRotatedHeight
//                    }

                case .bottom:
                    offsetBottom += min(_legend.neededHeight, _viewPortHandler.chartHeight * _legend.maxSizePercent) + _legend.yOffset
//                    if xAxis.isEnabled && xAxis.isDrawLabelsEnabled
//                    {
//                        offsetBottom += xAxis.labelRotatedHeight
//                    }

                default:
                    break

the code in comment
It's recalculated 2 times

[mariovillamizar]

A clean solution could be modifying this property: self.lineChart.extraBottomOffset

[liuxuan30]

it could be tricky sometimes @mariovillamizar using extra as you have to update them if you need other space