ChartsSwiftUI is a collection of several graphs built for iOS apps in SwiftUI.
ChartsSwiftUI supports rendering of basic vertical bar chart alongwith advanced customisations and interactions.
| iPhone | iPad | WatchOS |
|---|---|---|
![]() |
![]() |
![]() |
Basic example:
/// Loading Bar Entries
let loadingBars: [VerticalBarChartView.BarEntry] = [
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "--", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y1", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 5000.0, foregroundValue: 0.0, backgroundColor: .red, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "--", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y2", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 2000.0, foregroundValue: 0.0, backgroundColor: .orange, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "--", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y3", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 1200.0, foregroundValue: 0.0, backgroundColor: .blue, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "--", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y4", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 2890.0, foregroundValue: 0.0, backgroundColor: .green, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "--", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y5", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 4000.0, foregroundValue: 0.0, backgroundColor: .purple, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray)
]
/// Loaded Bar Entries
let loadedBars: [VerticalBarChartView.BarEntry] = [
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L1", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y1", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 5000.0, foregroundValue: 0.0, backgroundColor: .red, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L2", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y2", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 2000.0, foregroundValue: 0.0, backgroundColor: .orange, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L3", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y3", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 1200.0, foregroundValue: 0.0, backgroundColor: .blue, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L4", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y4", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 2890.0, foregroundValue: 0.0, backgroundColor: .green, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L5", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yTopLabel: VerticalBarChartView.AttributedString(text: "Y5", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 4000.0, foregroundValue: 0.0, backgroundColor: .purple, foregroundColor: .white, dashedBackgroundColor: .white, dashedForegroundColor: .gray)
]
/// Vertical bar chart - Loading state
let graphViewModel: VerticalBarChartViewModel = VerticalBarChartViewModel(dataLoaded: false, barEntries: loadingBars)
/// Vertical bar chart - Loaded state
graphViewModel.updateState(dataLoaded: true, barEntries: loadedBars)
Here are some of the unique features provided by CHartsSwiftUI library:
- Multi platform support (iOS, iPad, WatchOS)
- Auto scaling of bars with respect to overall bar chart height
- Supports following customisations
- Shimmer loading animation
- Custom label supports on X and Y axis
- Configurable bars background and foreground colors
- Configurable axis display
- Advanced features
- Supports tap gesture on individual bars.
- Configurable seperator with markers across the graph
Vertical bar chart supports 2 states:
- Data Loading: Display shimmer animation on the chart while the data is loading
- Data Loaded: Display data on the graph with the given styling
Bar chart style can be configured by conforming to VerticalBarChartStyleGuide. The following items can be configured using vertical bar chart style guide:
- Bar Width: The width of the bars in the chart.
- Chart height: Overall height of bar chart.
- Spacing between labels: Spacing between top/bottom X and Y axis labels
- Corner radius: Corner radius of the bars
- Axis lines: Show or hide gridline axis in the chart.
The following properties can be configured individually for each of the bars inside vertical bar chart:
- Font and Color of X and Y axis labels
- Color of the bars, supports multiple colors in case of stacked bar charts.
- Dashed line support to indicate overflows.
- Solid or dashed line borders on the bars.
Mock 1: Stacked Data Set
let bars = [
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L1", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yBottomLabel: VerticalBarChartView.AttributedString(text: "Y1", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 5000.0, foregroundValue: 1000.0, backgroundColor: .gray.opacity(0.2), foregroundColor: .red, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L2", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yBottomLabel: VerticalBarChartView.AttributedString(text: "Y2", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 2000.0, foregroundValue: 500.0, backgroundColor: .gray.opacity(0.2), foregroundColor: .orange, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L3", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yBottomLabel: VerticalBarChartView.AttributedString(text: "Y3", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 1200.0, foregroundValue: 300.0, backgroundColor: .gray.opacity(0.2), foregroundColor: .blue, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L4", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yBottomLabel: VerticalBarChartView.AttributedString(text: "Y4", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 2890.0, foregroundValue: 800.0, backgroundColor: .gray.opacity(0.2), foregroundColor: .green, dashedBackgroundColor: .white, dashedForegroundColor: .gray),
VerticalBarChartView.BarEntry(id: 0, xTopLabel: VerticalBarChartView.AttributedString(text: "L5", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), yBottomLabel: VerticalBarChartView.AttributedString(text: "Y5", color: .black, uiFont: .systemFont(ofSize: 16.0, weight: .bold)), backgroundValue: 4000.0, foregroundValue: 3500.0, backgroundColor: .gray.opacity(0.2), foregroundColor: .purple, dashedBackgroundColor: .white, dashedForegroundColor: .gray)
]
ChartsSwiftUI is built using SwiftUI and includes supports for all platforms: iOS, iPad, WatchOS, etc.
Feature requests, bug reports, and pull requests are all welcome. Refer Getting Started Guide and Contributing Guidelines for more details.
ChartsSwiftUI is available under the Apache 2.0 license. See the LICENSE file for more info.

