I am having very hard time while implementing line chart. I am using latest Charts pod. When I zoom chart its not work properly. X-axis missing its coordinate.
I have attached both images.
// Make sure that only 1 x-label per index is shown
updatedCampaignEndDateArray = ["", "20-11", "28-11", "03-12", "04-12", "31-12"]
self.chartView.xAxis.granularityEnabled = true
self.chartView.xAxis.granularity = 1.0
self.chartView.xAxis.labelPosition = .top
self.chartView.xAxis.labelCount = self.updatedCampaignEndDateArray.count
self.chartView.xAxis.drawLabelsEnabled = true
self.chartView.xAxis.drawLimitLinesBehindDataEnabled = true
self.chartView.xAxis.avoidFirstLastClippingEnabled = true
self.chartView.xAxis.labelFont = UIFont.systemFont(ofSize: 8.0)
self.chartView.xAxis.setLabelCount(self.updatedCampaignEndDateArray.count, force: true)
self.chartView.xAxis.valueFormatter = DefaultAxisValueFormatter(block: {(index, _) in
return self.updatedCampaignEndDateArray[Int(index)]
})
self.chartView.xAxis.wordWrapEnabled = false
self.chartView.legend.form = .line
self.chartView.animate(xAxisDuration: 0.5)
acceptedArrayWithAddition = [0, 8, 0, 503, 551]
let values = (0..<self.pointCount + 1).map { (i) -> ChartDataEntry in
return ChartDataEntry(x: Double(i), y: Double(acceptedArrayWithAddition[Int(i)]))
let set = LineChartDataSet(values: values, label: "Leads")
Related
For plotting graphs I use the Charts framework from this site https://github.com/danielgindi/Charts. I want to know if it possible to center the x- and y-axis to look like this:
I tried to move the x-Axis and the left-Axis to center, but it only moves the label values but not the axes, as you can see in the below picture
Here is an example of my code:
var lineChartView: LineChartView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
lineChartView = LineChartView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height))
lineChartView?.delegate = self
self.view.addSubview(lineChartView!)
let ys1 = Array(0..<100).map { x in ChartDataEntry(x: Double(x) / 10, y: sin(Double(x) / 10)) }
let ys2 = Array(0..<100).map { x in ChartDataEntry(x: Double(x) / 10, y: cos(Double(x) / 10)) }
let data = LineChartData()
let ds1 = LineChartDataSet(entries: ys1, label: "sine")
ds1.colors = [NSUIColor.red]
ds1.drawCirclesEnabled = false
ds1.drawValuesEnabled = false
ds1.mode = .cubicBezier
data.addDataSet(ds1)
let ds2 = LineChartDataSet(entries: ys2, label: "cosine")
ds2.colors = [NSUIColor.blue]
ds2.drawCirclesEnabled = false
ds2.drawValuesEnabled = false
ds2.mode = .cubicBezier
data.addDataSet(ds2)
self.lineChartView.data = data
lineChartView.xAxis.enabled = true
lineChartView.xAxis.labelPosition = .bottom
lineChartView.xAxis.yOffset = -self.view.frame.height/2
lineChartView.rightAxis.enabled = false
// left axis
lineChartView.leftAxis.xOffset = -self.view.frame.width/2
}
you can try this code, you might need to set chart.setVisibleRange too
chart.xAxis.granularity = 1
chart.leftAxis.granularity = 1
chart.leftAxis.axisMaximum = maxYValue
chart.xAxis.axisMaximum = maxXValue
chart.xAxis.axisMinimum = -maxXValue
chart.leftAxis.axisMinimum = -maxYValue
Today i finally got my autolayout constrainst animation to work, and after that i noticed, that the Horizontal bar chart isnt behaving like it used to be.
I have a Horizontal Bar chart populated with data in Descending order (the most should be on top) but the problem is, whenever i try to move the view back to the first entry (the biggest value) using moveViewToX the chart just doesn't do anything it always shows the last added entry, so its scrolled to the end.
I'd like to have it start from the top, i mean from the first entry.
I have tried the moveViewToX function, but it still has no effect.
Here's the code for setting the data:
let sortedData = chartData.sorted(by: { $0.money < $1.money })
for i in 0..<sortedData.count {
let dataEntry = BarChartDataEntry(x: Double(i), y: Double(sortedData[i].money))
dataEntries.append(dataEntry)
labels2.append(sortedData[i].Name)
}
Here is the setup for the chart:
let chartDataSet = BarChartDataSet(entries: dataEntries, label: "kategoriak")
chartDataSet.colors = [UIColor.red]
let kerekitöFormatter = KerekitöNumberFormatter(showZeros: false, showMoney: true)
chartDataSet.valueFormatter = kerekitöFormatter
chartDataSet.valueFont = chartDataSet.valueFont.withSize(10)
chartDataSet.valueTextColor = .white
let horChartData = BarChartData(dataSet: chartDataSet)
horizontalChartView.xAxis.valueFormatter = BarChartXaxisFormatter(labels: labels2, truncMode: true)
horizontalChartView.data = horChartData
horizontalChartView.leftAxis.axisMinimum = 0
horizontalChartView.leftAxis.valueFormatter = YAxisValueFormatter()
horizontalChartView.legend.enabled = false
horizontalChartView.xAxis.labelPosition = .bottom
horizontalChartView.setVisibleXRangeMaximum(5)
horizontalChartView.moveViewToX(Double(sortedData.count))
horizontalChartView.drawValueAboveBarEnabled = false
horizontalChartView.xAxis.granularityEnabled = true
//horizontalChartView.setExtraOffsets (left: 0.0, top: 0.0, right:0.0, bottom: 0.0)
horizontalChartView.xAxis.granularity = 1
horizontalChartView.doubleTapToZoomEnabled = false
if #available(iOS 13.0, *) {
horizontalChartView.backgroundColor = .systemBackground
horizontalChartView.xAxis.labelTextColor = .label
horizontalChartView.leftAxis.labelTextColor = .label
horizontalChartView.gridBackgroundColor = .label
}
let rightAxis = horizontalChartView.rightAxis
rightAxis.drawGridLinesEnabled = false
rightAxis.enabled = false
I hope someone can help.
Looking forward to your answers.
After hours of research and trying i figured it out. For some strange reason if you use moveViewToX it does not respond, but when you use moveViewTo(float xValue, float yValue, AxisDependency axis) it works.
So, to be short, i added this line of code at the end of setting up the chart.
horizontalChartView.moveViewTo(xValue: Double(sortedData.count), yValue: sortedData.first!.money, axis: .left)
Hope this helps you in the future!
I'm using charts 3.2.2 iOS version. I a trying to plot a line chart. In the line chart whenever user taps on the value points a highlight line would show up. Is there any way I can hide or change this highlight line color. Another issue I'm facing is the bubble won't show up for the first entry. I found a lot of solutions online but nothing works for me. Any help will be appreciated.
scoreLineChart.legend.form = .none
scoreLineChart.rightAxis.enabled = false
scoreLineChart.xAxis.labelPosition = .bottom
scoreLineChart.xAxis.drawGridLinesEnabled = false
scoreLineChart.dragEnabled = false
scoreLineChart.doubleTapToZoomEnabled = false
scoreLineChart.xAxis.granularityEnabled = true
scoreLineChart.xAxis.granularity = 1.0
scoreLineChart.leftAxis.axisMinimum = 0
scoreLineChart.leftAxis.axisMaximum = 100.0
scoreLineChart.leftAxis.setLabelCount(5, force: true)
scoreLineChart.xAxis.valueFormatter = valueFormatter
scoreLineChart.xAxis.avoidFirstLastClippingEnabled = true
scoreLineChart.pinchZoomEnabled = false
let marker = BalloonMarker(color: UIColor(hex: "#58595b"),
font: UIFont(name: "Avenir-Heavy", size: 14)!,
textColor: .white,
insets: UIEdgeInsets(top: 8, left: 8, bottom: 20, right: 8))
marker.chartView = scoreLineChart
marker.minimumSize = CGSize(width: 80, height: 40)
scoreLineChart.marker = marker
After adding data entries
let setOne = LineChartDataSet(values: lineChartEntry, label: "") //Here we convert lineChartEntry to a LineChartDataSet
setOne.mode = .cubicBezier
setOne.drawValuesEnabled = true
setOne.lineWidth = 1
setOne.circleRadius = 3
setOne.drawCircleHoleEnabled = false
setOne.valueFont = .systemFont(ofSize: 9)
setOne.formLineWidth = 1
setOne.formSize = 15
setOne.setCircleColor(ChartColorTemplates.colorFromString("#ffcc1a29"))
if !isSingelValue {
setOne.setColor(ChartColorTemplates.colorFromString("#ffcc1a29"))
}else {
setOne.setColor(UIColor.clear)
}
let data = LineChartData(dataSet: setOne)
data.addDataSet(setOne) //Adds the line to the dataSet
scoreLineChart.xAxis.axisMinimum = 0
scoreLineChart.data = data //finally - it adds the chart data to the chart and causes an update
// scoreLineChart.data?.setValueFormatter(valueFormatter)
scoreLineChart.chartDescription?.text = "" // Here we set the description for the graph
scoreLineChart.notifyDataSetChanged()
You just need to set drawHorizontalHighlightIndicatorEnabled drawVerticalHighlightIndicatorEnabled to false to hide grid lines.
let set1 = ScatterChartDataSet(entries: values1, label: "DS 1")
set1.drawHorizontalHighlightIndicatorEnabled = false
set1.drawVerticalHighlightIndicatorEnabled = false
Is there any way I can hide or change this highlight line color.
To show/hide or change the highlight line color, edit the properties of your ChartDateSet
let setOne = LineChartDataSet(values: lineChartEntry, label: "")
setOne.highlightColor = .red // color of the line
setOne.highlightWidht = 2.0 // width of the line
setOne.drawHorizontalHighlightIndicatorEnabled = false // hide horizontal line
setOne.drawVerticalHighlightIndicatorEnabled = false // hide vertical line
Another issue I'm facing is the bubble won't show up for the first entry.
And sadly I cannot reproduce this issue with the BallonMarker.swift from Charts github repository. And It is not clear which one is the first entry of your data from the image you provided.
I tried add a "first entry" to my chart but the BallonMarker works prefectly.
After migrating to Swift 3, my line chart is displayed with strange values in the y-axis. I am not sure if it is the range or the dataset that has the problem. But I checked and the y values seem to be correct.
The chart itself is also displayed as a blue rectangle instead of a line chart (I am assuming because of the wrong y values)
Would any one have an idea what could be wrong by looking at this chart?
Chart
Update:
I was able to pinpoint the problem to the right axis axisMinimum and axisMaximum that do not get set properly. When I use the same code for the left axis, it works perfectly.
here is the code for setting up:
class func newLineChartViewWithXValsAndDataSets(frame: CGRect, xVals: [String], dataSets: [SVLineChartDataSet]?, maximum: ChartDataEntry?, minimum: ChartDataEntry?) -> LineChartView {
let lineChartView = LineChartView(frame: frame)
let chartData = LineChartData(dataSets: dataSets)
let margin: CGFloat = 6
lineChartView.doubleTapToZoomEnabled = false
lineChartView.dragEnabled = false
lineChartView.drawGridBackgroundEnabled = false
lineChartView.drawBordersEnabled = false
lineChartView.legend.textColor = UIColor.sharevilleLightGrey
lineChartView.xAxis.labelPosition = .bottom
lineChartView.xAxis.labelTextColor = UIColor.sharevilleLightGrey
lineChartView.xAxis.avoidFirstLastClippingEnabled = true
lineChartView.xAxis.drawGridLinesEnabled = false
lineChartView.xAxis.axisLineColor = UIColor.sharevilleTouchGrey
lineChartView.xAxis.valueFormatter = LineChartDateFormatter(dates: xVals)
lineChartView.xAxis.setLabelCount(3, force: true)
lineChartView.leftAxis.axisLineColor = UIColor.sharevilleTouchGrey
//lineChartView.leftAxis.drawLabelsEnabled = false
//lineChartView.leftAxis.drawAxisLineEnabled = false
lineChartView.leftAxis.spaceTop = margin
lineChartView.leftAxis.spaceBottom = margin
lineChartView.leftAxis.resetCustomAxisMax()
lineChartView.leftAxis.resetCustomAxisMin()
lineChartView.rightAxis.labelTextColor = UIColor.sharevilleDarkGrey
lineChartView.rightAxis.axisLineColor = UIColor.sharevilleTouchGrey
lineChartView.rightAxis.gridColor = UIColor.sharevilleTouchGrey
lineChartView.rightAxis.labelPosition = .insideChart
lineChartView.rightAxis.drawLabelsEnabled = false
lineChartView.rightAxis.drawAxisLineEnabled = false
lineChartView.rightAxis.spaceTop = margin
lineChartView.rightAxis.spaceBottom = margin
// if we have no maximum and minimumvalue return the linechart directly
guard let maximum = maximum, let minimum = minimum else {
return lineChartView
}
//let absMinMax = abs(maximum.y - minimum.y)
//let visibleYRangeMaxium = max(absMinMax,1) * 1.2
// print("visibile Y Range")
// print(visibleYRangeMaxium)
//lineChartView.setVisibleYRangeMaximum(visibleYRangeMaxium, axis: YAxis.AxisDependency.left)
lineChartView.leftAxis.axisMinimum = minimum.y
lineChartView.leftAxis.axisMaximum = maximum.y
//lineChartView.rightAxis.axisMinimum = minimum.y
//lineChartView.rightAxis.axisMaximum = maximum.y
lineChartView.animate(xAxisDuration: 1, easingOption: .easeInCubic)
print("LinChartView.data= ", lineChartView.data)
lineChartView.chartDescription?.text = ""
lineChartView.backgroundColor = .white
if let dataSets = dataSets {
for dataSet in dataSets {
if dataSet.isLineChartViewHighLowEnabled {
DispatchQueue.main.async {
self.drawLineChartValueView(lineChartView, dataEntry: maximum)
self.drawLineChartValueView(lineChartView, dataEntry: minimum)
}
}
}
}
lineChartView.data = chartData
return lineChartView
}
I don't see you set your data set axisDependency to right axis.
I experience a number of issues with the horizontal bar chart since I updated to the last version of ios-chart (3.0.0).
First thing is that I had labels for the x axis on the charts. With the new version of ios-charts I had to write my own formatter nevertheless only every second label get displayed now. The second problem is that the bar does not reach the value indicated on the y-axis. What I mean by that is that if I give the bar a value of 4 the height of the bar is actually not long enough to reach the 4.0 label on the y-axis. Those 2 issues are illustrated in this picture.
picture of the problems
Here is my code for the value formatter:
#objc(BarChartFormatter)
public class BarChartFormatter: NSObject, IAxisValueFormatter{
var labelArray : [String] = ["text1", "text2", "text3", "text4", "text5", "text6", "text7", "text8", "text9", "text10"]
public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
return labelArray[Int(value)]
}
}
And here is the code for the bar chart
horizontalBarChartView.noDataText = "You need to provide data for the chart."
horizontalBarChartView.isUserInteractionEnabled = false
horizontalBarChartView.drawGridBackgroundEnabled = false
horizontalBarChartView.drawValueAboveBarEnabled = false
horizontalBarChartView.legend.enabled = false
horizontalBarChartView.drawBarShadowEnabled = false
horizontalBarChartView.chartDescription?.text = ""
horizontalBarChartView.setExtraOffsets(left: 0, top: 0, right: 0, bottom: 0)
// Right y axis
let barRightAxis = horizontalBarChartView.leftAxis
barRightAxis.drawGridLinesEnabled = false
barRightAxis.enabled = false
let formato:BarChartFormatter = BarChartFormatter()
let xaxis:XAxis = XAxis()
// Left y axis
let barLeftAxis = horizontalBarChartView.rightAxis
let count = 5
barLeftAxis.setLabelCount(count, force: true)
barLeftAxis.drawGridLinesEnabled = false
barLeftAxis.axisLineWidth = 2
barLeftAxis.axisLineColor = UIColor.white
barLeftAxis.labelTextColor = UIColor.white
barLeftAxis.axisMinimum = 0.0
barLeftAxis.axisMaximum = 4.0
barLeftAxis.granularityEnabled = true
barLeftAxis.granularity = 1.0
barLeftAxis.decimals = 0
// x axis
let barXaXis = horizontalBarChartView.xAxis
barXaXis.drawGridLinesEnabled = false
barXaXis.axisLineColor = UIColor.white
barXaXis.axisLineWidth = 2
barXaXis.labelTextColor = UIColor.white
barXaXis.labelPosition = .bottomInside
barXaXis.granularityEnabled = true
barXaXis.granularity = 1.0
barXaXis.decimals = 0
var dataEntries: [BarChartDataEntry] = []
var colors: [UIColor] = []
let theScoreVec = [1.0, 2.0, 3.0, 4.0, 3.0, 0.0, 2.0, 0.0, 1.0, 4.0]
for i in 0..<10 {
let theScore = theScoreVec[i]
if (theScore == 0.0){
colors.append(UIColor.clear)
let dataEntry = BarChartDataEntry(x: Double(i), y : Double(4.0))
dataEntries.append(dataEntry)
} else {
colors.append(UIColor.red)
let dataEntry = BarChartDataEntry(x: Double(i), y: Double(theScore))
dataEntries.append(dataEntry)
}
}
xaxis.valueFormatter = formato
barXaXis.valueFormatter = xaxis.valueFormatter
for i in 0..<10{
formato.stringForValue(Double(i), axis: xaxis)
}
xaxis.valueFormatter = formato
barXaXis.valueFormatter = xaxis.valueFormatter
let chartDataSet = BarChartDataSet(values: dataEntries, label: "Completion")
chartDataSet.colors = colors
let chartData = BarChartData(dataSet: chartDataSet)
chartData.setDrawValues(false)
horizontalBarChartView.data = chartData
Here I also use some kind of hack because when one enters a value of 0.0 for a BarChartDataEntry the bars and the x axis have a significant offset. Therefore I create bars with a fake value and give them a transparent color.
Do one you had a similar issue with the library and know where it comes from ? Or maybe has even solved it ?
Thanks in advance for the help.