I have created piechart with the help of following library:
https://github.com/danielgindi/Charts
and currently using pod 'Charts', '~> 3.0.4'.
I have created half pie chart and also setup label on it but it keeps on rotating and sometimes it's going outside the slice or overlap on another label. Please use following images for reference.
When we setup label at the first time
When we rotate the screen then it gets overlapped
Also, code for implementation:
pieChartLV1 = PieChartView();
pieChartLV1.chartDescription?.text = ""
pieChartLV1.legend.enabled = false
pieChartLV1.holeRadiusPercent = 0.3
pieChartLV1.translatesAutoresizingMaskIntoConstraints = false
pieChartLV1.transparentCircleColor = UIColor.clear
pieChartLV1.usePercentValuesEnabled = true
pieChartLV1.entryLabelColor = UIColor.black
//adding data
let Level1Data = ["Eligibilty": 10, "Enrollment": 10, "Benefit Design": 10, "Biology": 10, "Behaviour": 10,"Environment": 10, "Outcomes": 10, "workflow": 10, "Errors": 10, "Billings & \nPayments": 10, "Fraud & \nAbuse": 10, "Medical \nPolicy": 10]
var dataEntries = [PieChartDataEntry]()
for (key, val) in Level1Data {
let entry = PieChartDataEntry(value: Double(val), label: key)
entry.label = key
dataEntries.append(entry)
}
let chartDataSet = PieChartDataSet(values: dataEntries, label: "")
chartDataSet.colors = ChartColorTemplates.material()
chartDataSet.sliceSpace = 2
chartDataSet.selectionShift = 0
chartDataSet.valueTextColor = UIColor.black
let chartData = PieChartData(dataSet: chartDataSet)
chartData.setDrawValues(false)
pieChartLV3.data = chartData2
I want a fixed label on pie chart with some angle Or need to remove rotational animation of a label.
Thanks in advance.
chartDataSet.rotationEnabled = false
Related
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!
With Charts Cocoapod, I can set up two ChartLimitLines as dashed lines. But the requirement is to fill the area between two ChartLimitLines on the graph.
Here is my code:
let lowLimitLine = ChartLimitLine(limit: 3, label: "")
lowLimitLine.lineWidth = 2.0
lowLimitLine.lineDashLengths = [5, 5]
lowLimitLine.lineColor = chartBGColor
let highLimitLine = ChartLimitLine(limit: 5, label: "")
highLimitLine.lineWidth = 2.0
highLimitLine.lineDashLengths = [5, 5]
highLimitLine.lineColor = chartBGColor
graphView.leftAxis.addLimitLine(lowLimitLine)
graphView.leftAxis.addLimitLine(highLimitLine)
graphView.leftAxis.drawLimitLinesBehindDataEnabled = true
graphView.fitBars = true
Output:
Requirement:
I think that with iOS-Charts we have not standard methods for displaying limit lines with filling. But we can implement them manually.
I have used two main ideas.
We can draw a filled line chart.
We can combine bar charts and line charts using CombinedChartView.
So you need to replace your BarChartView with CombinedChartView, add filled line chart and use a custom fillFormatter for displaying filled area above chart line.
See the code example:
class ViewController: UIViewController {
// Use CombinedChartView instead BarChartView
#IBOutlet weak var chartView: CombinedChartView!
override func viewDidLoad() {
super.viewDidLoad()
// Set draw order - draw filled area behind bars
chartView.drawOrder = [
DrawOrder.line.rawValue,
DrawOrder.bar.rawValue
]
let data = CombinedChartData()
// Just your data
let dataEntries: [ChartDataEntry] = [
BarChartDataEntry (x: 10, y: 20),
BarChartDataEntry (x: 15, y: 40)
]
let barDataSet = BarChartDataSet(entries: dataEntries)
barDataSet.setColor(UIColor.blue)
data.barData = BarChartData(dataSet: barDataSet)
// Data for filled area
let filledAreaDataSet = createFillingAreaDataSet(xMinValue: 8, xMaxValue: 17, yValue: 32)
data.lineData = LineChartData(dataSet: filledAreaDataSet)
chartView.data = data
}
// Create data set for filled area
private func createFillingAreaDataSet(xMinValue: Double, xMaxValue: Double, yValue: Double) -> LineChartDataSet {
let dataEntries: [ChartDataEntry] = [
ChartDataEntry(x: xMinValue, y: yValue),
ChartDataEntry(x: xMaxValue, y: yValue)
]
let chartDataSet = LineChartDataSet(entries: dataEntries, label: nil)
// hide chart line and values
chartDataSet.lineWidth = 0
chartDataSet.drawValuesEnabled = false
chartDataSet.drawCirclesEnabled = false
// customize filled area
chartDataSet.drawFilledEnabled = true
chartDataSet.fillAlpha = 1
chartDataSet.fill = Fill(CGColor: UIColor.green.cgColor)
// use custom fillFormatter for draw filled area from the top of the chart to yValue
chartDataSet.fillFormatter = CustomFillFormatter()
return chartDataSet
}
}
// Define custom fill formatter for drawing filled area from the top of the chart to yValue
class CustomFillFormatter: NSObject, IFillFormatter {
func getFillLinePosition(dataSet: ILineChartDataSet, dataProvider: LineChartDataProvider) -> CGFloat {
return CGFloat( dataProvider.chartYMax )
}
}
And the result:
I figured out a solution with the Charts Cocoapod to fill between the ChartLimitLines.
Decrease the space between the dash lines so it can be viewed as a solid line.
Give the width for the line and use for loop to fill the space evenly between limit lines.
for limit in stride(from: 3.0, to: 5.0, by: 0.1) {
let limitLine = ChartLimitLine(limit: limit, label: "")
limitLine.lineWidth = 10.0
limitLine.lineDashLengths = [0.1, 0.1]
limitLine.lineColor = chartBGColor
graphView.leftAxis.addLimitLine(limitLine)
}
graphView.leftAxis.drawLimitLinesBehindDataEnabled = true
graphView.fitBars = true
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.
I'm trying to show my data in charts, but I have issue when I try to do that with multiple lines. The lines behave strangely, I tried many things, but I could not fix it in any way. Here is a picture of this
I'm using Xcode(Version 10.1 (10B61)), Swift 4.2, Charts 3.2.1
let dollars1 = [1453.0,2352,5431,1442,5451,6486,1173,5678,9234,1345,9411,2212]
let dollars2 = [5641.0,2234,8763,4453,4548,6236,7321,3458,2139,399,1311,5612]
let dollars3 = [6541.0,3456,7843,5678,5877,7323,7111,6456,5143,4562,6311,10412]
var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
for i in 0..<dollars1.count {
yVals1.append(ChartDataEntry(x: dollars1[i], y: Double(i)))
}
let set1: LineChartDataSet = LineChartDataSet(values: yVals1, label: "First Set")
set1.axisDependency = .left // Line will correlate with left axis values
set1.setColor(UIColor.red.withAlphaComponent(0.5))
set1.setCircleColor(UIColor.clear)
set1.lineWidth = 2.0
set1.fillAlpha = 65 / 255.0
set1.fillColor = UIColor.red
set1.highlightColor = UIColor.yellow
set1.drawCircleHoleEnabled = false
var yVals2 : [ChartDataEntry] = [ChartDataEntry]()
for i in 0..<dollars2.count {
yVals2.append(ChartDataEntry(x: dollars2[i], y: Double(i)))
}
let set2: LineChartDataSet = LineChartDataSet(values: yVals2, label: "Second Set")
set2.axisDependency = .left // Line will correlate with left axis values
set2.setColor(UIColor.green.withAlphaComponent(0.5))
set2.setCircleColor(UIColor.clear)
set2.lineWidth = 2.0
set2.fillAlpha = 65 / 255.0
set2.fillColor = UIColor.green
set2.highlightColor = UIColor.yellow
set2.drawCircleHoleEnabled = false
var yVals3 : [ChartDataEntry] = [ChartDataEntry]()
for i in 0..<dollars3.count {
yVals3.append(ChartDataEntry(x: dollars3[i], y: Double(i)))
}
let set3: LineChartDataSet = LineChartDataSet(values: yVals3, label: "Third Set")
set3.axisDependency = .left // Line will correlate with left axis values
set3.setColor(UIColor.blue.withAlphaComponent(0.5))
set3.setCircleColor(UIColor.clear)
set3.lineWidth = 2.0
set3.fillAlpha = 65 / 255.0
set3.fillColor = UIColor.blue
set3.highlightColor = UIColor.yellow
set3.drawCircleHoleEnabled = false
//3 - create an array to store our LineChartDataSets
var dataSets : [LineChartDataSet] = [LineChartDataSet]()
dataSets.append(set1)
dataSets.append(set2)
dataSets.append(set3)
//4 - pass our months in for our x-axis label value along with our dataSets
let data: LineChartData = LineChartData(dataSets: dataSets)
data.setValueTextColor(UIColor.white)
//5 - finally set our data
self.lineCharts.data = data
Iam using SwiftChart git library :- https://github.com/gpbl/SwiftChart
click to see in image
enter image description here
here is the code :-
let chart = Chart(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
let series = ChartSeries([0, 6.5, 2, 8, 4.1, 7, -3.1, 10, 8])
chart.add(series)
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.