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 outer bounds (the bottom gridline). 

 The Tick marks are offset so as to cross the axis lines.

It required a lot of experimentation for me to learn why the 3rd set of marks is "required." It is because, in many cases, the top or maybe the bottom label (boundary condition) will not display.  This is generally because of an alignment issue at that boundary.  So, a specific label with a unique alignment is often the solution.

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.

The more I learn... the less I know...

It appears to me that so many of the modifiers for charts are connected and have effects on the others...  it's complex.  So if you find that YOUR results are not what others are reporting/telling... then you can almost bet it is a undocumented relationship that is interfering with the results.  Experiment!  Simplify! Create a very small targeted example.  It's all about learning.

It turns out that the basic chart (plot area with a graph of the line and the green gradient is the easy part.  The transaction annotation is months of effort in the making...  lots of trials, many errors... and the desired end state has constantly shifted.  Sometimes the shift is because of what I think is a limitation and a capability.  Other times, it is an evolution of a happy accident, where I now see something that might just work out better.

For example, in the URBN stock chart, that label bubble (white background with green text "95 @ $53") is what is intended to be centered on the black price horizontal line.  But when I got the sell bubble also working...  the location at the price line's start and end just makes much more sense.

You have to be open to relearning what your requirements are. If they are static and created when you know the least about your product, you will miss out on the benefits of learning.