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
Related
I am using LineChartView in collection view cells, but randomly when I scroll sometimes orange/brown axis lines are being displayed.
Code I used to create LineChartView
let view = LineChartView()
view.translatesAutoresizingMaskIntoConstraints = false
view.chartDescription?.enabled = false
view.xAxis.drawGridLinesEnabled = false
view.xAxis.drawLabelsEnabled = false
view.xAxis.drawAxisLineEnabled = false
view.xAxis.enabled = false
view.xAxis.axisLineColor = .clear
view.rightAxis.enabled = false
view.rightAxis.axisLineColor = .clear
view.leftAxis.enabled = false
view.leftAxis.axisLineColor = .clear
view.drawBordersEnabled = false
view.legend.enabled = false
let values = (0..<32).map { (i) -> ChartDataEntry in
let val = Double(arc4random_uniform(10) + 3)
return ChartDataEntry(x: Double(i), y: val)
}
let set1 = LineChartDataSet(entries: values)
set1.drawCirclesEnabled = false
set1.drawValuesEnabled = false
set1.drawCircleHoleEnabled = false
set1.setColor(UIColor.black)
view.data = LineChartData(dataSets: [set1])
Using danielgindi / Charts (3.6.0)
supplement to # Raja Kishan's suggestion
// for tapping
view.highlightPerTapEnabled = false
// for dragging
view.highlightPerDragEnabled = false
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 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")
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.
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.