I want it like this:
But what I can do is, how to get rid of little red label:
Core code for the chart:
var barchart = [BarChartDataEntry]()
// some values
barchart.append(value1)
barchart.append(value2)
barchart.append(value3)
let barData = BarChartDataSet(values: barchart, label: "")
barData.colors = [NSUIColor.red]
let data = BarChartData(dataSet: barData)
data.barWidth = 0.35
cell.barChart.data = data
cell.barChart.scaleYEnabled = false
cell.barChart.chartDescription?.text = ""
cell.barChart.scaleXEnabled = false
cell.barChart.pinchZoomEnabled = false
cell.barChart.doubleTapToZoomEnabled = false
cell.barChart.rightAxis.enabled = false
cell.barChart.xAxis.drawGridLinesEnabled = false
cell.barChart.leftAxis.drawGridLinesEnabled = false
cell.barChart.leftAxis.drawAxisLineEnabled = false
cell.barChart.xAxis.drawAxisLineEnabled = false
cell.barChart.xAxis.drawLabelsEnabled = false
cell.barChart.leftAxis.drawLabelsEnabled = false
cell.barChart.animate(yAxisDuration: 1.5, easingOption: .easeInOutQuart)
return cell
I would like to set max value and make labels rounded as in the image above. I am using https://github.com/danielgindi/Charts.
You can implement the similar UI by using the UIProgressView
First, you can set the Label on top, then a UIProgressView and repeat the same. For other two progresses.
You can add the proper constraints and achieve it.
Refer this Sample Demo for achieving the same.
Hope it helps.
Just add this line where you are setting chartView
cell.barChart.legend.enabled = false
It works for me.
Use UIProgressView component in storyboard and create the outlet
#IBOutlet var progressViewWalk: UIProgressView!
You can set the required progress by:-
progressViewWalk.progress = Float(YOURValue)/100
Set your required Track tint color Progress tint color in Attribute Inspector.
Related
I'm using fscalender on my project which I have to use both month scope and week scope on different view controller.so when I'm using week scope date title size is getting smaller, but when I increase the view height its getting perfect.but my view should have an fixed size so how can I fix this problem.
this is my calendar now
here I converted the round background to rectangle by
calendarObj.appearance.borderRadius = 0
The above week title is implemented with stackview.
This is actually I want
the rectangle border is not showing full.How to resolve this?Im new to this iOS
I Tried This On A view, I have Added only Few Lines, an it is working as you want.
calendarView.dataSource = self
calendarView.delegate = self
calendarView.scrollDirection = .vertical
calendarView.scope = .week
calendarView.backgroundColor = .clear
calendarView.allowsMultipleSelection = false
calendarView.appearance.selectionColor = .none
calendarView.appearance.borderSelectionColor = .red
calendarView.appearance.todayColor = .clear
calendarView.appearance.titleTodayColor = .black
calendarView.appearance.weekdayTextColor = .black
calendarView.appearance.borderRadius = 0.2
I Hope This Will Help.
In the following image there is a space between the xAxis of the chart and the bottom of the bars, the area in red.
I want to know how to remove such space so the labels get closer to the bars. Here is my code:
let chart = BarChartView()
chart.leftAxis.drawGridLinesEnabled = true
chart.leftAxis.drawAxisLineEnabled = false
chart.leftAxis.axisLineColor = .paleBlue
chart.rightAxis.drawGridLinesEnabled = false
chart.rightAxis.drawAxisLineEnabled = false
chart.rightAxis.drawLabelsEnabled = false
chart.xAxis.drawGridLinesEnabled = false
chart.xAxis.labelPosition = .bottom
chart.xAxis.centerAxisLabelsEnabled = true
chart.xAxis.granularityEnabled = true
chart.xAxis.enabled = true
chart.legend.enabled = true
chart.legend.horizontalAlignment = .center
chart.doubleTapToZoomEnabled = false
chart.pinchZoomEnabled = false
chart.noDataText = ""
patch the code
chart.xAxis.yOffset = 0
from the source code,
start with
#objc(ChartXAxis)
open class XAxis: AxisBase
then
/// Base class for all axes
#objc(ChartAxisBase)
open class AxisBase: ComponentBase
got it here, the lib author has explained in comments
/// This class encapsulates everything both Axis, Legend and LimitLines have in common
#objc(ChartComponentBase)
open class ComponentBase: NSObject
{
/// flag that indicates if this component is enabled or not
#objc open var enabled = true
/// The offset this component has on the x-axis
/// **default**: 5.0
#objc open var xOffset = CGFloat(5.0)
/// The offset this component has on the x-axis
/// **default**: 5.0 (or 0.0 on ChartYAxis)
#objc open var yOffset = CGFloat(5.0)
public override init()
{
super.init()
}
#objc open var isEnabled: Bool { return enabled }
}
To solve my problem I found out that I had to remove the xAxis line, the line inside the red rectangle.
I did it by changing attribute xAxis.drawAxisLineEnabled to false.
Then I got a whitespace area here painted in red.
To remove this space I changed attribute xAxis.yOffset to -10, this brought the xAxis labels closer to the chart.
I had to change xAxis.drawAxisLineEnabled to false because this line is not affected by xAxis.yOffset, if I did not set it to false the result would be this.
I have made a small application measuring Heart Rate from iWatch. The chart is working as intended showing current heart rate, but I have several issues with the design. Below you can find the image of my chart and its setting in swift.
ios Chart
//chart set up
self.chtChart.delegate = self as? ChartViewDelegate
self.chtChart.noDataTextColor = UIColor.white
self.chtChart.noDataText = "Press Start button to display the chart"
let set_a: LineChartDataSet = LineChartDataSet(entries:[ChartDataEntry(x: Double(Int(0)), y: self.valueHR)], label: "BPM")
set_a.drawCirclesEnabled = false
set_a.setColor(UIColor.systemPink)
set_a.drawValuesEnabled = false
set_a.lineWidth = 5.0
//remove vertical grid and labels
self.chtChart.xAxis.drawGridLinesEnabled = false
self.chtChart.rightAxis.drawLabelsEnabled = false
self.chtChart.xAxis.drawLabelsEnabled = false
//change label 'BPM' color
self.chtChart.legend.textColor = UIColor.white
//change left numbers (bpm values)
self.chtChart.leftAxis.labelTextColor = UIColor.white
//change right border line color
self.chtChart.rightAxis.axisLineColor = UIColor.white
//change left border line to white
self.chtChart.leftAxis.axisLineColor = UIColor.white
//change values from decimal to int on left axis
let fmt = NumberFormatter()
fmt.numberStyle = .decimal
fmt.maximumFractionDigits = 0
fmt.groupingSeparator = ","
fmt.decimalSeparator = "."
self.chtChart.leftAxis.valueFormatter = DefaultAxisValueFormatter.init(formatter: fmt)
self.chtChart.data = LineChartData(dataSets: [set_a])
As you can see, my chart does not have the bottom border and I also can't change the color of the grid line inside the chart (I want to change it to white). I have tried following commands but nothing was changed:
self.chtChart.xAxis.axisLineColor = UIColor.white
self.chtChart.borderColor = UIColor.white
self.chtChart.xAxis.gridColor = UIColor.white
I was going through all possible attributes and found that adding the lines:
self.chtChart.xAxis.axisLineColor = UIColor.white
self.chtChart.rightAxis.gridColor = UIColor.white
solves the problem with the bottom border and also changes the color of the grid lines to white.
Edit: the bottom line problem still appears to be an issue. It does not show on the screen.
Edit2: adding the all borders at once and setting their color seems to solve the issue:
self.chtChart.drawBordersEnabled = true
self.chtChart.borderColor = UIColor.white
I am using the 'Charts' framework for my iOS app using swift and I am using the Bar Chart on one of my VCs but it looks quite messy at the moment because it displays the value labels for every value, even if it's 0. I was wondering if it's possible to only show the labels if the value is above 0? I have been looking at other questions but I can't seem to find an answer for this. I know I can hide all of the labels using chartData.setDrawValues(false) however, I still want to display the values when they are above 0.
This is my current code to format the chart -
barChart.highlightPerTapEnabled = false
barChart.highlightPerDragEnabled = false
barChart.leftAxis.drawAxisLineEnabled = true
barChart.leftAxis.drawGridLinesEnabled = false
barChart.xAxis.labelPosition = .bottom
barChart.xAxis.centerAxisLabelsEnabled = true
barChart.xAxis.axisMinimum = 0
barChart.xAxis.axisMaximum = 7
barChart.xAxis.drawAxisLineEnabled = true
barChart.xAxis.drawGridLinesEnabled = true
barChart.rightAxis.enabled = false
barChart.leftAxis.axisMinimum = 0
I thought about doing something like this -
for value in chartDataSet.entries {
if value.y == 0 {
chartDataSet.drawValuesEnabled = false
}
else {
chartDataSet.drawValuesEnabled = true
}
}
but of course this doesn't work as it sets the boolean for the whole set.
Any help would be much appreciated!
Thanks
You just need to provide your custom IValueFormatter to BarChartData as below,
public class XValueFormatter: NSObject, IValueFormatter {
public func stringForValue(_ value: Double, entry: ChartDataEntry, dataSetIndex: Int, viewPortHandler: ViewPortHandler?) -> String {
return value <= 0.0 ? "" : String(describing: value)
}
}
let chartData = BarChartData(dataSet: yourSet)
chartData.setValueFormatter(XValueFormatter())
Note: String(describing: value) is just to provide a workable example. You can apply proper number formatter to convert Double into String.
barChartView.data?.setDrawValues(false)
// to disable the data in the bars
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am using https://github.com/danielgindi/Charts framework.
As per tutorials, we have to create an outlet for view then make it class as corresponding chart view.
So I created 4 outlets and successfully loaded charts.
I just want one outlet to be used for all the charts.
I am displaying charts in tableview. So can I reuse one view to all charts.
I tried by calling init() method. But, init() method is not available for all the charts.
Also, i tried giving frame also but failed.
Kindly help.
After you look into documentation for charts a bit more, you would probably for example if you make a line chart LineChartView() you can have different update functions to change how it looks, for example here is one of mine:
func lineChartUpdate(dataPoints: [String], values: [Double]) {
//Graph data management
var lineChartEntry = [ChartDataEntry]()
for i in 0..<prices.count {
//Graph marker from extension
if prices != [] {
let value = ChartDataEntry(x: Double(i), y: values[i])
lineChartEntry.append(value)
let line1 = LineChartDataSet(values: lineChartEntry, label: "Price")
line1.setColor(.white)
line1.drawVerticalHighlightIndicatorEnabled = false
line1.drawHorizontalHighlightIndicatorEnabled = false
line1.mode = .cubicBezier
line1.lineWidth = 2.0
line1.drawValuesEnabled = true
line1.valueTextColor = UIColor.white
line1.drawCirclesEnabled = false
chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values:self.days)
chartView.xAxis.granularity = 1
chartView.leftAxis.drawGridLinesEnabled = false
chartView.xAxis.drawGridLinesEnabled = false
//Expanded
chartView.rightAxis.enabled = false
chartView.leftAxis.enabled = false
chartView.xAxis.enabled = false
chartView.rightAxis.drawGridLinesEnabled = false
chartView.legend.enabled = false
chartView.dragEnabled = false
chartView.pinchZoomEnabled = false
chartView.drawMarkers = false
chartView.doubleTapToZoomEnabled = false
self.chartView.isUserInteractionEnabled = true
//Graph Data.
let data = LineChartData()
data.addDataSet(line1)
self.chartView.data = data
self.chartLoaded = true
}
}
}
If you want one view to be able to act as a Bar chart and a line chart, it may just be easier to have a View for each type in the same place, and you can change for example a Bar chart view to any type of bar chart you want and update it to change as much as you want reusing the view, but when you need a line chart just hide that view and use the line chart instead.