Hello Swift Charts

[deskside]

• [x] Video | Hello Swift Charts
• [x] Swift Charts: Raise the bar
• [ ] Design app experiences with charts
• [ ] Design an effective chart

[deskside]

[deskside]

---

---

BarMark PointMark LineMark

---

Dark Mode / Device Screen Sizes / Dynamic Type/ Voice Over / Audio Graphs/ High-Contrast/Localization/ Multi-Platform

[deskside]

Apple usage of Chart

[deskside]

GropuBox{}

BarMark()
.foregroundStyle(Color("barColor")
.accessibilityLabel($0.name)
.accessibilityValue( "\($0.sales) sold")
.interpolationMethod(.catmullRom) // make line more smooth
.position(by: .value("City", series.city)) // make 2 data seperate

Chart{
  ForEach(dailySales, id: \.day) {
    LineMark(
      x: .value ( "Day",  $0.day, unit: .day),
      y: .value( " Sales", $0.sales)
)}}

[deskside]

AreaMark + LineMark

BarMark + RectangleMark

BarMark + RuleMark

[deskside]

[deskside]

legend ⑤ countable (on map, picture) 图例 túlì axes axis

Chart{...}
.chartYAxis{
  AxisMarks(preset: .extended, position: .leading)
}
.chartXAxis(.hidden)
.chartLegend(.hidden)

[deskside]

.chartPlotStyle { plotArea in
  plotArea
  .background(.pink.opacity(0.2))
  .border(.pink, width:1)
}