TKRadarChart
TKRadarChart copied to clipboard
Chart is too small and not centered?

I expect the chart to fill the entire space within the white border, and that it's centered?
Code:
import Reusable
import TKRadarChart
import UIKit
final class ReportSpiderChart: UITableViewCell, Reusable, NibLoadable {
let labels = ["ARTISTS", "TRACKS", "ALBUMS"]
@IBOutlet private var chartView: TKRadarChart!
private var data: ReportData?
override func awakeFromNib() {
super.awakeFromNib()
chartView.configuration.borderWidth = 1
chartView.dataSource = self
chartView.delegate = self
chartView.layer.borderWidth = 1
chartView.layer.borderColor = UIColor.white.cgColor
}
func configure(data: ReportData) {
self.data = data
chartView.configuration.maxValue = CGFloat(max(data.artists, data.albums, data.tracks, data.previousArtists, data.previousAlbums, data.previousTracks))
chartView.reloadData()
}
}
extension ReportSpiderChart: TKRadarChartDataSource {
func numberOfStepForRadarChart(_ radarChart: TKRadarChart) -> Int {
return 3
}
func numberOfRowForRadarChart(_ radarChart: TKRadarChart) -> Int {
return 3
}
func numberOfSectionForRadarChart(_ radarChart: TKRadarChart) -> Int {
return 2
}
func titleOfRowForRadarChart(_ radarChart: TKRadarChart, row: Int) -> String {
return labels[row]
}
func valueOfSectionForRadarChart(withRow row: Int, section: Int) -> CGFloat {
guard let data = data else {
return 0
}
if row == 0 {
return CGFloat(section == 0 ? data.artists : data.previousArtists)
}
if row == 1 {
return CGFloat(section == 0 ? data.albums : data.previousAlbums)
}
if row == 2 {
return CGFloat(section == 0 ? data.tracks : data.previousTracks)
}
return 0
}
}
extension ReportSpiderChart: TKRadarChartDelegate {
func colorOfLineForRadarChart(_ radarChart: TKRadarChart) -> UIColor {
return .reportDivider
}
func colorOfFillStepForRadarChart(_ radarChart: TKRadarChart, step: Int) -> UIColor {
return .black
}
func colorOfSectionFillForRadarChart(_ radarChart: TKRadarChart, section: Int) -> UIColor {
return section == 0 ? UIColor.reportRed.withAlphaComponent(0.75) : UIColor.reportChartInactive.withAlphaComponent(0.75)
}
func fontOfTitleForRadarChart(_ radarChart: TKRadarChart) -> UIFont {
return .systemFont(ofSize: 11, weight: .semibold)
}
func colorOfTitleForRadarChart(_ radarChart: TKRadarChart) -> UIColor {
return .reportGrayText
}
}
By manually adjusting chartView.configuration.radius
and chartView.centerPoint
I can get it to look how I want it to, but it seems weird this needs to be done manually.

This is with
chartView.configuration.radius = 140
chartView.centerPoint = CGPoint(x: (chartView.frame.width / 2) - 18, y: 156)