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]
}
}
