I've created a simple small chart using (https://github.com/danielgindi/Charts), where i'm trying to remove everything beside the line itself, but i can't seem to remove the bottom zero axis. i've looked through the documentation, but cannot seem to remove it?
chart
class CellChartView: UIView {
var lineChart: LineChartView!
override init(frame: CGRect) {
super.init(frame: frame)
self.lineChart = LineChartView()
lineChart.backgroundColor = Color.lightTheme.value
lineChart.translatesAutoresizingMaskIntoConstraints = false
self.lineChart.chartDescription?.text = ""
self.lineChart.isUserInteractionEnabled = false
self.lineChart.legend.enabled = false
self.lineChart.minOffset = 0
self.lineChart.drawBordersEnabled = false
self.lineChart.drawGridBackgroundEnabled = false
self.lineChart.autoScaleMinMaxEnabled = true
self.lineChart.rightAxis.enabled = false
self.lineChart.leftAxis.enabled = false
self.lineChart.leftAxis.drawAxisLineEnabled = false
self.lineChart.leftAxis.axisLineColor = UIColor.green
self.lineChart.xAxis.drawLabelsEnabled = false
self.lineChart.xAxis.drawGridLinesEnabled = false
self.lineChart.xAxis.labelPosition = .bottom
self.lineChart.xAxis.drawLimitLinesBehindDataEnabled = false
self.lineChart.xAxis.enabled = false
self.lineChart.xAxis.axisLineColor = UIColor.clear
self.addSubview(self.lineChart)
lineChart.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
lineChart.topAnchor.constraint(equalTo: self.topAnchor, constant: -1).isActive = true
lineChart.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true
lineChart.heightAnchor.constraint(equalTo: self.heightAnchor).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setChartData(values: [Double], dates: [String]) {
var yValues : [ChartDataEntry] = [ChartDataEntry]()
for i in 0 ..< dates.count {
yValues.append(ChartDataEntry(x: Double(i + 1), y: values[i]))
}
let data = LineChartData()
let ds = LineChartDataSet(values: yValues, label: "Date")
ds.drawCirclesEnabled = false
ds.lineWidth = 1
ds.drawValuesEnabled = false
if (values.first ?? 0.0 > values.last ?? 0.0) {
ds.setColor(Color.redColor.value)
} else {
ds.setColor(Color.greenColor.value)
}
data.addDataSet(ds)
data.setDrawValues(false)
self.lineChart.data = data
}
}
If you just want to hide the xAxis, then I see two ways:
You could disable the xAxis xAxis.enabled = false
Or set the xAxis line color to transparent xAxis.axisLineColor = UIColor.clear
If you want to hide the horizontal and vertical lines being drawn through the center when you have disabled all grid lines and just want an X-Axis line as shown above in your drawing
lineChartDataSet.highlightColor = NSUIColor.clear
myLineChartView.xAxis.drawAxisLineEnabled = true
myLineChartView.xAxis.drawGridLinesEnabled = false
myLineChartView.xAxis.drawLabelsEnabled = false
myLineChartView.leftAxisAxis.drawAxisLineEnabled = false
This will just hide the horizontal and vertical lines while giving you the freedom to draw a line through X-Axis or Y-Axis.
If you just want to hide background gridlines
Just do
self.chartView?.leftAxis.drawGridLinesEnabled = false
self.charView?.xAxis.drawGridLinesEnabled = false
It will remove background grids for both axis. like that
Related
I am using danielgindi
/
Charts for creating line chart. When Line chart data has same values, only the last drawn line showing. Other lines are hidden behind the last drawn line. Is there any way to show all lines.
image: 'fff' and 'User B' is hidden behind 'User C', they all have number of activities equal to zero
Line chart initialisation
func commonInit() {
guard let view = loadViewFromNib() else { return }
view.frame = self.bounds
self.addSubview(view)
lblXAxis.text = "Days"
lblYAxis.text = "Number of Activities"
lblYAxis.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)
self.roundAllCorners(radius: 6)
let valFormatter = NumberFormatter()
valFormatter.numberStyle = .none
valFormatter.maximumFractionDigits = 0
viewProgressLineChart.leftAxis.valueFormatter = DefaultAxisValueFormatter(formatter: valFormatter)
viewProgressLineChart.leftAxis.granularity = 1
viewProgressLineChart.xAxis.granularity = 1
viewProgressLineChart.xAxis.labelCount = 11
viewProgressLineChart.xAxis.avoidFirstLastClippingEnabled = false
viewProgressLineChart.xAxis.labelPosition = .bottom
viewProgressLineChart.chartDescription?.text = ""
viewProgressLineChart.xAxis.labelTextColor = UIColor.onPrimary
viewProgressLineChart.leftAxis.labelTextColor = UIColor.onPrimary
viewProgressLineChart.rightAxis.labelTextColor = UIColor.onPrimary
viewProgressLineChart.clipValuesToContentEnabled = true
viewProgressLineChart.legend.enabled = false
viewProgressLineChart.rightAxis.enabled = false
viewProgressLineChart.animate(xAxisDuration: 0.8)
}
This is how data is given to line chart,
func updateGraph(users: [User]){
let data = LineChartData()
for (index,user) in users.enumerated(){
let userColor = UIColor.selectedColors[index]
userAndStatusColorArray.append(UserAndStatusColor(name: user.name ?? "user", color: userColor))
var lineChartEntry = [ChartDataEntry]()
if user.progress != nil{
for progress in user.progress!{
let chartData = ChartDataEntry(x: Double(progress.day), y: Double(progress.activitiesCompleted!))
lineChartEntry.append(chartData)
}
let chartDataSet = LineChartDataSet(entries: lineChartEntry)
chartDataSet.colors = [userColor]
chartDataSet.circleColors = [userColor]
chartDataSet.circleRadius = 3
chartDataSet.drawValuesEnabled = false
data.addDataSet(chartDataSet)
}
}
viewPODProgressLineChart.viewProgressLineChart.data = data
}
I am using Charts library (version 3.5.0). Usually the chart is drawn without issue but randomly the app crashes with the following XCode Crash stack screenshot and Crashlytics stack trace screenshot
Class with chart view
class ChartContainerView: UIView {
#IBOutlet var contentView: UIView!
#IBOutlet weak var chartView: CustomLineChartView!
var chartData: LineChartDataSet?
struct TickData: Codable {
let price: Double
let time: Int
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
private func commonInit() {
Bundle.main.loadNibNamed("ChartContainerView", owner: self, options: nil)
addSubview(contentView)
contentView.frame = self.bounds
contentView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
chartView.resetChart()
}
func drawChart(withData tickArray: [TickData]) {
chartView.resetChart()
var entries = [ChartDataEntry]()
for (i, tick) in tickArray.enumerated() {
entries.append(ChartDataEntry(x: Double(i), y: tick.price))
}
chartData = LineChartDataSet(entries: entries)
let xValueCount = Double(chartData!.count)
chartView.xAxis.axisMaximum = xValueCount
chartView.setVisibleXRangeMaximum(60.0 * 5)
chartView.setVisibleXRangeMinimum(60.0 * 5)
chartView.setVisibleXRange(minXRange: 5, maxXRange: 2000)
chartView.data = createLineData(lineDataSet: chartData)
chartView.moveViewToX(xValueCount)
chartView.animate(xAxisDuration: 0.5)
}
func createLineData(lineDataSet: LineChartDataSet) -> LineChartData {
lineDataSet.mode = .cubicBezier
lineDataSet.drawCirclesEnabled = true
lineDataSet.circleRadius = 2
lineDataSet.drawCircleHoleEnabled = false
lineDataSet.axisDependency = .right
lineDataSet.lineWidth = 1
lineDataSet.fillAlpha = 0
lineDataSet.highlightLineWidth = 0.3
lineDataSet.drawValuesEnabled = false
lineDataSet.drawFilledEnabled = false
return LineChartData(dataSet: lineDataSet)
}
//This method is called on a background thread
func updateChart(withData tickArray: [TickData]) {
let count = chartData!.count
for (i, tick) in tickArray.enumerated() {
let entry = ChartDataEntry(x: Double(count + i), y: tick.price))
chartData?.append(entry)
}
DispatchQueue.main.async(execute: {
chartView.data?.notifyDataChanged()
chartView.notifyDataSetChanged()
})
}
}
Custom LineChartView
class CustomLineChartView: LineChartView {
override func initialize() {
super.initialize()
renderer = CustomLineChartRenderer(dataProvider: self, animator: _animator, viewPortHandler: _viewPortHandler)
chartDescription?.enabled = false
dragYEnabled = false
scaleYEnabled = false
pinchZoomEnabled = false
doubleTapToZoomEnabled = false
drawGridBackgroundEnabled = false
dragDecelerationFrictionCoef = 0.0
highlightPerTapEnabled = false
autoScaleMinMaxEnabled = true
highlightPerDragEnabled = false
noDataText = ""
leftAxis.enabled = false
legend.enabled = false
dragXEnabled = true
scaleXEnabled = false
xAxis.labelCount = 5
xAxis.labelPosition = .bottom
xAxis.drawAxisLineEnabled = false
xAxis.drawGridLinesEnabled = false
xAxis.granularityEnabled = true
xAxis.granularity = 1.0
rightAxis.labelCount = 5
rightAxis.labelPosition = .outsideChart
rightAxis.drawAxisLineEnabled = false
rightAxis.drawGridLinesEnabled = false
rightAxis.granularityEnabled = true
rightAxis.centerAxisLabelsEnabled = true
rightAxis.granularity = 1.0
rightAxis.drawLimitLinesBehindDataEnabled = false
}
func resetChart() {
clearAllViewportJobs()
removeAnimation()
clearValues()
clear()
data = nil
rightAxis.customYMax = 0
rightAxis.customYMin = 0
zoom(scaleX: 0, scaleY: 0, x: 0, y: 0)
}
}
As this is random, I am unable to find why the entries object's address is corrupted in ChartDataSet.swift
I'm using the Charts library and am trying to replicate this design:
I'm sort of getting there, but the chart is rendering itself way too small:
I'm expecting the chart to fill the entire width of the screen, and use all the vertical space. To be clear: the RadarChartView is the width of the entire black area, and the entire vertical space right up to the legend (which is not part of the chart view itself).
Any ideas?
This is the table cell code that shows the chart:
import Charts
import UIKit
final class ReportSpiderChart: UITableViewCell {
private let labels = ["ARTISTS", "TRACKS", "ALBUMS"]
#IBOutlet private var chartView: RadarChartView!
override func awakeFromNib() {
super.awakeFromNib()
chartView.webLineWidth = 1
chartView.innerWebLineWidth = 1
chartView.webColor = .init(hex: "28282A")
chartView.innerWebColor = .init(hex: "28282A")
chartView.legend.enabled = false
let xAxis = chartView.xAxis
xAxis.labelFont = .systemFont(ofSize: 11, weight: .semibold)
xAxis.xOffset = 0
xAxis.yOffset = 0
xAxis.labelTextColor = .init(hex: "919198")
xAxis.valueFormatter = self
let yAxis = chartView.yAxis
yAxis.labelCount = 3
yAxis.labelFont = .systemFont(ofSize: 11, weight: .semibold)
yAxis.labelTextColor = .init(hex: "919198")
yAxis.axisMinimum = 0
yAxis.drawLabelsEnabled = false
}
func configure(data: ReportData) {
let entries: [RadarChartDataEntry] = [
.init(value: Double(data.artists)),
.init(value: Double(data.tracks)),
.init(value: Double(data.albums)),
]
chartView.yAxis.axisMaximum = Double(max(max(data.artists, data.tracks), data.albums))
let dataSet = RadarChartDataSet(entries: entries)
dataSet.fillColor = UIColor(hex: "FA4B4B").withAlphaComponent(0.75)
dataSet.fillAlpha = 0.75
dataSet.drawFilledEnabled = true
dataSet.lineWidth = 0
dataSet.drawHighlightCircleEnabled = false
dataSet.setDrawHighlightIndicators(false)
let data = RadarChartData(dataSets: [dataSet])
data.setDrawValues(false)
chartView.data = data
}
}
extension ReportSpiderChart: IAxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
return labels[Int(value) % labels.count]
}
}
It seems that their is a spaceTop and spaceBottom property on axis, did you try to set them to 0 on both axis ?
https://github.com/danielgindi/Charts/blob/1bbec78109c7842d130d53ff8811bb6dbe865ba4/Source/Charts/Components/YAxis.swift#L72
I am trying to setup a line chart with one fill colour but for some reason, the fill colour is faded.
Example
Both the random view I have added to middle of screen and the fill colour of the line chart are set to be red, but for some reason the fill colour of the chart is faded.
Can see code here
#IBOutlet var liveChart : LineChartView!
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Chart Tests"
configureChart(chart: liveChart)
var xAxis = [String]()
var yAxis = [Double]()
for _ in 0..<10
{
xAxis.append("")
let yVal = Double(randomBetweenNumbers(firstNum: 1.0, secondNum: 100.0))
yAxis.append(yVal)
}
setData(xAxisArray: xAxis, yAxisArray: yAxis, chart: liveChart)
let testView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
testView.center = view.center
testView.backgroundColor = UIColor.red
view.addSubview(testView)
}
func randomBetweenNumbers(firstNum: CGFloat, secondNum: CGFloat) -> CGFloat{
return CGFloat(arc4random()) / CGFloat(UINT32_MAX) * abs(firstNum - secondNum) + min(firstNum, secondNum)
}
func configureChart(chart : LineChartView)
{
chart.chartDescription?.text = ""
chart.noDataText = "Loading Data"
chart.backgroundColor = UIColor.clear
chart.drawGridBackgroundEnabled = false
chart.dragEnabled = true
chart.rightAxis.enabled = false
chart.leftAxis.enabled = true
chart.doubleTapToZoomEnabled = false
chart.legend.enabled = false
chart.pinchZoomEnabled = true
chart.highlightPerTapEnabled = false
chart.highlightPerDragEnabled = false
chart.xAxis.enabled = false
chart.leftAxis.drawAxisLineEnabled = false
chart.leftAxis.drawGridLinesEnabled = false
chart.leftAxis.labelCount = 5
chart.leftAxis.forceLabelsEnabled = true
}
func setData(xAxisArray : [String], yAxisArray : [Double], chart : LineChartView)
{
var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
if(xAxisArray.count > 0)
{
for i in 0 ..< xAxisArray.count
{
let chartEntry = ChartDataEntry(x: Double(i), y: yAxisArray[i], data: nil)
yVals1.append(chartEntry)
}
}
let set1: LineChartDataSet = LineChartDataSet(values: yVals1, label: "")
set1.fillColor = UIColor.red
set1.drawFilledEnabled = true
set1.drawCirclesEnabled = false
let data = LineChartData()
data.addDataSet(set1)
liveChart.data = data
}
Is there a way to fix this? Or is this just the way the fill colour of the chart works?
Edit:
I am using
https://github.com/danielgindi/Charts
I assume you use this library: https://github.com/kevinbrewster/SwiftCharts
So the LineChartView automatically set alpha for the fill color: https://github.com/kevinbrewster/SwiftCharts/blob/master/SwiftCharts/LineChart.swift#L758
try to set fillAlpha property of the data set
I have a generated chart. I'm trying to make it as simple as possible, thus removing all the unneeded lines, grids, labels etc. I can't get rid of the separator line between the bars and the top and right border lines, as you can see on the picture. I'm using HorizontalBarChart.
Also, here you can see my chart setup code, I tried to disable literally everything:
private func setupCharts(selectedHero: Int) {
classWinrateChart.descriptionText = ""
classWinrateChart.legend.enabled = false
classWinrateChart.drawBordersEnabled = false
classWinrateChart.drawMarkers = false
classWinrateChart.drawValueAboveBarEnabled = false
let chartDataSet = BarChartDataSet(yVals: dataSource, label: "Noaaah")
let chartData = BarChartData(xVals: ["", "", "", "", "", "", "", "", "", ""], dataSet: chartDataSet)
let color = constants.colors[selectedHero]
chartDataSet.colors = [color]
chartDataSet.valueFont = UIFont.systemFontOfSize(13)
//chartDataSet.drawValuesEnabled = false
let yAxis = classWinrateChart.leftAxis
let xAxis = classWinrateChart.rightAxis
yAxis.enabled = false
yAxis.drawLabelsEnabled = false
yAxis.drawAxisLineEnabled = false
yAxis.drawGridLinesEnabled = false
xAxis.enabled = false
xAxis.drawLabelsEnabled = false
xAxis.drawAxisLineEnabled = false
xAxis.drawGridLinesEnabled = false
classWinrateChart.rightAxis.enabled = false
yAxis.axisMaxValue = 100
yAxis.axisMinValue = 0
classWinrateChart.tintColor = colors[selectedHero]
classWinrateChart.drawGridBackgroundEnabled = false
classWinrateChart.data = chartData
}
This may help you :
var viwBar = BarChartView()
viwBar.leftAxis.drawGridLinesEnabled = false
viwBar.rightAxis.drawGridLinesEnabled = false
viwBar.xAxis.drawGridLinesEnabled = false
viwBar.drawGridBackgroundEnabled = false
//removes left and right axis representation
let yaxis = viwBar.getAxis(ChartYAxis.AxisDependency.Left)
yaxis.drawLabelsEnabled = false
yaxis.enabled = false
let xaxis = viwBar.getAxis(ChartYAxis.AxisDependency.Right)
xaxis.drawLabelsEnabled = false
xaxis.enabled = false
check your code, Is it like ?
let xAxis = classWinrateChart.rightAxis
classWinrateChart.rightAxis is rightAxis, not xAxis.