Hop on the waitlist to be the first to get the book.  I'm in.

I've found so many articles and video introductions to Swift Charts, and almost all have been helpful, some extremely helpful.  But what I've yet to find is an article that goes well beyond the basics,  something that could help me build not just a chart... but a charting system that could be embedded within my App.  A system that would consistently produce nice visual charts with all the accouterments like labeled axis values with grid lines where appropriate. 

I'm going to start this VIBE Blogging post... right here - right now...  it is NOT the article you are looking for...
Maybe one day in a far far future...

If you came here looking for a better Charts framework...  not going to build it.  If you are frustrated with the lack of good how to do Charts properly... wait on Big Mountain Studio.

This is my wish list for a how to do charts.  It might contain some resources... it might contain some lies or AI hallucinations or maybe a true fact.

A List of Needs:

• Rounding Numbers

• Heuristic for Axis Labels

• Legend 

• Grid Lines and Axis tick marks

• How to handle date values and properly display axis labels

In the StackOverflow article:  Styling chart axes

We find a nice heuristic for Swift Chart Labels.  "Sweeper" suggests a 3 layer approach for AxisMarks that seems to be well conceived.  1 - AxisMarks for major number values (every one in the example); 2 - AxisMarks for minor grid lines or minor tick marks;  3 - AxisMarks for the outter bounds (the bottom gridline).  The Tick marks are offset so as to cross the axis lines.

This has been the BEST example of explaining the configuration of an axis that I've found.

An Example Y Axis Label set:

.chartYAxisLabel(position: .leading, alignment: .center) { Text("Y Label") }

.chartYScale(domain: [-2, 2]) 

.chartYAxis {

 AxisMarks(position: .leading, values: .stride(by: 1)) { 

AxisValueLabel() 

} 

AxisMarks(position: .leading, values: .stride(by: 0.2)) { value in

 if value.index != 0 { // the bottommost value does not need a tick

  AxisTick(length: 8, stroke: .init(lineWidth: 1)) 

.offset(x: 4) 

}

     } 

AxisMarks(position: .leading, values: [-2]) {

 AxisGridLine(stroke: .init(lineWidth: 1)) 

}

 }

The reason we are all here... it is not because someone caught Mr Mustard in the act with the candlestick over Mr. Body.  It is the data - Smarty... we want to see the data.  And if you already have the data then start with it.

But many times the App's data must be manipulated and formatted to look well presented in a chart.  So you may want to extract the App's data into a specific Chart ViewModel.  I've not seen this advice in the videos and articles... but it seems like a good thing(TM).

I've wondered how to do this extraction on real-life data...  and Swift has several tools that come to mind.  Array Slices is one tool.  When charting the stock earnings and dividends I didn't want to show years of data - just the last 2 years of quarterly dividends.  So an Array Slice of 8 was required.

var divArraySlice: [Dividend] = []

divArraySlice = Array(fullArray.prefix(8))  // <=== EIGHT points

The prefix() function returns a Subsequence type.  Therefore a need to wrap it in an Array() to get back to an array of Dividends that can be handed off to the Chart().

There is quite a lot of data processing that must be done and charting will help you find out what is missing.  For example, with my array of Dividends, I needed a sort operation to get them sequenced in chronological order.
    

    // Add computed property to sort dividends by Ex Dividend Date descending

    var sortedDividends: [Dividend] {

        dividendList?.sorted { first, second in

            guard let date1 = first.exDividendDate,

                  let date2 = second.exDividendDate else {

                return false

            }

            return date1 > date2  // Sort descending (newest first)

        } ?? []   // or empty list

    }

Yet that is not the order I wanted the Dividends to be plotted.  The order is reversed - so that the newest dividend is on the rightmost of the chart.

GroupBox("Dividends") {

          Chart(data.reversed() ) {

           // flow data from old date to -> new date on x-axis

This is where the Apple docs have a good set of examples... go look.  I counted 32 ChartContent modifiers... lots to choose from.  Adding any of a number of modifiers to the content will brighten and color your chart.