Swift 图表中的自定义图例 iOS 16

Question

How do I obtain colour imagery, or more generally, styling information for each legend entry to construct a custom legend in a chart in Swift Charts?

I have a chart here, with a legend positioned on the right, but using the content: argument of chartLegend does not pass any info into the closure to use. I would like to wrap the legend into a scroll view, so when there are too many entries, the chart will appear correctly on the screen, and the user can scroll through the legend below the chart.

Chart(points, id: \.self) { point in
     LineMark(
          x: .value("time/s", point.timestamp),
          y: .value("potential/mV", point.potential)
    )
    .foregroundStyle(by: .value("Electrode", point.electrode.symbol))
}
.chartLegend(position: .bottom)
// ...

Here is the chart with too many legend entries interfering with the chart sizing, resulting in cropping:

And here is the chart with only a few entries so that the chart is sized correctly, with no cropping, and the legend has text to discern between the electrodes they represent:

Any help is much appreciated.

Answer 1

Not scrolling but the chart legend can be placed on the side with code like this:

.chartLegend(position: .trailing, alignment: .top)

This gives more room for a legend. The legend won't scroll but all the items will be listed even if going past the end of the chart. The frame height can be increased. The example shows a before(default) and after(using the code above).

The colors can be assigned manually using the chartForegroundStyleScale like this after the end of the chart:

    .chartForegroundStyleScale([
        "Hong Kong": Color.green,
        "London": Color.red,
        "Taipei": Color.purple,
        "New York": Color.teal,
        "Paris": Color.pink,
        "Sydney": Color.orange
    ])

Symbols can be created based on the series:

.symbol(by: .value("City", series.city))