SSChart

Simple Swift Chart library for iOS

🎯 Minimized features, focused on just showing graph.

Chart Types

Chart
Doughnut
Gauge
Horizontal Bar

Features

1. Animation
2. Pause and Resume Animation : Use this for starting animation when chart becomes visible.
3. Customizable chart view(e.g. color)

3. Draw average line in bar chart

How To Use

1. Create chart

let doughnutChart = DoughnutChart(frame: CGRect(x: 0, y: 0, width: 300, height: 300))

2. Create chart items

let chartItems: [DoughnutChartItem] = [
    DoughnutChartItem(value: 15, color: .systemRed),
    DoughnutChartItem(value: 25, color: .systemOrange),
    DoughnutChartItem(value: 18, color: .systemYellow),
    DoughnutChartItem(value: 20, color: .systemGreen),
    DoughnutChartItem(value: 12, color: .systemBlue),
    DoughnutChartItem(value: 11, color: .systemPurple),
]

3. Set chart items to chart

doughnutChart.items = chartItems

4. Done!

Customizable Options

Doughnut

DoughnutChart

Options	Description
outerCircleRadiusRatio	Ratio of width to outer circle radius. Default 2
innerCircleRadiusRatio	Ratio of width to innder circle radius. Default 6
animationDuration	Default 1.0

e.g. outerCircleRadiusRatio = 2, innerCircleRadiusRatio = 6

DoughnutChartItem

Options	Description
color	color of each item

Gauge

GaugeChart

Options	Description
outerCircleRadiusRatio	Ratio of width to outer circle radius. Default 2
innerCircleRadiusRatio	Ratio of width to innder circle radius. Default 6
animationDuration	Default 1.0
gaugeWidth	width of gauge line. Default 15

GaugeChartItem

Options	Description
color	color of each item

Bar

Options	Description
groupSpace	space between groups. Default 10
itemSpace	space between items. Default 3
groupLabelWidth	width of group text label. Default 52
itemLabelWidth	width of item text label. Default 52
descriptionLabelWidth	width of description text label. Default 52
animationDelayInterval	time interval between animation start time for each bar. Default 0.3
showAverageLine	Default false
averageLineColor	color of average line. Default systemRed

BarItem

Options	Description
color	color of bar
font	font of label
textColor	text color of label

Notes

Bar Chart

Bar Chart Items Hierarchy

• BarChartGroupItem
• BarChartItem

1. GroupItem can have many Items.
2. GroupItem and Item can have label.
3. Item can have descriptionLabel.

How Bar Chart Draws Items

Bar chart draws items as below.

Group Label(if exists)	Item Label(if exists)	Bar	Item Description Label(if exists)

• If there is a group that has label, bar draws group label section.
• If there is an item that has label, bar draws item label section.
• If there is an item that has description label, bar draws item description label section.

Various Bar Chart Item Configuration

1. Group : Item = 1 : N

[
    BarChartGroupItem(
        items: [
            BarChartItem(value: 3, label: BarChartLabelItem(text: "삼색이", textColor: UIColor.systemGray), color: .init(red: 233/255, green: 29/255, blue: 41/255, alpha: 1)),
            BarChartItem(value: 5, label: BarChartLabelItem(text: "도도", textColor: UIColor.systemGray), color: .init(red: 203/255, green: 32/255, blue: 39/255, alpha: 1)),
            BarChartItem(value: 4, label: BarChartLabelItem(text: "마를린", textColor: UIColor.systemGray), color: .init(red: 179/255, green: 32/255, blue: 36/255, alpha: 1))
        ],
        label: BarChartLabelItem(text: "삼색이네")
    ),
    BarChartGroupItem(
        items: [
            BarChartItem(value: 5, label: BarChartLabelItem(text: "무", textColor: UIColor.systemGray), color: .init(red: 253/255, green: 243/255, blue: 170/255, alpha: 1)),
            BarChartItem(value: 9, label: BarChartLabelItem(text: "연님", textColor: UIColor.systemGray), color: .init(red: 251/255, green: 236/255, blue: 123/255, alpha: 1)),
            BarChartItem(value: 5, label: BarChartLabelItem(text: "래기", textColor: UIColor.systemGray), color: .init(red: 249/255, green: 229/255, blue: 76/255, alpha: 1))
        ],
        label: BarChartLabelItem(text: "연님이네")
    ),
    BarChartGroupItem(
        items: [
            BarChartItem(value: 10, label: BarChartLabelItem(text: "뚱땅"), color: .init(red: 0/255, green: 166/255, blue: 81/255, alpha: 1)),
        ],
        label: BarChartLabelItem(text: "뚱땅이네")
    ),
]

2. Group : Item = 1 : 1

[
    BarChartGroupItem(
        items: [
            BarChartItem(value: 3, label: BarChartLabelItem(text: "삼색이"), color: .systemRed, descriptionLabel: BarChartLabelItem(text: "3마리"))
        ]
    ),
    BarChartGroupItem(
        items: [
            BarChartItem(value: 4, label: BarChartLabelItem(text: "야통이"), color: .systemOrange, descriptionLabel: BarChartLabelItem(text: "4마리"))
        ]
    ),
    BarChartGroupItem(
        items: [
            BarChartItem(value: 5, label: BarChartLabelItem(text: "무"), color: .systemYellow, descriptionLabel: BarChartLabelItem(text: "5마리"))
        ]
    ),
    BarChartGroupItem(
        items: [
            BarChartItem(value: 5, label: BarChartLabelItem(text: "래기"), color: .systemGreen, descriptionLabel: BarChartLabelItem(text: "5마리"))
        ]
    ),
    BarChartGroupItem(
        items: [
            BarChartItem(value: 9, label: BarChartLabelItem(text: "연님"), color: .systemBlue, descriptionLabel: BarChartLabelItem(text: "9마리"))
        ]
    ),
    BarChartGroupItem(
        items: [
            BarChartItem(value: 4, label: BarChartLabelItem(text: "마를린"), color: .systemPurple, descriptionLabel: BarChartLabelItem(text: "4마리"))
        ]
    )
]

Detect chart is visible

If a chart exists as content of scroll view or stack view, chart might be not visible at first. So it is necessary to pause animation at first time and resume animation when chart becomes visible. To do this, follow the steps:

1. Call pauseAnimation() method. You should call pauseAnimation() method after setting chart data to chart. Calling pauseAnimation() before setting data won't work.

private func pauseChartAnimation() {
    barChart.pauseAnimation()
    doughnutChart.pauseAnimation()
    gaugeChart.pauseAnimation()
}

2. Call resumeAnimation() when necessary. (e.g. if chart is in the scrollview, you can determine whether chart is visible by calling intersects() method)

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.bounds.intersects(barChart.frame) {
        barChart.resumeAnimation()
    }

    if scrollView.bounds.intersects(doughnutChart.frame) {
        doughnutChart.resumeAnimation()
    }

    if scrollView.bounds.intersects(gaugeChart.frame) {
        gaugeChart.resumeAnimation()
    }
}

Result

Animation starts when chart is visible.