Bar chart, x-axis or zero axis is overlapping the bars.
- Dominant language
- Swift
- Stars
- 28k
- Forks
- 6k
- PR merge metrics
- No merged PRs in 30d
Description
## What did you expect to happen?
I want to draw the x-axis line on top of the bars. (Check the image)
## What happened instead?
It's currently drawn underneath the bars causing the overlapping issue. (Check the image)
## What did you do?
```swift
private func xAxisSetup() { // swiftlint:disable:this cyclomatic_complexity function_body_length
guard let xAxisConfiguration else { return }
let xAxis = chartView.xAxis
xAxis.labelPosition = .bottom
xAxis.labelFont = BaseTextStyle(style: .caption2).scaledFontModifier.uiFont
xAxis.drawAxisLineEnabled = xAxisConfiguration.drawAxisLine
xAxis.labelTextColor = Color.tintSecondary.uiColor
xAxis.drawGridLinesEnabled = false
xAxis.axisLineColor = zeroLineColor.uiColor
xAxis.axisLineWidth = 1
if let axisMinimum = xAxisConfiguration.axisMinimum {
xAxis.axisMinimum = axisMinimum
}
if let axisMaximum = xAxisConfiguration.axisMaximum {
xAxis.axisMaximum = axisMaximum
}
if let labelCount = xAxisConfiguration.labelCount {
xAxis.labelCount = labelCount
}
if let labelFormatter = xAxisConfiguration.labelFormatter {
xAxis.valueFormatter = labelFormatter
}
if let maximumRange = xAxisConfiguration.maximumVisibleRange {
chartView.setVisibleXRangeMaximum(maximumRange)
}
}
private func xAxisGridSetup() {
guard let grid = xAxisConfiguration?.grid else { return }
let xAxis = chartView.xAxis
xAxis.gridColor = grid.color.uiColor
xAxis.gridLineWidth = grid.lineWidth
xAxis.gridLineDashLengths = grid.lineDashLengths
}
private func leftAxisSetup() { // swiftlint:disable:this cyclomatic_complexity function_body_length
if style == .horizontal {
chartView.leftAxis.axisMinimum = .zero
}
guard let leftAxisConfiguration else {
chartView.leftAxis.enabled = false
return
}
let leftAxis = chartView.leftAxis
leftAxis.labelFont = BaseTextStyle(style: .caption2).scaledFontModifier.uiFont
leftAxis.labelTextColor = style == .horizontal ? .clear : Color.tintSecondary.uiColor
leftAxis.drawZeroLineEnabled = true
leftAxis.zeroLineColor = zeroLineColor.uiColor
leftAxis.axisLineColor = .clear
leftAxis.zeroLineWidth = 1
if let axisMinimum = leftAxisConfiguration.axisMinimum {
leftAxis.axisMinimum = axisMinimum
}
if let axisMaximum = leftAxisConfiguration.axisMaximum {
leftAxis.axisMaximum = axisMaximum
}
if let labelCount = leftAxisConfiguration.labelCount {
leftAxis.labelCount = labelCount
}
if let labelFormatter = leftAxisConfiguration.labelFormatter {
leftAxis.valueFormatter = labelFormatter
}
}
private func rightAxisSetup() { // swiftlint:disable:this cyclomatic_complexity function_body_length
guard let rightAxisConfiguration else {
chartView.rightAxis.enabled = false
return
}
let rightAxis = chartView.rightAxis
rightAxis.removeAllLimitLines()
rightAxis.labelFont = BaseTextStyle(style: .caption2).scaledFontModifier.uiFont
rightAxis.labelTextColor = Color.tintSecondary.uiColor
rightAxis.axisLineColor = .clear
rightAxis.drawZeroLineEnabled = true
rightAxis.zeroLineColor = zeroLineColor.uiColor
rightAxis.zeroLineWidth = 1
if style == .horizontal {
rightAxis.axisMinimum = .zero
}
if let axisMinimum = rightAxisConfiguration.axisMinimum {
rightAxis.axisMinimum = axisMinimum
}
if let axisMaximum = rightAxisConfiguration.axisMaximum {
rightAxis.axisMaximum = axisMaximum
}
if let labelCount = rightAxisConfiguration.labelCount {
rightAxis.labelCount = labelCount
}
if let labelFormatter = rightAxisConfiguration.labelFormatter {
rightAxis.valueFormatter = labelFormatter
}
}
private func leftAxisGridSetup() {
chartView.leftAxis.gridColor = .clear
guard let grid = leftAxisConfiguration?.grid else { return }
chartView.leftAxis.gridColor = grid.color.uiColor
chartView.leftAxis.gridLineWidth = grid.lineWidth
chartView.leftAxis.gridLineDashLengths = grid.lineDashLengths
}
private func rightAxisGridSetup() {
chartView.rightAxis.gridColor = .clear
guard let grid = rightAxisConfiguration?.grid else { return }
chartView.rightAxis.gridColor = grid.color.uiColor
chartView.rightAxis.gridLineWidth = grid.lineWidth
chartView.rightAxis.gridLineDashLengths = grid.lineDashLengths
}
```
## DGCharts Environment
**DGCharts version/Branch/Commit Number:**
**Xcode version: 15.2
**Swift version: 5.2
**Platform(s) running DGCharts: 5.1.0
**macOS version running Xcode:**
Contributor guide
Research direction
Start by reproducing the bar chart using the reported xAxisSetup, leftAxisSetup, and rightAxisSetup configuration and inspect DGCharts' axis and bar rendering order. Confirm how the x-axis or zero line is drawn relative to bars. Done means the configured x-axis and zero axis render on top of the bars without breaking other axis or bar-chart behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- swift
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100