iOS Line Chart highlight color - ios

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.

Related

Horizontal Bar chart not moving to X

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!

iOS Charts issue for Line Chart. Missing Alignment while zooming

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")

Remove rotation of PieChartDataEntry label

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

How to cut highlight in iOS Charts only up to the data point?

How can I customize the highlighter in Line Charts? I want to cut the highlight to be drawn only up to the data point. I also want to customize the label on the x-axis where it's highlighted. Below is a reference picture on what I'm trying to achieve.
This is what I've done so far. What I've achieved so far
Below is the code for my Line Chart View Setup
let lineChartView: LineChartView = {
let chart = LineChartView(frame: .zero)
chart.chartDescription = nil
chart.dragEnabled = true
chart.scaleYEnabled = false
chart.scaleXEnabled = true
chart.pinchZoomEnabled = false
chart.drawGridBackgroundEnabled = true
chart.gridBackgroundColor = .clear
chart.legend.enabled = false
chart.zoom(scaleX: 2, scaleY: 1, x: 0, y: 0)
chart.setViewPortOffsets(left: 30, top: 30, right: 30, bottom: 30)
chart.rightAxis.enabled = false
let yAxis = chart.leftAxis
yAxis.enabled = true
yAxis.drawAxisLineEnabled = false
yAxis.drawLabelsEnabled = false
yAxis.gridColor = UIColor(rgba: "#414042")
yAxis.gridLineWidth = 1
yAxis.axisMaximum = 6000
chart.xAxis.enabled = true
chart.xAxis.drawGridLinesEnabled = false
chart.xAxis.drawLabelsEnabled = true
chart.xAxis.drawAxisLineEnabled = true
chart.xAxis.axisLineColor = .darkGray
chart.xAxis.axisLineWidth = 1
chart.xAxis.valueFormatter = IndexAxisValueFormatter(values: ["Jan", "Feb", "Mar", "April", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
chart.xAxis.labelPosition = .bottom
chart.xAxis.labelTextColor = .darkGray
chart.xAxis.labelFont = UIFont.sourceSansProLight(withSize: 15.5)
chart.xAxis.granularityEnabled = true
chart.xAxis.granularity = 1
chart.highlightPerTapEnabled = false
chart.backgroundColor = .clear
return chart
}()
And this is the code for adding random data points in the chart and the highlight.
var values: [ChartDataEntry] = []
var highlight: Highlight? = nil
for index in 0..<12 {
let randomValue = Double(arc4random_uniform(5000))
values.append(ChartDataEntry(x: Double(index), y: randomValue))
if index == 4 {
highlight = Highlight(x: Double(index), y: randomValue, dataSetIndex: 0)
}
}
let dataSet = LineChartDataSet(values: values, label: "")
dataSet.highlightEnabled = true
dataSet.drawHorizontalHighlightIndicatorEnabled = false
dataSet.highlightColor = UIColor(rgba: "#1899FF")
dataSet.highlightLineWidth = 1
dataSet.mode = .horizontalBezier
dataSet.circleColors = Array(repeating: UIColor(rgba: "#1899FF"), count: 12)
dataSet.fillColor = UIColor(rgba: "#1899FF")
dataSet.drawCircleHoleEnabled = false
dataSet.drawFilledEnabled = true
dataSet.lineWidth = 0.0
dataSet.drawValuesEnabled = true
dataSet.axisDependency = .left
dataSet.valueFormatter = self
let data = LineChartData(dataSet: dataSet)
data.setDrawValues(true)
data.setValueFont(UIFont.sourceSansProLight(withSize: 15.5))
data.setValueTextColor(UIColor(rgba: "#1899FF"))
lineChartView.data = data
lineChartView.highlightValue(highlight)
For Highlight Area of data point you can use below property and achieve this
All property can use through dataSet so for that you can create LineChartDataSet like below and use different property as per your requirement.
//DataSet
LineChartDataSet *set = [[LineChartDataSet alloc] initWithValues:values label:#"closed"];
set.lineWidth = 2;
Set ChartFill property with your fill color :
set.fill = [ChartFill fillWithColor:<Your Legend Color>];
[set setColor:<Your Legend Color>];
[set setCircleColor:<Your Legend Color>];
[set setCircleHoleColor:<Your Legend Color>];
You need to enable drawfill :
set.drawFilledEnabled = YES;
You can Enable circle with this property :
[set setDrawCirclesEnabled:YES];
You can enable highlight Indicator which dat point is selected will highlight with Vertical Line :
[set setDrawHighlightIndicators:YES];
You can set Circle radius as per your requirement :
[set setCircleRadius:5.0f];
[set setCircleHoleRadius:4.0f];
You can specify line with of highlighted data point also :
[set setHighlightLineWidth:1.0];
[set setHighlightColor:kAppLegend3GraphColorForCAP];
Edit:
for changing font color & type you need to change xAxis color and font as mention below
lineChartView.xAxis.labelFont = UIFont.systemFont(ofSize: 20.0, weight: UIFontWeightRegular)
lineChartView.xAxis.labelTextColor = .orange
For Line limit to data point value I think we can not limit this in current version.
Hope this will help you to achieve your requirement.

How to set space between x axis labels in IOS Charts?

I have been facing this problem for a long time. I wish to set equal space between the x-axis labels in my ios chart. I referred to this solution and applied the code as lineChartView.xAxis.avoidFirstLastClippingEnabled = true, but it didn't work out. Then I did set the value to be false then it gave me somewhat equal spacing but now my first and last x-axis label is being hidden in the chart. Please help me out with this solution.Here is the code for the line chart customization:
func setXaxis(){
lineChartView.xAxis.labelPosition = .bottom
lineChartView.xAxis.avoidFirstLastClippingEnabled = false
lineChartView.xAxis.forceLabelsEnabled = true
lineChartView.xAxis.labelPosition = XAxis.LabelPosition.bottomInside
lineChartView.xAxis.drawGridLinesEnabled = false
lineChartView.xAxis.labelTextColor = chartcolor
lineChartView.xAxis.labelCount = 6
lineChartView.xAxis.xOffset = 10
}
func setYaxis(){
lineChartView.leftAxis.labelPosition = YAxis.LabelPosition.insideChart
lineChartView.leftAxis.labelTextColor = chartcolor
lineChartView.leftAxis.gridColor = chartcolor
lineChartView.leftAxis.labelCount = 5
lineChartView.leftAxis.yOffset = 6
lineChartView.setViewPortOffsets(left: 0, top: 0, right: 0, bottom: 0)
}
func setChart(){
lineChartView.noDataText = ""
lineChartView.dragEnabled = false
lineChartView.setScaleEnabled(false)
lineChartView.pinchZoomEnabled = false
lineChartView.drawMarkers = true
lineChartView.backgroundColor = bluecolor
lineChartView.rightAxis.enabled = false
lineChartView.legend.enabled = false
lineChartView.chartDescription?.enabled = false
}
These are my screenshots.
When : lineChartView.xAxis.avoidFirstLastClippingEnabled = true
When : lineChartView.xAxis.avoidFirstLastClippingEnabled = false

Resources