I have a generated chart. I'm trying to make it as simple as possible, thus removing all the unneeded lines, grids, labels etc. I can't get rid of the separator line between the bars and the top and right border lines, as you can see on the picture. I'm using HorizontalBarChart.
Also, here you can see my chart setup code, I tried to disable literally everything:
private func setupCharts(selectedHero: Int) {
classWinrateChart.descriptionText = ""
classWinrateChart.legend.enabled = false
classWinrateChart.drawBordersEnabled = false
classWinrateChart.drawMarkers = false
classWinrateChart.drawValueAboveBarEnabled = false
let chartDataSet = BarChartDataSet(yVals: dataSource, label: "Noaaah")
let chartData = BarChartData(xVals: ["", "", "", "", "", "", "", "", "", ""], dataSet: chartDataSet)
let color = constants.colors[selectedHero]
chartDataSet.colors = [color]
chartDataSet.valueFont = UIFont.systemFontOfSize(13)
//chartDataSet.drawValuesEnabled = false
let yAxis = classWinrateChart.leftAxis
let xAxis = classWinrateChart.rightAxis
yAxis.enabled = false
yAxis.drawLabelsEnabled = false
yAxis.drawAxisLineEnabled = false
yAxis.drawGridLinesEnabled = false
xAxis.enabled = false
xAxis.drawLabelsEnabled = false
xAxis.drawAxisLineEnabled = false
xAxis.drawGridLinesEnabled = false
classWinrateChart.rightAxis.enabled = false
yAxis.axisMaxValue = 100
yAxis.axisMinValue = 0
classWinrateChart.tintColor = colors[selectedHero]
classWinrateChart.drawGridBackgroundEnabled = false
classWinrateChart.data = chartData
}
This may help you :
var viwBar = BarChartView()
viwBar.leftAxis.drawGridLinesEnabled = false
viwBar.rightAxis.drawGridLinesEnabled = false
viwBar.xAxis.drawGridLinesEnabled = false
viwBar.drawGridBackgroundEnabled = false
//removes left and right axis representation
let yaxis = viwBar.getAxis(ChartYAxis.AxisDependency.Left)
yaxis.drawLabelsEnabled = false
yaxis.enabled = false
let xaxis = viwBar.getAxis(ChartYAxis.AxisDependency.Right)
xaxis.drawLabelsEnabled = false
xaxis.enabled = false
check your code, Is it like ?
let xAxis = classWinrateChart.rightAxis
classWinrateChart.rightAxis is rightAxis, not xAxis.
Related
I am using danielgindi
/
Charts for creating line chart. When Line chart data has same values, only the last drawn line showing. Other lines are hidden behind the last drawn line. Is there any way to show all lines.
image: 'fff' and 'User B' is hidden behind 'User C', they all have number of activities equal to zero
Line chart initialisation
func commonInit() {
guard let view = loadViewFromNib() else { return }
view.frame = self.bounds
self.addSubview(view)
lblXAxis.text = "Days"
lblYAxis.text = "Number of Activities"
lblYAxis.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)
self.roundAllCorners(radius: 6)
let valFormatter = NumberFormatter()
valFormatter.numberStyle = .none
valFormatter.maximumFractionDigits = 0
viewProgressLineChart.leftAxis.valueFormatter = DefaultAxisValueFormatter(formatter: valFormatter)
viewProgressLineChart.leftAxis.granularity = 1
viewProgressLineChart.xAxis.granularity = 1
viewProgressLineChart.xAxis.labelCount = 11
viewProgressLineChart.xAxis.avoidFirstLastClippingEnabled = false
viewProgressLineChart.xAxis.labelPosition = .bottom
viewProgressLineChart.chartDescription?.text = ""
viewProgressLineChart.xAxis.labelTextColor = UIColor.onPrimary
viewProgressLineChart.leftAxis.labelTextColor = UIColor.onPrimary
viewProgressLineChart.rightAxis.labelTextColor = UIColor.onPrimary
viewProgressLineChart.clipValuesToContentEnabled = true
viewProgressLineChart.legend.enabled = false
viewProgressLineChart.rightAxis.enabled = false
viewProgressLineChart.animate(xAxisDuration: 0.8)
}
This is how data is given to line chart,
func updateGraph(users: [User]){
let data = LineChartData()
for (index,user) in users.enumerated(){
let userColor = UIColor.selectedColors[index]
userAndStatusColorArray.append(UserAndStatusColor(name: user.name ?? "user", color: userColor))
var lineChartEntry = [ChartDataEntry]()
if user.progress != nil{
for progress in user.progress!{
let chartData = ChartDataEntry(x: Double(progress.day), y: Double(progress.activitiesCompleted!))
lineChartEntry.append(chartData)
}
let chartDataSet = LineChartDataSet(entries: lineChartEntry)
chartDataSet.colors = [userColor]
chartDataSet.circleColors = [userColor]
chartDataSet.circleRadius = 3
chartDataSet.drawValuesEnabled = false
data.addDataSet(chartDataSet)
}
}
viewPODProgressLineChart.viewProgressLineChart.data = data
}
I've created a simple small chart using (https://github.com/danielgindi/Charts), where i'm trying to remove everything beside the line itself, but i can't seem to remove the bottom zero axis. i've looked through the documentation, but cannot seem to remove it?
chart
class CellChartView: UIView {
var lineChart: LineChartView!
override init(frame: CGRect) {
super.init(frame: frame)
self.lineChart = LineChartView()
lineChart.backgroundColor = Color.lightTheme.value
lineChart.translatesAutoresizingMaskIntoConstraints = false
self.lineChart.chartDescription?.text = ""
self.lineChart.isUserInteractionEnabled = false
self.lineChart.legend.enabled = false
self.lineChart.minOffset = 0
self.lineChart.drawBordersEnabled = false
self.lineChart.drawGridBackgroundEnabled = false
self.lineChart.autoScaleMinMaxEnabled = true
self.lineChart.rightAxis.enabled = false
self.lineChart.leftAxis.enabled = false
self.lineChart.leftAxis.drawAxisLineEnabled = false
self.lineChart.leftAxis.axisLineColor = UIColor.green
self.lineChart.xAxis.drawLabelsEnabled = false
self.lineChart.xAxis.drawGridLinesEnabled = false
self.lineChart.xAxis.labelPosition = .bottom
self.lineChart.xAxis.drawLimitLinesBehindDataEnabled = false
self.lineChart.xAxis.enabled = false
self.lineChart.xAxis.axisLineColor = UIColor.clear
self.addSubview(self.lineChart)
lineChart.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
lineChart.topAnchor.constraint(equalTo: self.topAnchor, constant: -1).isActive = true
lineChart.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true
lineChart.heightAnchor.constraint(equalTo: self.heightAnchor).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setChartData(values: [Double], dates: [String]) {
var yValues : [ChartDataEntry] = [ChartDataEntry]()
for i in 0 ..< dates.count {
yValues.append(ChartDataEntry(x: Double(i + 1), y: values[i]))
}
let data = LineChartData()
let ds = LineChartDataSet(values: yValues, label: "Date")
ds.drawCirclesEnabled = false
ds.lineWidth = 1
ds.drawValuesEnabled = false
if (values.first ?? 0.0 > values.last ?? 0.0) {
ds.setColor(Color.redColor.value)
} else {
ds.setColor(Color.greenColor.value)
}
data.addDataSet(ds)
data.setDrawValues(false)
self.lineChart.data = data
}
}
If you just want to hide the xAxis, then I see two ways:
You could disable the xAxis xAxis.enabled = false
Or set the xAxis line color to transparent xAxis.axisLineColor = UIColor.clear
If you want to hide the horizontal and vertical lines being drawn through the center when you have disabled all grid lines and just want an X-Axis line as shown above in your drawing
lineChartDataSet.highlightColor = NSUIColor.clear
myLineChartView.xAxis.drawAxisLineEnabled = true
myLineChartView.xAxis.drawGridLinesEnabled = false
myLineChartView.xAxis.drawLabelsEnabled = false
myLineChartView.leftAxisAxis.drawAxisLineEnabled = false
This will just hide the horizontal and vertical lines while giving you the freedom to draw a line through X-Axis or Y-Axis.
If you just want to hide background gridlines
Just do
self.chartView?.leftAxis.drawGridLinesEnabled = false
self.charView?.xAxis.drawGridLinesEnabled = false
It will remove background grids for both axis. like that
I have the following line chart with 2 datasets.
One data set is dependent on the left yAxis the other one on the right yAxis.
Now i want them both to have the zero value in the same line.
The other values are ok to not be aligned.
How can i do that?
Code:
let speedLine = LineChartDataSet(values: speedEntries, label: "Speed")
speedLine.colors = [UIColor.white]
speedLine.drawCirclesEnabled = false
speedLine.axisDependency = .left
let powerLine = LineChartDataSet(values: powerEntries, label: "Power")
powerLine.colors = [UIColor.green]
powerLine.drawCirclesEnabled = false
powerLine.axisDependency = .right
let data = LineChartData()
data.addDataSet(speedLine)
data.addDataSet(powerLine)
chartView.data = data
chartView.xAxis.labelTextColor = UIColor.white
chartView.xAxis.labelCount = 20
chartView.leftAxis.labelTextColor = UIColor.white
chartView.rightAxis.labelTextColor = UIColor.green
chartView.legend.textColor = UIColor.white
chartView.rightAxis.axisMinimum = -80.0
chartView.chartDescription?.text = ""
Since you have:
chartView.rightAxis.axisMinimum = -80.0
You might need to do this as well:
chartView.leftAxis.axisMinimum = -80.0
I think there is still no resolution for this problem but we can still hide yAxis right side.
let yAxisLeft = chartView.leftAxis
yAxisLeft.drawGridLinesEnabled = true
yAxisLeft.gridColor = UIColor(hex: "DCE5EE")
yAxisLeft.labelFont = Theme.Font.main(ofSize: 9, weight: .regular)
yAxisLeft.labelXOffset = 2
yAxisLeft.labelTextColor = Theme.Color.white
yAxisLeft.axisLineColor = UIColor(hex: "DCE5EE")
yAxisLeft.drawAxisLineEnabled = false
yAxisLeft.labelCount = 4
yAxisLeft.axisMinLabels = 1
yAxisLeft.enabled = true
yAxisLeft.axisMinimum = 0
let yAxisRight = chartView.rightAxis
yAxisRight.drawGridLinesEnabled = false
yAxisRight.labelFont = Theme.Font.main(ofSize: 9, weight: .regular)
yAxisRight.labelXOffset = -2
yAxisRight.labelTextColor = Theme.Color.white
yAxisRight.drawAxisLineEnabled = false
yAxisRight.labelCount = 4
yAxisRight.axisMinLabels = 1
yAxisRight.enabled = true
yAxisRight.axisMinimum = 0
This is the final result:
I have a LineChartView and I want to show labels for the xAxis.
My code looks like this:
chartView.chartDescription?.enabled = false
chartView.drawGridBackgroundEnabled = false
chartView.dragEnabled = !chartView.isFullyZoomedOut
chartView.setScaleEnabled(true)
chartView.pinchZoomEnabled = true
chartView.setViewPortOffsets(left: 20.0, top: 0.0, right: 20.0, bottom: 0.0)
chartView.legend.enabled = true
chartView.legend.textColor = legendColor
chartView.legend.form = .empty
chartView.leftAxis.enabled = false
chartView.leftAxis.spaceTop = 0.4
chartView.leftAxis.spaceBottom = 0.4
chartView.rightAxis.enabled = false
chartView.xAxis.enabled = true
chartView.xAxis.labelTextColor = UIColor.black
chartView.xAxis.valueFormatter = self
chartView.xAxis.drawGridLinesEnabled = false
chartView.xAxis.drawLabelsEnabled = true
chartView.xAxis.drawAxisLineEnabled = false
chartView.highlightPerTapEnabled = false
chartView.highlightPerDragEnabled = false
if lineChartData.entryCount > 0 {
chartView.data = lineChartData
}
chartView.noDataText = NSLocalizedString("No chart data available", comment: String())
chartView.maxVisibleCount = 12
chartView.delegate = self
and
extension ChartCell: IAxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
return "foo"
}
}
In the debugger I see that stringForValue is being called, however in the drawn charts there are no labels.
I'm at a loss what I am missing here.
You have to set below :
chartView.xAxis.labelPosition = XAxis.LabelPosition.bottom
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
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:
See my comment above, but something like this may work if you're not using auto layout:
let labelA = UILabel()
let labelB = UILabel()
let padding: CGFloat = 5.0 // or whatever
if CGRectIntersectsRect(labelA.frame, labelB.frame) {
// If the minY of labelA is <= labelB's that means labelA is ABOVE labelB
if labelA.frame.minY <= labelB.frame.minY {
// Set it above, with some (optional) padding
labelA.frame.origin.y = labelB.frame.origin.y - padding - labelA.frame.height
} else {
labelB.frame.origin.y = labelA.frame.origin.y - padding - labelB.frame.height
}
}
Of course you'll need additional code for checking if it's too high and other edge cases.