【Swift】ChartsをSwiftUIで使う

# はじめに
Qiitaのネタも尽きてきたので新シリーズを開始しようと思います。
題して「UIKitで書かれたライブラリをSwiftUIで使うシリーズ」

本シリーズ最初のライブラリは「[Charts](https://github.com/danielgindi/Charts)」です！
Chartsはグラフの描写ライブラリです

# 実装
### Line Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ebbddc19-9bc6-b134-a289-bc9fe8ade2b0.png">

```LineChart1.swift
import SwiftUI
import Charts

struct LineChart1: UIViewRepresentable {
    @Environment(\.colorScheme) var colorScheme
    func makeUIView(context: Context) -> LineChartView {
        let chartView = LineChartView()

        chartView.chartDescription?.enabled = false
        chartView.dragEnabled = true
        chartView.setScaleEnabled(true)
        chartView.pinchZoomEnabled = true

        let llXAxis = ChartLimitLine(limit: 10, label: "Index 10")
        llXAxis.lineWidth = 4
        llXAxis.lineDashLengths = [10, 10, 0]
        llXAxis.labelPosition = .bottomRight
        llXAxis.valueFont = .systemFont(ofSize: 10)

        chartView.xAxis.gridLineDashLengths = [10, 10]
        chartView.xAxis.gridLineDashPhase = 0

        let ll1 = ChartLimitLine(limit: 150, label: "Upper Limit")
        ll1.lineWidth = 4
        ll1.lineDashLengths = [5, 5]
        ll1.labelPosition = .topRight
        ll1.valueFont = .systemFont(ofSize: 10)

        let ll2 = ChartLimitLine(limit: -30, label: "Lower Limit")
        ll2.lineWidth = 4
        ll2.lineDashLengths = [5,5]
        ll2.labelPosition = .bottomRight
        ll2.valueFont = .systemFont(ofSize: 10)

        let leftAxis = chartView.leftAxis
        leftAxis.removeAllLimitLines()
        leftAxis.addLimitLine(ll1)
        leftAxis.addLimitLine(ll2)
        leftAxis.axisMaximum = 200
        leftAxis.axisMinimum = -50
        leftAxis.gridLineDashLengths = [5, 5]
        leftAxis.drawLimitLinesBehindDataEnabled = true

        chartView.rightAxis.enabled = false

        chartView.legend.form = .line

        chartView.data = setDataCount(40, range: 100)

        chartView.animate(xAxisDuration: 2.5)

        return chartView
    }
    func updateUIView(_ uiView: LineChartView, context: Context) {
    }
    func setDataCount(_ count: Int, range: UInt32) -> LineChartData {
        let values = (0..<count).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(range) + 3)
            return ChartDataEntry(x: Double(i), y: val)
        }

        let set1 = LineChartDataSet(entries: values, label: "DataSet 1")
        set1.drawIconsEnabled = false

        setup(set1)

        let gradientColors = [
            ChartColorTemplates.colorFromString("#00ff0000").cgColor,
            ChartColorTemplates.colorFromString("#ffff0000").cgColor
        ]

        let gradient = CGGradient(colorsSpace: nil, colors: gradientColors as CFArray, locations: nil)!

        set1.fillAlpha = 1
        set1.fill = Fill(linearGradient: gradient, angle: 90)

        set1.drawFilledEnabled = true

        let data = LineChartData(dataSet: set1)

        return data
    }
    private func setup(_ dataSet: LineChartDataSet) {
        if dataSet.isDrawFilledEnabled {
            dataSet.lineDashLengths = nil
            dataSet.highlightLineDashLengths = nil
            dataSet.setColors(colorScheme == .dark ? .white : .black, .red, colorScheme == .dark ? .black : .white)
            dataSet.setCircleColor(colorScheme == .dark ? .white : .black)
            dataSet.lineWidth = 1
            dataSet.circleRadius = 3
            dataSet.drawCircleHoleEnabled = false
            dataSet.valueFont = .systemFont(ofSize: 9)
            dataSet.formLineDashLengths = nil
            dataSet.formLineWidth = 1
            dataSet.formSize = 15
        } else {
            dataSet.lineDashLengths = [5, 2.5]
            dataSet.highlightLineDashLengths = [5, 2.5]
            dataSet.setColor(colorScheme == .dark ? .white : .black)
            dataSet.setCircleColor(colorScheme == .dark ? .white : .black)
            dataSet.lineWidth = 1
            dataSet.circleRadius = 3
            dataSet.drawCircleHoleEnabled = false
            dataSet.valueFont = .systemFont(ofSize: 9)
            dataSet.formLineDashLengths = [5, 2.5]
            dataSet.formLineWidth = 1
            dataSet.formSize = 15
        }
    }
}
```
### Line Chart (Dual YAxis)
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/b6aee941-99f9-b6a8-a1d0-7a3355941d39.png">

```LineChart2.swift
import SwiftUI
import Charts

struct LineChart2: UIViewRepresentable {
    @Environment(\.colorScheme) var colorScheme
    func makeUIView(context: Context) -> LineChartView {
        let chartView = LineChartView()

        chartView.chartDescription?.enabled = false
        chartView.dragEnabled = true
        chartView.setScaleEnabled(true)
        chartView.pinchZoomEnabled = true

        let l = chartView.legend
        l.form = .line
        l.font = UIFont(name: "HelveticaNeue-Light", size: 11)!
        l.textColor = colorScheme == .dark ? .white : .black
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false

        let xAxis = chartView.xAxis
        xAxis.labelFont = .systemFont(ofSize: 11)
        xAxis.labelTextColor = colorScheme == .dark ? .white : .black
        xAxis.drawAxisLineEnabled = false

        let leftAxis = chartView.leftAxis
        leftAxis.labelTextColor = UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 1)
        leftAxis.axisMaximum = 200
        leftAxis.axisMinimum = 0
        leftAxis.drawGridLinesEnabled = true
        leftAxis.granularityEnabled = true

        let rightAxis = chartView.rightAxis
        rightAxis.labelTextColor = .red
        rightAxis.axisMaximum = 900
        rightAxis.axisMinimum = -200
        rightAxis.granularityEnabled = false

        chartView.data = setDataCount(20, range: 30)

        chartView.animate(xAxisDuration: 2.5)

        return chartView
    }
    func updateUIView(_ uiView: LineChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> LineChartData {
        let yVals1 = (0..<count).map { (i) -> ChartDataEntry in
            let mult = range / 2
            let val = Double(arc4random_uniform(mult) + 50)
            return ChartDataEntry(x: Double(i), y: val)
        }
        let yVals2 = (0..<count).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(range) + 450)
            return ChartDataEntry(x: Double(i), y: val)
        }
        let yVals3 = (0..<count).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(range) + 500)
            return ChartDataEntry(x: Double(i), y: val)
        }

        let set1 = LineChartDataSet(entries: yVals1, label: "DataSet 1")
        set1.axisDependency = .left
        set1.setColor(UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 1))
        set1.setCircleColor(colorScheme == .dark ? .white : .black)
        set1.lineWidth = 2
        set1.circleRadius = 3
        set1.fillAlpha = 65/255
        set1.fillColor = UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 1)
        set1.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
        set1.drawCircleHoleEnabled = false

        let set2 = LineChartDataSet(entries: yVals2, label: "DataSet 2")
        set2.axisDependency = .right
        set2.setColor(.red)
        set2.setCircleColor(colorScheme == .dark ? .white : .black)
        set2.lineWidth = 2
        set2.circleRadius = 3
        set2.fillAlpha = 65/255
        set2.fillColor = .red
        set2.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
        set2.drawCircleHoleEnabled = false

        let set3 = LineChartDataSet(entries: yVals3, label: "DataSet 3")
        set3.axisDependency = .right
        set3.setColor(.yellow)
        set3.setCircleColor(colorScheme == .dark ? .white : .black)
        set3.lineWidth = 2
        set3.circleRadius = 3
        set3.fillAlpha = 65/255
        set3.fillColor = UIColor.yellow.withAlphaComponent(200/255)
        set3.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
        set3.drawCircleHoleEnabled = false

        let data: LineChartData = LineChartData(dataSets: [set1, set2, set3])
        data.setValueTextColor(colorScheme == .dark ? .white : .black)
        data.setValueFont(.systemFont(ofSize: 9))

        return data
    }
}
```
### Bar Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/19013f79-059a-6262-5188-67de5edb40b8.png">

```BarChart.swift
import SwiftUI
import Charts

struct BarChart: UIViewRepresentable {
    func makeUIView(context: Context) -> BarChartView {
        let chartView = BarChartView()

        chartView.drawBarShadowEnabled = false
        chartView.drawValueAboveBarEnabled = false

        chartView.maxVisibleCount = 60

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .bottom
        xAxis.labelFont = .systemFont(ofSize: 10)
        xAxis.granularity = 1
        xAxis.labelCount = 7

        let leftAxisFormatter = NumberFormatter()
        leftAxisFormatter.minimumFractionDigits = 0
        leftAxisFormatter.maximumFractionDigits = 1
        leftAxisFormatter.negativeSuffix = " $"
        leftAxisFormatter.positiveSuffix = " $"

        let leftAxis = chartView.leftAxis
        leftAxis.labelFont = .systemFont(ofSize: 10)
        leftAxis.labelCount = 8
        leftAxis.valueFormatter = DefaultAxisValueFormatter(formatter: leftAxisFormatter)
        leftAxis.labelPosition = .outsideChart
        leftAxis.spaceTop = 0.15
        leftAxis.axisMinimum = 0 // FIXME: HUH?? this replaces startAtZero = YES

        let rightAxis = chartView.rightAxis
        rightAxis.enabled = true
        rightAxis.labelFont = .systemFont(ofSize: 10)
        rightAxis.labelCount = 8
        rightAxis.valueFormatter = leftAxis.valueFormatter
        rightAxis.spaceTop = 0.15
        rightAxis.axisMinimum = 0

        let l = chartView.legend
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false
        l.form = .circle
        l.formSize = 9
        l.font = UIFont(name: "HelveticaNeue-Light", size: 11)!
        l.xEntrySpace = 4

        chartView.data = setDataCount(14, range: 50)

        chartView.animate(yAxisDuration: 3.0)

        return chartView
    }
    func updateUIView(_ uiView: BarChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> BarChartData {
        let start = 1

        let yVals = (start..<start+count+1).map { (i) -> BarChartDataEntry in
            let mult = range + 1
            let val = Double(arc4random_uniform(mult))
            if arc4random_uniform(100) < 25 {
                return BarChartDataEntry(x: Double(i), y: val, icon: UIImage(named: "icon"))
            } else {
                return BarChartDataEntry(x: Double(i), y: val)
            }
        }

        var set1: BarChartDataSet! = nil
        set1 = BarChartDataSet(entries: yVals, label: "The year 2017")
        set1.colors = ChartColorTemplates.material()
        set1.drawValuesEnabled = false

        let data = BarChartData(dataSet: set1)
        data.setValueFont(UIFont(name: "HelveticaNeue-Light", size: 10)!)
        data.barWidth = 0.9

        return data
    }
}
```
### Horizontal Bar Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/a91929ba-ad36-fb38-d70d-d56e77cb9e24.png">

```HorizontalBarChart.swift
import SwiftUI
import Charts

struct HorizontalBarChart: UIViewRepresentable {
    func makeUIView(context: Context) -> HorizontalBarChartView {
        let chartView = HorizontalBarChartView()

        chartView.drawBarShadowEnabled = false
        chartView.drawValueAboveBarEnabled = true

        chartView.maxVisibleCount = 60

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .bottom
        xAxis.labelFont = .systemFont(ofSize: 10)
        xAxis.drawAxisLineEnabled = true
        xAxis.granularity = 10

        let leftAxis = chartView.leftAxis
        leftAxis.labelFont = .systemFont(ofSize: 10)
        leftAxis.drawAxisLineEnabled = true
        leftAxis.drawGridLinesEnabled = true
        leftAxis.axisMinimum = 0

        let rightAxis = chartView.rightAxis
        rightAxis.enabled = true
        rightAxis.labelFont = .systemFont(ofSize: 10)
        rightAxis.drawAxisLineEnabled = true
        rightAxis.axisMinimum = 0

        let l = chartView.legend
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false
        l.form = .square
        l.formSize = 8
        l.font = UIFont(name: "HelveticaNeue-Light", size: 11)!
        l.xEntrySpace = 4

        chartView.fitBars = true

        chartView.data = setDataCount(12, range: 50)

        chartView.animate(yAxisDuration: 2.5)

        return chartView
    }
    func updateUIView(_ uiView: HorizontalBarChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> BarChartData {
        let barWidth = 9.0
        let spaceForBar = 10.0

        let yVals = (0..<count).map { (i) -> BarChartDataEntry in
            let mult = range + 1
            let val = Double(arc4random_uniform(mult))
            return BarChartDataEntry(x: Double(i)*spaceForBar, y: val, icon: #imageLiteral(resourceName: "icon"))
        }

        let set1 = BarChartDataSet(entries: yVals, label: "DataSet")
        set1.drawIconsEnabled = false

        let data = BarChartData(dataSet: set1)
        data.setValueFont(UIFont(name:"HelveticaNeue-Light", size:10)!)
        data.barWidth = barWidth

        return data
    }
}
```
### Combined Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/e1c26f4c-6261-7e07-15a9-41bd2ecfc965.png">

```CombinedChart.swift
import SwiftUI
import Charts

private let ITEM_COUNT = 12

struct CombinedChart: UIViewRepresentable {
    func makeUIView(context: Context) -> CombinedChartView {
        let chartView = CombinedChartView()

        chartView.chartDescription?.enabled = false

        chartView.drawBarShadowEnabled = false
        chartView.highlightFullBarEnabled = false

        let l = chartView.legend
        l.wordWrapEnabled = true
        l.horizontalAlignment = .center
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false

        let rightAxis = chartView.rightAxis
        rightAxis.axisMinimum = 0

        let leftAxis = chartView.leftAxis
        leftAxis.axisMinimum = 0

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .bothSided
        xAxis.axisMinimum = 0
        xAxis.granularity = 1

        chartView.data = setDataCount()

        return chartView
    }
    func updateUIView(_ uiView: CombinedChartView, context: Context) {
    }

    func setDataCount() -> CombinedChartData {
        let data = CombinedChartData()
        data.lineData = generateLineData()
        data.barData = generateBarData()
        data.bubbleData = generateBubbleData()
        data.scatterData = generateScatterData()
        data.candleData = generateCandleData()

        return data
    }
    func generateLineData() -> LineChartData {
        let entries = (0..<ITEM_COUNT).map { (i) -> ChartDataEntry in
            return ChartDataEntry(x: Double(i) + 0.5, y: Double(arc4random_uniform(15) + 5))
        }

        let set = LineChartDataSet(entries: entries, label: "Line DataSet")
        set.setColor(UIColor(red: 240/255, green: 238/255, blue: 70/255, alpha: 1))
        set.lineWidth = 2.5
        set.setCircleColor(UIColor(red: 240/255, green: 238/255, blue: 70/255, alpha: 1))
        set.circleRadius = 5
        set.circleHoleRadius = 2.5
        set.fillColor = UIColor(red: 240/255, green: 238/255, blue: 70/255, alpha: 1)
        set.mode = .cubicBezier
        set.drawValuesEnabled = true
        set.valueFont = .systemFont(ofSize: 10)
        set.valueTextColor = UIColor(red: 240/255, green: 238/255, blue: 70/255, alpha: 1)

        set.axisDependency = .left

        return LineChartData(dataSet: set)
    }

    func generateBarData() -> BarChartData {
        let entries1 = (0..<ITEM_COUNT).map { _ -> BarChartDataEntry in
            return BarChartDataEntry(x: 0, y: Double(arc4random_uniform(25) + 25))
        }
        let entries2 = (0..<ITEM_COUNT).map { _ -> BarChartDataEntry in
            return BarChartDataEntry(x: 0, yValues: [Double(arc4random_uniform(13) + 12), Double(arc4random_uniform(13) + 12)])
        }

        let set1 = BarChartDataSet(entries: entries1, label: "Bar 1")
        set1.setColor(UIColor(red: 60/255, green: 220/255, blue: 78/255, alpha: 1))
        set1.valueTextColor = UIColor(red: 60/255, green: 220/255, blue: 78/255, alpha: 1)
        set1.valueFont = .systemFont(ofSize: 10)
        set1.axisDependency = .left

        let set2 = BarChartDataSet(entries: entries2, label: "")
        set2.stackLabels = ["Stack 1", "Stack 2"]
        set2.colors = [UIColor(red: 61/255, green: 165/255, blue: 255/255, alpha: 1),
                       UIColor(red: 23/255, green: 197/255, blue: 255/255, alpha: 1)
        ]
        set2.valueTextColor = UIColor(red: 61/255, green: 165/255, blue: 255/255, alpha: 1)
        set2.valueFont = .systemFont(ofSize: 10)
        set2.axisDependency = .left

        let groupSpace = 0.06
        let barSpace = 0.02 // x2 dataset
        let barWidth = 0.45 // x2 dataset
        // (0.45 + 0.02) * 2 + 0.06 = 1.00 -> interval per "group"

        let data: BarChartData = BarChartData(dataSets: [set1, set2])
        data.barWidth = barWidth

        // make this BarData object grouped
        data.groupBars(fromX: 0, groupSpace: groupSpace, barSpace: barSpace)

        return data
    }

    func generateScatterData() -> ScatterChartData {
        let entries = stride(from: 0.0, to: Double(ITEM_COUNT), by: 0.5).map { (i) -> ChartDataEntry in
            return ChartDataEntry(x: i+0.25, y: Double(arc4random_uniform(10) + 55))
        }

        let set = ScatterChartDataSet(entries: entries, label: "Scatter DataSet")
        set.colors = ChartColorTemplates.material()
        set.scatterShapeSize = 4.5
        set.drawValuesEnabled = false
        set.valueFont = .systemFont(ofSize: 10)

        return ScatterChartData(dataSet: set)
    }

    func generateCandleData() -> CandleChartData {
        let entries = stride(from: 0, to: ITEM_COUNT, by: 2).map { (i) -> CandleChartDataEntry in
            return CandleChartDataEntry(x: Double(i+1), shadowH: 90, shadowL: 70, open: 85, close: 75)
        }

        let set = CandleChartDataSet(entries: entries, label: "Candle DataSet")
        set.setColor(UIColor(red: 80/255, green: 80/255, blue: 80/255, alpha: 1))
        set.decreasingColor = UIColor(red: 142/255, green: 150/255, blue: 175/255, alpha: 1)
        set.shadowColor = .darkGray
        set.valueFont = .systemFont(ofSize: 10)
        set.drawValuesEnabled = false

        return CandleChartData(dataSet: set)
    }

    func generateBubbleData() -> BubbleChartData {
        let entries = (0..<ITEM_COUNT).map { (i) -> BubbleChartDataEntry in
            return BubbleChartDataEntry(x: Double(i) + 0.5,
                                        y: Double(arc4random_uniform(10) + 105),
                                        size: CGFloat(arc4random_uniform(50) + 105))
        }

        let set = BubbleChartDataSet(entries: entries, label: "Bubble DataSet")
        set.setColors(ChartColorTemplates.vordiplom(), alpha: 1)
        set.valueTextColor = .white
        set.valueFont = .systemFont(ofSize: 10)
        set.drawValuesEnabled = true

        return BubbleChartData(dataSet: set)
    }
}
```
### Pie Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/0101b304-f195-8064-c840-d17b0c920119.png">

```PieChart.swift
import SwiftUI
import Charts

private let parties = [
    "Party A", "Party B", "Party C", "Party D", "Party E", "Party F",
    "Party G", "Party H", "Party I", "Party J", "Party K", "Party L",
    "Party M", "Party N", "Party O", "Party P", "Party Q", "Party R",
    "Party S", "Party T", "Party U", "Party V", "Party W", "Party X",
    "Party Y", "Party Z"
]

struct PieChart: UIViewRepresentable {
    func makeUIView(context: Context) -> PieChartView {
        let chartView = PieChartView()

        let l = chartView.legend
        l.horizontalAlignment = .right
        l.verticalAlignment = .top
        l.orientation = .vertical
        l.xEntrySpace = 7
        l.yEntrySpace = 0
        l.yOffset = 0

        chartView.entryLabelColor = .black
        chartView.entryLabelFont = .systemFont(ofSize: 12, weight: .light)

        chartView.data = setDataCount(4, range: 100)

        chartView.animate(xAxisDuration: 1.4, easingOption: .easeOutBack)

        return chartView
    }
    func updateUIView(_ uiView: PieChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> PieChartData {
        let entries = (0..<count).map { (i) -> PieChartDataEntry in
            // IMPORTANT: In a PieChart, no values (Entry) should have the same xIndex (even if from different DataSets), since no values can be drawn above each other.
            return PieChartDataEntry(value: Double(arc4random_uniform(range) + range / 5),
                                     label: parties[i % parties.count],
                                     icon: #imageLiteral(resourceName: "icon"))
        }

        let set = PieChartDataSet(entries: entries, label: "Election Results")
        set.drawIconsEnabled = false
        set.sliceSpace = 2


        set.colors = ChartColorTemplates.vordiplom()
            + ChartColorTemplates.joyful()
            + ChartColorTemplates.colorful()
            + ChartColorTemplates.liberty()
            + ChartColorTemplates.pastel()
            + [UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 1)]

        let data = PieChartData(dataSet: set)

        let pFormatter = NumberFormatter()
        pFormatter.numberStyle = .percent
        pFormatter.maximumFractionDigits = 1
        pFormatter.multiplier = 1
        pFormatter.percentSymbol = " %"
        data.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))
        data.setValueTextColor(.black)

        return data
    }
}
```
### Pie Chart with value lines
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/034d876b-fa66-255d-b451-15fbf17e6806.png">

```PiePolylineChart.swift
import SwiftUI
import Charts

private let parties = [
    "Party A", "Party B", "Party C", "Party D", "Party E", "Party F",
    "Party G", "Party H", "Party I", "Party J", "Party K", "Party L",
    "Party M", "Party N", "Party O", "Party P", "Party Q", "Party R",
    "Party S", "Party T", "Party U", "Party V", "Party W", "Party X",
    "Party Y", "Party Z"
]

struct PiePolylineChart: UIViewRepresentable {
    @Environment(\.colorScheme) var colorScheme
    func makeUIView(context: Context) -> PieChartView {
        let chartView = PieChartView()

        chartView.legend.enabled = false
        chartView.setExtraOffsets(left: 20, top: 0, right: 20, bottom: 0)

        chartView.entryLabelColor = .black
        chartView.entryLabelFont = .systemFont(ofSize: 12, weight: .light)

        chartView.data = setDataCount(10, range: 100)

        chartView.animate(xAxisDuration: 1.4, easingOption: .easeOutBack)

        return chartView
    }
    func updateUIView(_ uiView: PieChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> PieChartData {
        let entries = (0..<count).map { (i) -> PieChartDataEntry in
            // IMPORTANT: In a PieChart, no values (Entry) should have the same xIndex (even if from different DataSets), since no values can be drawn above each other.
            return PieChartDataEntry(value: Double(arc4random_uniform(range) + range / 5),
                                     label: parties[i % parties.count])
        }

        let set = PieChartDataSet(entries: entries, label: "Election Results")
        set.sliceSpace = 2


        set.colors = ChartColorTemplates.vordiplom()
            + ChartColorTemplates.joyful()
            + ChartColorTemplates.colorful()
            + ChartColorTemplates.liberty()
            + ChartColorTemplates.pastel()
            + [UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 1)]

        set.valueLinePart1OffsetPercentage = 0.8
        set.valueLinePart1Length = 0.2
        set.valueLinePart2Length = 0.4
        set.yValuePosition = .outsideSlice

        let data = PieChartData(dataSet: set)

        let pFormatter = NumberFormatter()
        pFormatter.numberStyle = .percent
        pFormatter.maximumFractionDigits = 1
        pFormatter.multiplier = 1
        pFormatter.percentSymbol = " %"
        data.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))
        data.setValueFont(.systemFont(ofSize: 11, weight: .light))
        data.setValueTextColor(colorScheme == .dark ? .white : .black)

        return data
    }
}
```
### Scatter Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/8c3db5b8-7498-1ba5-6ec7-6fe4e779b197.png">

```ScatterChart.swift
import SwiftUI
import Charts

struct ScatterChart: UIViewRepresentable {
    func makeUIView(context: Context) -> ScatterChartView {
        let chartView = ScatterChartView()

        chartView.chartDescription?.enabled = false

        chartView.dragEnabled = true
        chartView.setScaleEnabled(true)
        chartView.maxVisibleCount = 200
        chartView.pinchZoomEnabled = true

        let l = chartView.legend
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false
        l.font = .systemFont(ofSize: 10, weight: .light)
        l.xOffset = 5

        let leftAxis = chartView.leftAxis
        leftAxis.labelFont = .systemFont(ofSize: 10, weight: .light)
        leftAxis.axisMinimum = 0

        chartView.rightAxis.enabled = false


        let xAxis = chartView.xAxis
        xAxis.labelFont = .systemFont(ofSize: 10, weight: .light)

        chartView.data = setDataCount(45, range: 100)

        return chartView
    }
    func updateUIView(_ uiView: ScatterChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> ScatterChartData {
        let values1 = (0..<count).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(range) + 3)
            return ChartDataEntry(x: Double(i), y: val)
        }
        let values2 = (0..<count).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(range) + 3)
            return ChartDataEntry(x: Double(i) + 0.33, y: val)
        }
        let values3 = (0..<count).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(range) + 3)
            return ChartDataEntry(x: Double(i) + 0.66, y: val)
        }


        let set1 = ScatterChartDataSet(entries: values1, label: "DS 1")
        set1.setScatterShape(.square)
        set1.setColor(ChartColorTemplates.colorful()[0])
        set1.scatterShapeSize = 8

        let set2 = ScatterChartDataSet(entries: values2, label: "DS 2")
        set2.setScatterShape(.circle)
        set2.scatterShapeHoleColor = ChartColorTemplates.colorful()[3]
        set2.scatterShapeHoleRadius = 3.5
        set2.setColor(ChartColorTemplates.colorful()[1])
        set2.scatterShapeSize = 8

        let set3 = ScatterChartDataSet(entries: values3, label: "DS 3")
        set3.setScatterShape(.cross)
        set3.setColor(ChartColorTemplates.colorful()[2])
        set3.scatterShapeSize = 8

        let data: ScatterChartData = ScatterChartData(dataSets: [set1, set2, set3])
        data.setValueFont(.systemFont(ofSize: 7, weight: .light))

        return data
    }
}
```
### Bubble Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/405b6c55-c190-481d-d78e-faa01bf4ebaf.png">

```BubbleChart.swift
import SwiftUI
import Charts

struct BubbleChart: UIViewRepresentable {
    func makeUIView(context: Context) -> BubbleChartView {
        let chartView = BubbleChartView()

        chartView.chartDescription?.enabled = false

        chartView.dragEnabled = false
        chartView.setScaleEnabled(true)
        chartView.maxVisibleCount = 200
        chartView.pinchZoomEnabled = true

        chartView.legend.horizontalAlignment = .right
        chartView.legend.verticalAlignment = .top
        chartView.legend.orientation = .vertical
        chartView.legend.drawInside = false
        chartView.legend.font = UIFont(name: "HelveticaNeue-Light", size: 10)!

        chartView.leftAxis.labelFont = UIFont(name: "HelveticaNeue-Light", size: 10)!
        chartView.leftAxis.spaceTop = 0.3
        chartView.leftAxis.spaceBottom = 0.3
        chartView.leftAxis.axisMinimum = 0

        chartView.rightAxis.enabled = false

        chartView.xAxis.labelPosition = .bottom
        chartView.xAxis.labelFont = UIFont(name: "HelveticaNeue-Light", size: 10)!

        let l = chartView.legend
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false
        l.font = .systemFont(ofSize: 10, weight: .light)
        l.xOffset = 5

        chartView.data = setDataCount(10, range: 50)

        return chartView
    }
    func updateUIView(_ uiView: BubbleChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> BubbleChartData {
        let yVals1 = (0..<count).map { (i) -> BubbleChartDataEntry in
            let val = Double(arc4random_uniform(range))
            let size = CGFloat(arc4random_uniform(range))
            return BubbleChartDataEntry(x: Double(i), y: val, size: size, icon: UIImage(named: "icon"))
        }
        let yVals2 = (0..<count).map { (i) -> BubbleChartDataEntry in
            let val = Double(arc4random_uniform(range))
            let size = CGFloat(arc4random_uniform(range))
            return BubbleChartDataEntry(x: Double(i), y: val, size: size, icon: UIImage(named: "icon"))
        }
        let yVals3 = (0..<count).map { (i) -> BubbleChartDataEntry in
            let val = Double(arc4random_uniform(range))
            let size = CGFloat(arc4random_uniform(range))
            return BubbleChartDataEntry(x: Double(i), y: val, size: size)
        }

        let set1 = BubbleChartDataSet(entries: yVals1, label: "DS 1")
        set1.drawIconsEnabled = false
        set1.setColor(ChartColorTemplates.colorful()[0], alpha: 0.5)
        set1.drawValuesEnabled = true

        let set2 = BubbleChartDataSet(entries: yVals2, label: "DS 2")
        set2.drawIconsEnabled = false
        set2.iconsOffset = CGPoint(x: 0, y: 15)
        set2.setColor(ChartColorTemplates.colorful()[1], alpha: 0.5)
        set2.drawValuesEnabled = true

        let set3 = BubbleChartDataSet(entries: yVals3, label: "DS 3")
        set3.setColor(ChartColorTemplates.colorful()[2], alpha: 0.5)
        set3.drawValuesEnabled = true

        let data = BubbleChartData(dataSets: [set1, set2, set3])
        data.setDrawValues(false)
        data.setValueFont(UIFont(name: "HelveticaNeue-Light", size: 7)!)
        data.setHighlightCircleWidth(1.5)
        data.setValueTextColor(.white)

        return data
    }
}
```
### Stacked Bar Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/fd2ac2fa-2c65-cffe-4c48-d338da855cbd.png">

```StackedBarChart.swift
import SwiftUI
import Charts

struct StackedBarChart: UIViewRepresentable {
    var formatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.maximumFractionDigits = 1
        formatter.negativeSuffix = " $"
        formatter.positiveSuffix = " $"

        return formatter
    }()

    func makeUIView(context: Context) -> BarChartView {
        let chartView = BarChartView()

        chartView.chartDescription?.enabled = false

        chartView.maxVisibleCount = 40
        chartView.drawBarShadowEnabled = false
        chartView.drawValueAboveBarEnabled = false
        chartView.highlightFullBarEnabled = false

        let leftAxis = chartView.leftAxis
        leftAxis.valueFormatter = DefaultAxisValueFormatter(formatter: self.formatter)
        leftAxis.axisMinimum = 0

        chartView.rightAxis.enabled = false

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .top

        let l = chartView.legend
        l.horizontalAlignment = .right
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false
        l.form = .square
        l.formToTextSpace = 4
        l.xEntrySpace = 6

        chartView.fitBars = true

        chartView.data = setDataCount(12, range: 100)

        chartView.animate(yAxisDuration: 3.0)

        return chartView
    }
    func updateUIView(_ uiView: BarChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> BarChartData {
        let yVals = (0..<count).map { (i) -> BarChartDataEntry in
            let mult = range + 1
            let val1 = Double(arc4random_uniform(mult) + mult / 3)
            let val2 = Double(arc4random_uniform(mult) + mult / 3)
            let val3 = Double(arc4random_uniform(mult) + mult / 3)

            return BarChartDataEntry(x: Double(i), yValues: [val1, val2, val3], icon: #imageLiteral(resourceName: "icon"))
        }

        let set = BarChartDataSet(entries: yVals, label: "Statistics Vienna 2014")
        set.drawIconsEnabled = false
        set.colors = [ChartColorTemplates.material()[0], ChartColorTemplates.material()[1], ChartColorTemplates.material()[2]]
        set.stackLabels = ["Births", "Divorces", "Marriages"]

        let data = BarChartData(dataSet: set)
        data.setValueFont(.systemFont(ofSize: 7, weight: .light))
        data.setValueFormatter(DefaultValueFormatter(formatter: formatter))
        data.setValueTextColor(.white)

        return data
    }
}
```
### Stacked Bar Chart Negative
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/18a009be-ffca-abfc-c0c4-57b7d5e7d075.png">

```NegativeStackedBarChart.swift
import SwiftUI
import Charts

struct NegativeStackedBarChart: UIViewRepresentable {
    var customFormatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.negativePrefix = ""
        formatter.positiveSuffix = "m"
        formatter.negativeSuffix = "m"
        formatter.minimumSignificantDigits = 1
        formatter.minimumFractionDigits = 1
        return formatter
    }()

    func makeUIView(context: Context) -> HorizontalBarChartView {
        let chartView = HorizontalBarChartView()

        chartView.chartDescription?.enabled = false

        chartView.drawBarShadowEnabled = false
        chartView.drawValueAboveBarEnabled = true

        chartView.leftAxis.enabled = false
        let rightAxis = chartView.rightAxis
        rightAxis.axisMaximum = 25
        rightAxis.axisMinimum = -25
        rightAxis.drawZeroLineEnabled = true
        rightAxis.labelCount = 7
        rightAxis.valueFormatter = DefaultAxisValueFormatter(formatter: customFormatter)
        rightAxis.labelFont = .systemFont(ofSize: 9)

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .bothSided
        xAxis.drawAxisLineEnabled = false
        xAxis.axisMinimum = 0
        xAxis.axisMaximum = 110
        xAxis.centerAxisLabelsEnabled = true
        xAxis.labelCount = 12
        xAxis.granularity = 10
        xAxis.labelFont = .systemFont(ofSize: 9)

        let l = chartView.legend
        l.horizontalAlignment = .right
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.formSize = 8
        l.formToTextSpace = 8
        l.xEntrySpace = 6

        chartView.data = setDataCount()

        chartView.animate(yAxisDuration: 3.0)

        return chartView
    }
    func updateUIView(_ uiView: HorizontalBarChartView, context: Context) {
    }

    func setDataCount() -> BarChartData {
        let yVals = [
            BarChartDataEntry(x: 5, yValues: [-10, 10]),
            BarChartDataEntry(x: 15, yValues: [-12, 13]),
            BarChartDataEntry(x: 25, yValues: [-15, 15]),
            BarChartDataEntry(x: 35, yValues: [-17, 17]),
            BarChartDataEntry(x: 45, yValues: [-19, 120]),
            BarChartDataEntry(x: 55, yValues: [-19, 19]),
            BarChartDataEntry(x: 65, yValues: [-16, 16]),
            BarChartDataEntry(x: 75, yValues: [-13, 14]),
            BarChartDataEntry(x: 85, yValues: [-10, 11]),
            BarChartDataEntry(x: 95, yValues: [-5, 6]),
            BarChartDataEntry(x: 105, yValues: [-1, 2])
        ]

        let set = BarChartDataSet(entries: yVals, label: "Age Distribution")
        set.drawIconsEnabled = false
        set.valueFormatter = DefaultValueFormatter(formatter: customFormatter)
        set.valueFont = .systemFont(ofSize: 7)
        set.axisDependency = .right
        set.colors = [UIColor(red: 67/255, green: 67/255, blue: 72/255, alpha: 1),
                      UIColor(red: 124/255, green: 181/255, blue: 236/255, alpha: 1)
        ]
        set.stackLabels = ["Men", "Women"]

        let data = BarChartData(dataSet: set)
        data.barWidth = 8.5

        return data
    }
}
```
### Another Bar Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ab3a208e-42b6-92a6-9fc5-1c01f7e8d569.png">

```AnotherBarChart.swift
import SwiftUI
import Charts

struct AnotherBarChart: UIViewRepresentable {
    func makeUIView(context: Context) -> BarChartView {
        let chartView = BarChartView()

        chartView.chartDescription?.enabled = false
        chartView.maxVisibleCount = 60
        chartView.pinchZoomEnabled = false
        chartView.drawBarShadowEnabled = false

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .bottom

        chartView.legend.enabled = false

        chartView.data = setDataCount(10, range: 100)

        chartView.animate(yAxisDuration: 3.0)

        return chartView
    }
    func updateUIView(_ uiView: BarChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: Double) -> BarChartData {
        let yVals = (0..<count).map { (i) -> BarChartDataEntry in
            let mult = range + 1
            let val = Double(arc4random_uniform(UInt32(mult))) + mult/3
            return BarChartDataEntry(x: Double(i), y: val)
        }

        var set1: BarChartDataSet! = nil
        set1 = BarChartDataSet(entries: yVals, label: "Data Set")
        set1.colors = ChartColorTemplates.vordiplom()
        set1.drawValuesEnabled = false

        let data = BarChartData(dataSet: set1)

        return data
    }
}
```
### Multiple Lines Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/018e557a-46cb-b928-17f7-b05301e91d7e.png">

```MultipleLinesChart.swift
import SwiftUI
import Charts

struct MultipleLinesChart: UIViewRepresentable {
    func makeUIView(context: Context) -> LineChartView {
        let chartView = LineChartView()

        chartView.chartDescription?.enabled = false

        chartView.leftAxis.enabled = false
        chartView.rightAxis.drawAxisLineEnabled = false
        chartView.xAxis.drawAxisLineEnabled = false

        chartView.drawBordersEnabled = false
        chartView.setScaleEnabled(true)

        let l = chartView.legend
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false

        chartView.data = setDataCount(7, range: 100)

        chartView.animate(xAxisDuration: 2.5)

        return chartView
    }
    func updateUIView(_ uiView: LineChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: Double) -> LineChartData {
        let colors = ChartColorTemplates.vordiplom()[0...2]

        let block: (Int) -> ChartDataEntry = { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(UInt32(range)) + 3)
            return ChartDataEntry(x: Double(i), y: val)
        }
        let dataSets = (0..<3).map { i -> LineChartDataSet in
            let yVals = (0..<count).map(block)
            let set = LineChartDataSet(entries: yVals, label: "DataSet \(i)")
            set.lineWidth = 2.5
            set.circleRadius = 4
            set.circleHoleRadius = 2
            let color = colors[i % colors.count]
            set.setColor(color)
            set.setCircleColor(color)

            return set
        }

        dataSets[0].lineDashLengths = [5, 5]
        dataSets[0].colors = ChartColorTemplates.vordiplom()
        dataSets[0].circleColors = ChartColorTemplates.vordiplom()

        let data = LineChartData(dataSets: dataSets)
        data.setValueFont(.systemFont(ofSize: 7, weight: .light))

        return data
    }
}
```
### Multiple Bars Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/f2595611-12d1-16e0-8216-36779dde55a8.png">

```MultipleBarChart.swift
import SwiftUI
import Charts

struct MultipleBarChart: UIViewRepresentable {
    func makeUIView(context: Context) -> BarChartView {
        let chartView = BarChartView()

        chartView.chartDescription?.enabled =  false

        chartView.pinchZoomEnabled = false
        chartView.drawBarShadowEnabled = false

        let l = chartView.legend
        l.horizontalAlignment = .right
        l.verticalAlignment = .top
        l.orientation = .vertical
        l.drawInside = true
        l.font = .systemFont(ofSize: 8, weight: .light)
        l.yOffset = 10
        l.xOffset = 10
        l.yEntrySpace = 0

        let xAxis = chartView.xAxis
        xAxis.labelFont = .systemFont(ofSize: 10, weight: .light)
        xAxis.granularity = 1
        xAxis.centerAxisLabelsEnabled = true

        let leftAxisFormatter = NumberFormatter()
        leftAxisFormatter.maximumFractionDigits = 1

        let leftAxis = chartView.leftAxis
        leftAxis.labelFont = .systemFont(ofSize: 10, weight: .light)
        leftAxis.spaceTop = 0.35
        leftAxis.axisMinimum = 0

        chartView.rightAxis.enabled = false

        chartView.data = setDataCount(7, range: 100)

        chartView.animate(yAxisDuration: 2.5)

        return chartView
    }
    func updateUIView(_ uiView: BarChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: Double) -> BarChartData {
        let groupSpace = 0.08
        let barSpace = 0.03
        let barWidth = 0.2
        // (0.2 + 0.03) * 4 + 0.08 = 1.00 -> interval per "group"

        let randomMultiplier = range * 100000
        let groupCount = count + 1
        let startYear = 1980
        let endYear = startYear + groupCount

        let block: (Int) -> BarChartDataEntry = { (i) -> BarChartDataEntry in
            return BarChartDataEntry(
                x: Double(i), y: Double(arc4random_uniform(UInt32(randomMultiplier)))
            )
        }
        let yVals1 = (startYear ..< endYear).map(block)
        let yVals2 = (startYear ..< endYear).map(block)
        let yVals3 = (startYear ..< endYear).map(block)
        let yVals4 = (startYear ..< endYear).map(block)

        let set1 = BarChartDataSet(entries: yVals1, label: "Company A")
        set1.setColor(UIColor(red: 104/255, green: 241/255, blue: 175/255, alpha: 1))

        let set2 = BarChartDataSet(entries: yVals2, label: "Company B")
        set2.setColor(UIColor(red: 164/255, green: 228/255, blue: 251/255, alpha: 1))

        let set3 = BarChartDataSet(entries: yVals3, label: "Company C")
        set3.setColor(UIColor(red: 242/255, green: 247/255, blue: 158/255, alpha: 1))

        let set4 = BarChartDataSet(entries: yVals4, label: "Company D")
        set4.setColor(UIColor(red: 255/255, green: 102/255, blue: 0/255, alpha: 1))

        let data: BarChartData = BarChartData(dataSets: [set1, set2, set3, set4])
        data.setValueFont(.systemFont(ofSize: 10, weight: .light))

        // specify the width each bar should have
        data.barWidth = barWidth

        data.groupBars(fromX: Double(startYear), groupSpace: groupSpace, barSpace: barSpace)

        return data
    }
}
```
### Candle Stick Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/415567d8-c81b-8c2d-6857-0a3b7ab74047.png">

```CandleStickChart.swift
import SwiftUI
import Charts

struct CandleStickChart: UIViewRepresentable {
    func makeUIView(context: Context) -> CandleStickChartView {
        let chartView = CandleStickChartView()

        chartView.chartDescription?.enabled = false

        chartView.dragEnabled = false
        chartView.setScaleEnabled(true)
        chartView.maxVisibleCount = 200
        chartView.pinchZoomEnabled = true

        chartView.legend.horizontalAlignment = .right
        chartView.legend.verticalAlignment = .top
        chartView.legend.orientation = .vertical
        chartView.legend.drawInside = false
        chartView.legend.font = UIFont(name: "HelveticaNeue-Light", size: 10)!

        chartView.leftAxis.labelFont = UIFont(name: "HelveticaNeue-Light", size: 10)!
        chartView.leftAxis.spaceTop = 0.3
        chartView.leftAxis.spaceBottom = 0.3
        chartView.leftAxis.axisMinimum = 0

        chartView.rightAxis.enabled = false

        chartView.xAxis.labelPosition = .bottom
        chartView.xAxis.labelFont = UIFont(name: "HelveticaNeue-Light", size: 10)!

        let l = chartView.legend
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false

        chartView.data = setDataCount(10, range: 50)

        return chartView
    }
    func updateUIView(_ uiView: CandleStickChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: Double) -> CandleChartData {
        let yVals1 = (0..<count).map { (i) -> CandleChartDataEntry in
            let mult = range + 1
            let val = Double(Double(arc4random_uniform(40)) + mult)
            let high = Double(arc4random_uniform(9) + 8)
            let low = Double(arc4random_uniform(9) + 8)
            let open = Double(arc4random_uniform(6) + 1)
            let close = Double(arc4random_uniform(6) + 1)
            let even = i % 2 == 0

            return CandleChartDataEntry(x: Double(i), shadowH: val + high, shadowL: val - low, open: even ? val + open : val - open, close: even ? val - close : val + close, icon: UIImage(named: "icon")!)
        }

        let set1 = CandleChartDataSet(entries: yVals1, label: "Data Set")
        set1.axisDependency = .left
        set1.setColor(UIColor(white: 80/255, alpha: 1))
        set1.drawIconsEnabled = false
        set1.shadowColor = .darkGray
        set1.shadowWidth = 0.7
        set1.decreasingColor = .red
        set1.decreasingFilled = true
        set1.increasingColor = UIColor(red: 122/255, green: 242/255, blue: 84/255, alpha: 1)
        set1.increasingFilled = false
        set1.neutralColor = .blue

        let data = CandleChartData(dataSet: set1)

        return data
    }
}
```
### Cubic Line Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1cb0a09a-fe8a-92f5-76f3-34abe8c4d4fa.png">

```CubicLineChart.swift
import SwiftUI
import Charts

struct CubicLineChart: UIViewRepresentable {
    func makeUIView(context: Context) -> LineChartView {
        let chartView = LineChartView()

        chartView.setViewPortOffsets(left: 0, top: 20, right: 0, bottom: 0)
        chartView.backgroundColor = UIColor(red: 30/255, green: 30/255, blue: 30/255, alpha: 1)

        chartView.dragEnabled = true
        chartView.setScaleEnabled(true)
        chartView.pinchZoomEnabled = false
        chartView.maxHighlightDistance = 300

        chartView.xAxis.enabled = false

        let yAxis = chartView.leftAxis
        yAxis.labelFont = UIFont(name: "HelveticaNeue-Light", size:12)!
        yAxis.setLabelCount(6, force: false)
        yAxis.labelTextColor = .white
        yAxis.labelPosition = .insideChart
        yAxis.axisLineColor = .white

        chartView.rightAxis.enabled = false
        chartView.legend.enabled = false

        chartView.data = setDataCount(10, range: 50)

        chartView.animate(xAxisDuration: 2, yAxisDuration: 2)

        return chartView
    }

    func updateUIView(_ uiView: LineChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: Double) -> ChartData {
        let yVals1 = (0..<count).map { (i) -> ChartDataEntry in
            let mult = range + 1
            let val = Double(arc4random_uniform(UInt32(mult)) + 20)
            return ChartDataEntry(x: Double(i), y: val)
        }

        let set1 = LineChartDataSet(entries: yVals1, label: "DataSet 1")
        set1.mode = .cubicBezier
        set1.drawCirclesEnabled = false
        set1.lineWidth = 1.8
        set1.circleRadius = 4
        set1.setCircleColor(.white)
        set1.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
        set1.fillColor = .white
        set1.fillAlpha = 1
        set1.drawHorizontalHighlightIndicatorEnabled = false

        let data = LineChartData(dataSet: set1)
        data.setValueFont(UIFont(name: "HelveticaNeue-Light", size: 9)!)
        data.setDrawValues(false)

        return data
    }
}
```
### Radar Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/0379afd0-b1f8-5436-ad76-1920a8276e94.png">

```RadarChart.swift
import SwiftUI
import Charts

struct RadarChart: UIViewRepresentable {
    let activities = ["Burger", "Steak", "Salad", "Pasta", "Pizza"]

    func makeUIView(context: Context) -> RadarChartView {
        let chartView = RadarChartView()

        chartView.chartDescription?.enabled = false
        chartView.webLineWidth = 1
        chartView.innerWebLineWidth = 1
        chartView.webColor = .lightGray
        chartView.innerWebColor = .lightGray
        chartView.webAlpha = 1

        let xAxis = chartView.xAxis
        xAxis.labelFont = .systemFont(ofSize: 9, weight: .light)
        xAxis.xOffset = 0
        xAxis.yOffset = 0

        let yAxis = chartView.yAxis
        yAxis.labelFont = .systemFont(ofSize: 9, weight: .light)
        yAxis.labelCount = 5
        yAxis.axisMinimum = 0
        yAxis.axisMaximum = 80
        yAxis.drawLabelsEnabled = false

        let l = chartView.legend
        l.horizontalAlignment = .center
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false
        l.font = .systemFont(ofSize: 10, weight: .light)
        l.xEntrySpace = 7
        l.yEntrySpace = 5

        chartView.data = setDataCount()

        chartView.animate(xAxisDuration: 1.4, yAxisDuration: 1.4, easingOption: .easeOutBack)

        return chartView
    }

    func updateUIView(_ uiView: RadarChartView, context: Context) {
    }

    func setDataCount() -> ChartData {
        let mult: UInt32 = 80
        let min: UInt32 = 20
        let cnt = 5

        let block: (Int) -> RadarChartDataEntry = { _ in return RadarChartDataEntry(value: Double(arc4random_uniform(mult) + min))}
        let entries1 = (0..<cnt).map(block)
        let entries2 = (0..<cnt).map(block)

        let set1 = RadarChartDataSet(entries: entries1, label: "Last Week")
        set1.setColor(UIColor(red: 103/255, green: 110/255, blue: 129/255, alpha: 1))
        set1.fillColor = UIColor(red: 103/255, green: 110/255, blue: 129/255, alpha: 1)
        set1.drawFilledEnabled = true
        set1.fillAlpha = 0.7
        set1.lineWidth = 2
        set1.drawHighlightCircleEnabled = true
        set1.setDrawHighlightIndicators(false)

        let set2 = RadarChartDataSet(entries: entries2, label: "This Week")
        set2.setColor(UIColor(red: 121/255, green: 162/255, blue: 175/255, alpha: 1))
        set2.fillColor = UIColor(red: 121/255, green: 162/255, blue: 175/255, alpha: 1)
        set2.drawFilledEnabled = true
        set2.fillAlpha = 0.7
        set2.lineWidth = 2
        set2.drawHighlightCircleEnabled = true
        set2.setDrawHighlightIndicators(false)

        let data: RadarChartData = RadarChartData(dataSets: [set1, set2])
        data.setValueFont(.systemFont(ofSize: 8, weight: .light))
        data.setDrawValues(false)

        return data
    }
}
```
### Colored Line Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ec89a71e-b9a8-7321-2953-42e0a4652d56.png">

```ColoredLineChart.swift
import SwiftUI
import Charts

struct ColoredLineChart: UIViewRepresentable {
    var color: UIColor
    func makeUIView(context: Context) -> LineChartView {
        let chartViews = LineChartView()

        chartViews.backgroundColor = color

        chartViews.chartDescription?.enabled = false

        chartViews.dragEnabled = true
        chartViews.setScaleEnabled(true)
        chartViews.pinchZoomEnabled = false
        chartViews.setViewPortOffsets(left: 10, top: 0, right: 10, bottom: 0)

        chartViews.legend.enabled = false

        chartViews.leftAxis.enabled = false
        chartViews.leftAxis.spaceTop = 0.4
        chartViews.leftAxis.spaceBottom = 0.4
        chartViews.rightAxis.enabled = false
        chartViews.xAxis.enabled = false

        let data = setDataCount(36, range: 100)
        data.setValueFont(UIFont(name: "HelveticaNeue", size: 7)!)

        chartViews.data = data

        chartViews.animate(xAxisDuration: 2.5)

        return chartViews
    }

    func updateUIView(_ uiView: LineChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> LineChartData {
        let yVals = (0..<count).map { i -> ChartDataEntry in
            let val = Double(arc4random_uniform(range)) + 3
            return ChartDataEntry(x: Double(i), y: val)
        }

        let set1 = LineChartDataSet(entries: yVals, label: "DataSet 1")

        set1.lineWidth = 1.75
        set1.circleRadius = 5.0
        set1.circleHoleRadius = 2.5
        set1.setColor(.white)
        set1.setCircleColor(.white)
        set1.highlightColor = .white
        set1.drawValuesEnabled = false

        return LineChartData(dataSet: set1)
    }
}
```
### Sinus Bar Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/de57ac21-a835-f55b-8df3-e6c4572ce33f.png">

```SinusBarChart.swift
import SwiftUI
import Charts

struct SinusBarChart: UIViewRepresentable {
    func makeUIView(context: Context) -> BarChartView {
        let chartView = BarChartView()

        chartView.chartDescription?.enabled = false

        chartView.drawBarShadowEnabled = false
        chartView.drawValueAboveBarEnabled = false
        chartView.maxVisibleCount = 60

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .bottom
        xAxis.enabled = false

        let leftAxis = chartView.leftAxis
        leftAxis.labelCount = 6
        leftAxis.axisMinimum = -2.5
        leftAxis.axisMaximum = 2.5
        leftAxis.granularityEnabled = true
        leftAxis.granularity = 0.1

        let rightAxis = chartView.rightAxis
        rightAxis.labelCount = 6
        rightAxis.axisMinimum = -2.5
        rightAxis.axisMaximum = 2.5
        rightAxis.granularity = 0.1

        let l = chartView.legend
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false
        l.form = .square
        l.formSize = 9
        l.font = .systemFont(ofSize: 11)
        l.xEntrySpace = 4

        chartView.data = setDataCount(150)

        chartView.animate(xAxisDuration: 2, yAxisDuration: 2)

        return chartView
    }

    func updateUIView(_ uiView: BarChartView, context: Context) {
    }

    func setDataCount(_ count: Int) -> BarChartData {
        let entries = (0..<count).map {
            BarChartDataEntry(x: Double($0), y: sin(.pi * Double($0%128) / 64))
        }

        let set = BarChartDataSet(entries: entries, label: "Sinus Function")
        set.setColor(UIColor(red: 240/255, green: 120/255, blue: 123/255, alpha: 1))

        let data = BarChartData(dataSet: set)
        data.setValueFont(.systemFont(ofSize: 10, weight: .light))
        data.setDrawValues(false)
        data.barWidth = 0.8

        return data
    }
}
```
### BarChart positive / negative
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/fa929b82-c6ba-ec34-a397-279aa097351c.png">

```PositiveNegativeBarChart.swift
import SwiftUI
import Charts

struct PositiveNegativeBarChart: UIViewRepresentable {
    func makeUIView(context: Context) -> BarChartView {
        let chartView = BarChartView()

        chartView.setExtraOffsets(left: 70, top: -30, right: 70, bottom: 10)

        chartView.drawBarShadowEnabled = false
        chartView.drawValueAboveBarEnabled = true

        chartView.chartDescription?.enabled = false

        chartView.rightAxis.enabled = false

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .bottom
        xAxis.labelFont = .systemFont(ofSize: 13)
        xAxis.drawAxisLineEnabled = false
        xAxis.labelTextColor = .lightGray
        xAxis.labelCount = 5
        xAxis.centerAxisLabelsEnabled = true
        xAxis.granularity = 1

        let leftAxis = chartView.leftAxis
        leftAxis.drawLabelsEnabled = false
        leftAxis.spaceTop = 0.25
        leftAxis.spaceBottom = 0.25
        leftAxis.drawAxisLineEnabled = false
        leftAxis.drawZeroLineEnabled = true
        leftAxis.zeroLineColor = .gray
        leftAxis.zeroLineWidth = 0.7

        chartView.data = setDataCount()

        chartView.animate(yAxisDuration: 2.5)

        return chartView
    }

    func updateUIView(_ uiView: BarChartView, context: Context) {
    }

    func setDataCount() -> BarChartData {
        let yVals = [
            BarChartDataEntry(x: 0, y: -224.1),
            BarChartDataEntry(x: 1, y: 238.5),
            BarChartDataEntry(x: 2, y: 1280.1),
            BarChartDataEntry(x: 3, y: -442.3),
            BarChartDataEntry(x: 4, y: -2280.1)
        ]

        let red = UIColor(red: 211/255, green: 74/255, blue: 88/255, alpha: 1)
        let green = UIColor(red: 110/255, green: 190/255, blue: 102/255, alpha: 1)
        let colors = yVals.map { (entry) -> NSUIColor in
            return entry.y > 0 ? red : green
        }

        let set = BarChartDataSet(entries: yVals, label: "Values")
        set.colors = colors
        set.valueColors = colors

        let data = BarChartData(dataSet: set)
        data.setValueFont(.systemFont(ofSize: 13))

        let formatter = NumberFormatter()
        formatter.maximumFractionDigits = 1
        data.setValueFormatter(DefaultValueFormatter(formatter: formatter))
        data.barWidth = 0.8

        return data
    }
}
```
### Time Line Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/196ddeab-1587-c6a2-6d31-56be0a017368.png">

```LineChartTime.swift
import SwiftUI
import Charts

struct LineChartTime: UIViewRepresentable {
    func makeUIView(context: Context) -> LineChartView {
        let chartView = LineChartView()

        chartView.chartDescription?.enabled = false

        chartView.dragEnabled = true
        chartView.setScaleEnabled(true)
        chartView.pinchZoomEnabled = false
        chartView.highlightPerDragEnabled = true

        chartView.backgroundColor = .white

        chartView.legend.enabled = false

        let xAxis = chartView.xAxis
        xAxis.labelPosition = .topInside
        xAxis.labelFont = .systemFont(ofSize: 10, weight: .light)
        xAxis.labelTextColor = UIColor(red: 255/255, green: 192/255, blue: 56/255, alpha: 1)
        xAxis.drawAxisLineEnabled = false
        xAxis.drawGridLinesEnabled = true
        xAxis.centerAxisLabelsEnabled = true
        xAxis.granularity = 3600

        let leftAxis = chartView.leftAxis
        leftAxis.labelPosition = .insideChart
        leftAxis.labelFont = .systemFont(ofSize: 12, weight: .light)
        leftAxis.drawGridLinesEnabled = true
        leftAxis.granularityEnabled = true
        leftAxis.axisMinimum = 0
        leftAxis.axisMaximum = 170
        leftAxis.yOffset = -9
        leftAxis.labelTextColor = UIColor(red: 255/255, green: 192/255, blue: 56/255, alpha: 1)


        chartView.rightAxis.enabled = false

        chartView.legend.form = .line

        chartView.data = setDataCount(100, range: 30)

        chartView.animate(xAxisDuration: 2.5)

        return chartView
    }

    func updateUIView(_ uiView: LineChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> LineChartData {
        let now = Date().timeIntervalSince1970
        let hourSeconds: TimeInterval = 3600

        let from = now - (Double(count) / 2) * hourSeconds
        let to = now + (Double(count) / 2) * hourSeconds

        let values = stride(from: from, to: to, by: hourSeconds).map { (x) -> ChartDataEntry in
            let y = arc4random_uniform(range) + 50
            return ChartDataEntry(x: x, y: Double(y))
        }

        let set1 = LineChartDataSet(entries: values, label: "DataSet 1")
        set1.axisDependency = .left
        set1.setColor(UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 1))
        set1.lineWidth = 1.5
        set1.drawCirclesEnabled = false
        set1.drawValuesEnabled = false
        set1.fillAlpha = 0.26
        set1.fillColor = UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 1)
        set1.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
        set1.drawCircleHoleEnabled = false

        let data = LineChartData(dataSet: set1)
        data.setValueTextColor(.white)
        data.setValueFont(.systemFont(ofSize: 9, weight: .light))

        return data
    }
}
```
### Filled Line Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/eee56931-148d-8097-afe7-2e475a99ded2.png">

```LineChartFilled.swift
import SwiftUI
import Charts

struct LineChartFilled: UIViewRepresentable {
    func makeUIView(context: Context) -> LineChartView {
        let chartView = LineChartView()

        chartView.backgroundColor = .white
        chartView.gridBackgroundColor = UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 150/255)
        chartView.drawGridBackgroundEnabled = true

        chartView.drawBordersEnabled = true

        chartView.chartDescription?.enabled = false

        chartView.pinchZoomEnabled = false
        chartView.dragEnabled = true
        chartView.setScaleEnabled(true)

        chartView.legend.enabled = false

        chartView.xAxis.enabled = false

        let leftAxis = chartView.leftAxis
        leftAxis.axisMaximum = 900
        leftAxis.axisMinimum = -250
        leftAxis.drawAxisLineEnabled = false

        chartView.rightAxis.enabled = false

        chartView.data = setDataCount(100, range: 60, chartView: chartView)

        return chartView
    }

    func updateUIView(_ uiView: LineChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32, chartView: LineChartView) -> LineChartData {
        let yVals1 = (0..<count).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(range) + 50)
            return ChartDataEntry(x: Double(i), y: val)
        }
        let yVals2 = (0..<count).map { (i) -> ChartDataEntry in
            let val = Double(arc4random_uniform(range) + 450)
            return ChartDataEntry(x: Double(i), y: val)
        }

        let set1 = LineChartDataSet(entries: yVals1, label: "DataSet 1")
        set1.axisDependency = .left
        set1.setColor(UIColor(red: 255/255, green: 241/255, blue: 46/255, alpha: 1))
        set1.drawCirclesEnabled = false
        set1.lineWidth = 2
        set1.circleRadius = 3
        set1.fillAlpha = 1
        set1.drawFilledEnabled = true
        set1.fillColor = .white
        set1.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
        set1.drawCircleHoleEnabled = false
        set1.fillFormatter = DefaultFillFormatter { _,_  -> CGFloat in
            return CGFloat(chartView.leftAxis.axisMinimum)
        }

        let set2 = LineChartDataSet(entries: yVals2, label: "DataSet 2")
        set2.axisDependency = .left
        set2.setColor(UIColor(red: 255/255, green: 241/255, blue: 46/255, alpha: 1))
        set2.drawCirclesEnabled = false
        set2.lineWidth = 2
        set2.circleRadius = 3
        set2.fillAlpha = 1
        set2.drawFilledEnabled = true
        set2.fillColor = .white
        set2.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
        set2.drawCircleHoleEnabled = false
        set2.fillFormatter = DefaultFillFormatter { _,_  -> CGFloat in
            return CGFloat(chartView.leftAxis.axisMaximum)
        }

        let data: LineChartData = LineChartData(dataSets: [set1, set2])
        data.setDrawValues(false)

        return data
    }
}
```
### Half Pie Chart
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4be11d42-0e5a-77d7-fe20-d743bf81aeea.png">

```HalfPieChart.swift
import SwiftUI
import Charts

private let parties = [
    "Party A", "Party B", "Party C", "Party D", "Party E", "Party F",
    "Party G", "Party H", "Party I", "Party J", "Party K", "Party L",
    "Party M", "Party N", "Party O", "Party P", "Party Q", "Party R",
    "Party S", "Party T", "Party U", "Party V", "Party W", "Party X",
    "Party Y", "Party Z"
]

struct HalfPieChart: UIViewRepresentable {
    func makeUIView(context: Context) -> PieChartView {
        let chartView = PieChartView()

        chartView.holeColor = .white
        chartView.transparentCircleColor = NSUIColor.white.withAlphaComponent(0.43)
        chartView.holeRadiusPercent = 0.58
        chartView.rotationEnabled = false
        chartView.highlightPerTapEnabled = true

        chartView.maxAngle = 180 // Half chart
        chartView.rotationAngle = 180 // Rotate to make the half on the upper side
        chartView.centerTextOffset = CGPoint(x: 0, y: -20)

        let l = chartView.legend
        l.horizontalAlignment = .center
        l.verticalAlignment = .top
        l.orientation = .horizontal
        l.drawInside = false
        l.xEntrySpace = 7
        l.yEntrySpace = 0
        l.yOffset = 0

        chartView.holeColor = .clear
        chartView.entryLabelColor = .white
        chartView.entryLabelFont = UIFont(name:"HelveticaNeue-Light", size:12)!

        chartView.data = setDataCount(4, range: 100)

        chartView.animate(xAxisDuration: 1.4, easingOption: .easeOutBack)

        return chartView
    }

    func updateUIView(_ uiView: PieChartView, context: Context) {
    }

    func setDataCount(_ count: Int, range: UInt32) -> PieChartData {
        let entries = (0..<count).map { (i) -> PieChartDataEntry in
            // IMPORTANT: In a PieChart, no values (Entry) should have the same xIndex (even if from different DataSets), since no values can be drawn above each other.
            return PieChartDataEntry(value: Double(arc4random_uniform(range) + range / 5),
                                     label: parties[i % parties.count])
        }

        let set = PieChartDataSet(entries: entries, label: "Election Results")
        set.sliceSpace = 3
        set.selectionShift = 5
        set.colors = ChartColorTemplates.material()

        let data = PieChartData(dataSet: set)

        let pFormatter = NumberFormatter()
        pFormatter.numberStyle = .percent
        pFormatter.maximumFractionDigits = 1
        pFormatter.multiplier = 1
        pFormatter.percentSymbol = " %"
        data.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))

        data.setValueFont(UIFont(name: "HelveticaNeue-Light", size: 11)!)
        data.setValueTextColor(.white)

        return data
    }
}
```

# おわり
デモの完成形を置いときます

https://github.com/SNQ-2001/SwiftUI-Charts-Demo