A customizable radar chart for iOS, with native UIKit and SwiftUI implementations.
English | 简体中文
- Radar (spider) charts with any number of axes, grid steps and data series
- Native UIKit view (
RadarChartView) and native SwiftUI view (RadarChart) sharing one layout core - Configurable value range, direction, grid, borders, fills and vertex dots
- Colors cycled per series, gradient fills via SwiftUI
ShapeStyle - Dark mode aware default styles, zero third-party dependencies
- iOS 15.0+
- Swift 5.9+ / Xcode 15+
Add TKRadarChart to your project with File > Add Package Dependencies… in Xcode, using the repository URL:
https://github.com/tbxark/TKRadarChart.git
Or add it to your Package.swift:
dependencies: [
.package(url: "https://github.com/tbxark/TKRadarChart.git", from: "3.0.0")
]pod 'TKRadarChart'A chart is described by a RadarChartData: the number of grid steps, one title per axis, and a value array per data series (series[dataSet][axis]).
let data = RadarChartData(steps: 5,
titles: ["Speed", "Power", "Range", "Comfort", "Price"],
series: [[4, 3, 5, 2, 3],
[3, 3, 3, 3, 3]])Values are normalized against configuration.range (the default is 0...5) and clamped to it.
import TKRadarChart
let chart = RadarChartView()
chart.data = data
view.addSubview(chart)The chart is always centered in its bounds and the drawn radius is clamped so it never overflows them, which keeps it correct under Auto Layout. Set chart.centersInBounds = false to position the chart yourself via chart.chartCenter.
import SwiftUI
import TKRadarChart
struct ContentView: View {
var body: some View {
RadarChart(data)
.frame(width: 300)
}
}Geometry and drawing switches live in RadarChartConfiguration, colors and fonts in RadarChartView.Style:
var configuration = RadarChartConfiguration.standard
configuration.radius = 120 // preferred radius, clamped to the bounds
configuration.range = 0...10
configuration.clockwise = true // lay out axes clockwise
configuration.showsGridBorders = false // no outline on the grid polygons
configuration.showsSeriesBorders = true // outline the data polygons
configuration.showsSeriesPoints = true // dots on the data polygon vertices
chart.configuration = configuration
chart.style = RadarChartView.Style(
gridColor: .systemCyan,
stepFillColors: [.cyan, .cyan.withAlphaComponent(0.5)], // innermost first, cycled
seriesFillColors: [.yellow.withAlphaComponent(0.4), .green.withAlphaComponent(0.4)],
seriesBorderColors: [.yellow, .green],
titleFont: .systemFont(ofSize: 10))The SwiftUI view reads its appearance from the environment:
RadarChart(data, configuration: RadarChartConfiguration(clockwise: true))
.radarChartStyle(RadarChartStyle(
gridColor: AnyShapeStyle(.cyan),
stepFillStyles: [AnyShapeStyle(.cyan)],
seriesFillStyles: [AnyShapeStyle(Color.yellow.opacity(0.4)), AnyShapeStyle(Color.green.opacity(0.4))],
seriesStrokeStyles: [AnyShapeStyle(.yellow), AnyShapeStyle(.green)]))Because fills and strokes accept any ShapeStyle, gradients work out of the box:
RadarChart(data)
.radarChartStyle(RadarChartStyle(
seriesFillStyles: [AnyShapeStyle(LinearGradient(colors: [.blue, .mint], startPoint: .top, endPoint: .bottom))]))Run ./Scripts/demo.sh (requires XcodeGen) to generate and open the demo project. The demo shows the same charts on a UIKit and a SwiftUI tab.
Distributed under the MIT license. See LICENSE for more information.
TBXark – @tbxark – tbxark@outlook.com