---
title: "chartXAxis(content:)"
framework: swiftui
role: symbol
role_heading: Instance Method
path: "swiftui/view/chartxaxis(content:)"
---

# chartXAxis(content:)

Configures the x-axis for charts in the view.

## Declaration

```swift
nonisolated func chartXAxis<Content>(@AxisContentBuilder content: () -> Content) -> some View where Content : AxisContent

```

## Parameters

- `content`: The axis content.

## Discussion

Discussion Use this modifier to customize the x-axis of a chart. Provide an AxisMarks builder that composes AxisGridLine, AxisTick, and AxisValueLabel structures to form the axis. Omit components from the builder to omit them from the resulting axis. For example, the following code adds grid lines to the x-axis: .chartXAxis {     AxisMarks {         AxisGridLine()     } } You can also compose multiple AxisMarks to create more complex axes: Chart(BatteryData.data, id: \.date) {      BarMark(          x: .value("Time", $0.date ..< $0.date.advanced(by: 1800)),          y: .value("Battery Level", $0.level)      )      .foregroundStyle(.green)  }  .chartXAxis {      AxisMarks(values: .stride(by: .hour, count: 3)) { value in          if let date = value.as(Date.self) {              let hour = Calendar.current.component(.hour, from: date)              switch hour {              case 0, 12:                  AxisValueLabel {                      VStack {                          Text(date, format: .dateTime.hour())                          if value.index == 0 {                              Text(date, format: .dateTime.month().day())                          }                      }                  }              default:                  AxisValueLabel(format: .dateTime.hour(.defaultDigits(amPM: .omitted)))              }

if hour == 0 {                  AxisGridLine(stroke: StrokeStyle(lineWidth: 0.5))                  AxisTick(stroke: StrokeStyle(lineWidth: 0.5))              } else {                  AxisGridLine()                  AxisTick()              }          }      }  }  .chartYAxis {      AxisMarks(values: [0, 25, 50, 75, 100]) {          AxisGridLine()      }

AxisMarks(values: [0, 50, 100]) {          AxisValueLabel(format: Decimal.FormatStyle.Percent.percent.scale(1))      }  }

The above example above customizes the x-axis using two AxisMarks declarations. The first creates a grid line for every hour in the day. The second adds a tick and label for every six hours in the day, with a second line showing the date for the very beginning of the axis. note: To add an axis label, use one of the label modifiers, like chartXAxisLabel(position:alignment:spacing:content:).

## See Also

### Axes

- [chartXAxis(_:)](swiftui/view/chartxaxis(_:).md)
- [chartXAxisStyle(content:)](swiftui/view/chartxaxisstyle(content:).md)
- [chartYAxis(_:)](swiftui/view/chartyaxis(_:).md)
- [chartYAxis(content:)](swiftui/view/chartyaxis(content:).md)
- [chartYAxisStyle(content:)](swiftui/view/chartyaxisstyle(content:).md)
- [chartZAxis(_:)](swiftui/view/chartzaxis(_:).md)
- [chartZAxis(content:)](swiftui/view/chartzaxis(content:).md)