ChartsOrg / ChartsOrg/Charts

Bar chart, x-axis or zero axis is overlapping the bars.

Open
#5,190 0 comments 0 reactions 0 assignees View on GitHub
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)
Screenshot 2024-07-25 at 01 44 11

## What happened instead?

It's currently drawn underneath the bars causing the overlapping issue. (Check the image)
Screenshot 2024-07-25 at 01 44 54

## 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.