Finally with **Xcode 15** and **iOS 17** you can make your SwiftUI Charts scrollable.
Apple introduced some new APIs that make this process easy and customisable.
## APIs
### Scroll direction
```swift
func chartScrollableAxes(_ axes: Axis.Set)
```
Here you can choose whether to scroll your chart `vertically` or `horizontally`.
### Visible domain
```swift
func chartXVisibleDomain(length: P)
func chartYVisibleDomain(length: P) 
```
Use this method to control how much of the chart is visible.
For example, in the bar chart, the length is the number of bars you want to be visible, the exceeding bars will be hidden and the user will have to scroll to see them.
### Scroll position
```swift
func chartScrollPosition(x: Binding<some Plottable>)
func chartScrollPosition(y: Binding<some Plottable>)
```
This methods gives you the current scroll position.
To use it, declare a `@State` variable and pass it to the method.
```swift
@State var xScrollPosition: Double = 0
 
Chart {
    // ...
}
.chartScrollableAxes(.horizontal)
.chartScrollPosition(x: $xScrollPosition)
```
### Initial scroll position
```swift
func chartScrollPosition(initialX: some Plottable)
func chartScrollPosition(initialY: some Plottable)
```
Use this method to provide the initial position of the chart.
This example will set the initial scroll position to the 4th bar.
```swift
let data = [Entry(x: 0, y: 43),
            Entry(x: 1, y: 53),
            Entry(x: 2, y: 25),
            Entry(x: 3, y: 43),
            Entry(x: 4, y: 73),
            Entry(x: 5, y: 24),
            Entry(x: 6, y: 82),
            Entry(x: 7, y: 37),
            Entry(x: 8, y: 66),
            Entry(x: 9, y: 33)]
 
Chart(entry) {
    // ...
}
.chartScrollableAxes(.horizontal)
.chartScrollPosition(initialX: 4)
```
Here, in the `chartScrollPosition(initialX:)` method we pass the `x` value we want the chart to start from.
### Scroll behavior
```swift
func chartScrollTargetBehavior(_ behavior: some ChartScrollTargetBehavior)
```
This method controls to which bar the chart will snap once the user stops scrolling.
An basic implementation of this method is this:
```swift
Chart {
    // ...
}
.chartScrollableAxes(.horizontal)
.chartScrollTargetBehavior(.valueAligned(unit: 2))
```
Here the chart will snap every 2 bars.
## Conclusion 
This is a great addition to the great SwiftUI Charts library, since there are many scenarios where charts can have a lot of data.
But unfortunately these features are available only in iOS 17 for now.
I hope Apple will in future back deploy these methods also for iOS 16.

Discover the new SwiftUI Charts APIs that enables you to create scrollable chart easily. Available for Xcode 15 and iOS 17.

Make your Chart Scrollable with SwiftUI Charts (iOS 17)

[FLCharts](https://github.com/francescoleoni98/FLCharts) is a flexible, easy-to-use third-party library, allowing you to highly customise your chart.
FLCharts is an easy-to-use library to build highly customizable bar charts. It allows you to create your own chart bar.
Here I used some gas consumptions data to demonstrate how to set up a basic bar chart using `FLCharts`.
## Install
You can install `FLCharts` through [Cocoapods](https://cocoapods.org) or [Swift Package Manager](https://www.swift.org/package-manager).
## Setting Up a Chart View
Firstly, make sure to import `FLCharts` to the top of the file.
```swift
import FLCharts
```
## Setting Up Data
```swift
let monthsData = [MultiPlotable(name: "jan", values: [30]),
                  MultiPlotable(name: "feb", values: [55]),
                  MultiPlotable(name: "mar", values: [70]),
                  MultiPlotable(name: "apr", values: [45, 30]),
                  MultiPlotable(name: "may", values: [85]),
                  MultiPlotable(name: "jun", values: [46, 40]),
                  MultiPlotable(name: "jul", values: [75]),
                  MultiPlotable(name: "aug", values: [10]),
                  MultiPlotable(name: "set", values: [60]),
                  MultiPlotable(name: "oct", values: [75]),
                  MultiPlotable(name: "nov", values: [85]),
                  MultiPlotable(name: "dec", values: [55, 50, 20])]
```
Each `MultiPlotable` object represents the data of one month. The name value is the _name of the month_ on the x axis and the values property is their _consumptions on the y axis_.
```swift
let chartData = FLChartData(title: "Consumptions",
                            data: monthsData,
                            legendKeys: [Key(key: "F1", color: .Gradient.purpleCyan),
                                         Key(key: "F2", color: .green),
                                         Key(key: "F3", color: .Gradient.sunset)],
                            unitOfMeasure: "kWh")
```
Here, we are setting up the data for the chart.
`FLChartData` contains all the data the chart needs to configure itself.
The title is shown when the chart is embedded in a `FLCard`.
The legendKeys define the color of the sections of the bar and the keys of the legend, if it is embedded in a `FLCard`.
`FLCharts` has a collection of colors and gradients to use in your chart. And you can create your own using the `FLColor` struct.
## Creating chart
Then we create the actual chart with this simple line of code.
```swift
let chart = FLChart(data: chartData, type: .bar())
```
!TIP The bar chart allows you to create your own bar view simply creating a class that conforms to `ChartBar` protocol.
Now we have to layout the chart, in this example we will do it using AutoLayout.
```swift
view.addSubview(chart)
chart.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    chart.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    chart.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    chart.heightAnchor.constraint(equalToConstant: 300),
    chart.widthAnchor.constraint(equalToConstant: 330)
])
```
And here is our bar chart.
![final](/flcharts/flchart.jpeg)
## Embed chart inside FLCard
Now, we can embed the chart inside a card.
```swift
let card = FLCard(chart: chart, style: .rounded)
card.showAverage = true
card.showLegend = false
```
This is all we need for this task.
As you may notice `FLCard` has some additional properties and the ability to customize the card itself through the `style` property.
`FLCharts` has two predefined styles: `.plain` and `.rounded`, but you can create your own using the `FLCardStyle` struct.
There is just one last thing to change in order to show the card. We must replace `chart` with `card` in the auto layout code.
```swift
view.addSubview(card)
card.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    card.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    card.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    card.heightAnchor.constraint(equalToConstant: 300),
    card.widthAnchor.constraint(equalToConstant: 330)
])
```
## Final result
![final](/flcharts/consumptions.jpeg)
## Highlight view
`FLCharts` allows you to display a view when tapping on a bar. The library has a default one but you can create your own creating a `class` that conforms to the protocol `HighlightedView`.
Here's an example:
![highlight](/flcharts/highlight.gif)
## Additional features
`FLCharts` has additional properties the allows you to further customize your charts.
You can assign your own configuration through the `config` property:
```swift
chart.config = FLChartConfig(granularityY: 20)
```
## Aware x FLCharts
[Aware - Daily Bullet Journal](https://apps.apple.com/app/aware-daily-bullet-journal/id1560309401?l=en)
![aware](/flcharts/aware.jpeg)
## GitHub
Check out the library [here](https://github.com/francescoleoni98/FLCharts).
## Conclusion
For your time and attention! I hope you enjoyed this article and `FLCharts`.
If you have suggestions or feedbacks, they are really welcomed and they help me improve the library.

Create beautiful and highly customisable bar, line, radar charts and many more with FLCharts, a flexible, easy-to-use library.

Charts

Make your Chart Scrollable with SwiftUI Charts (iOS 17)

FLCharts: Create Bar Chart easily