# TKRadarChart

> A customizable radar chart for iOS, with native UIKit and SwiftUI implementations.

**English** | [简体中文](README.zh-CN.md)

![iOS 15.0+](https://img.shields.io/badge/iOS-15.0%2B-blue.svg)
![Swift 6](https://img.shields.io/badge/Swift-6-orange.svg)
![Swift Package Manager compatible](https://img.shields.io/badge/SPM-compatible-4BC51D.svg?style=flat)
[![License MIT](https://img.shields.io/badge/license-MIT-green.svg?style=flat)](https://raw.githubusercontent.com/TBXark/TKRadarChart/master/LICENSE)

![](DemoImage/example.png)

## Features

- 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

## Requirements

- iOS 15.0+
- Swift 5.9+ / Xcode 15+

## Installation

### Swift Package Manager

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`:

```swift
dependencies: [
    .package(url: "https://github.com/tbxark/TKRadarChart.git", from: "3.0.0")
]
```

### CocoaPods

```ruby
pod 'TKRadarChart'
```

## Usage

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]`).

```swift
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.

### UIKit

```swift
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`.

### SwiftUI

```swift
import SwiftUI
import TKRadarChart

struct ContentView: View {
    var body: some View {
        RadarChart(data)
            .frame(width: 300)
    }
}
```

## Customization

### UIKit

Geometry and drawing switches live in `RadarChartConfiguration`, colors and fonts in `RadarChartView.Style`:

```swift
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))
```

### SwiftUI

The SwiftUI view reads its appearance from the environment:

```swift
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:

```swift
RadarChart(data)
    .radarChartStyle(RadarChartStyle(
        seriesFillStyles: [AnyShapeStyle(LinearGradient(colors: [.blue, .mint], startPoint: .top, endPoint: .bottom))]))
```

## Demo

Run `./Scripts/demo.sh` (requires [XcodeGen](https://github.com/yonaskolb/XcodeGen)) to generate and open the demo project. The demo shows the same charts on a UIKit and a SwiftUI tab.

## License

Distributed under the MIT license. See `LICENSE` for more information.

## Meta

TBXark – [@tbxark](https://twitter.com/tbxark) – tbxark@outlook.com

[https://github.com/TBXark](https://github.com/TBXark)