skills/syncfusion-flutter-cartesian-charts/references/axis-customization.md

Axis Customization

Table of Contents

• Axis Title
• Label Customization
• Gridlines and Tick Marks
• Range — Min, Max, Interval
• Inversed Axis
• Strip Lines (Plot Bands)
• Multi-Level Labels
• Axis Crossing (Zero Line)
• Axis Visibility

---

Axis Title

NumericAxis(
  title: AxisTitle(
    text: 'Revenue (USD)',
    textStyle: const TextStyle(
      color: Colors.blueGrey,
      fontSize: 14,
      fontWeight: FontWeight.bold,
    ),
  ),
)

---

Label Customization

CategoryAxis(
  labelStyle: const TextStyle(color: Colors.black87, fontSize: 12),
  labelRotation: -45,       
  labelIntersectAction: AxisLabelIntersectAction.rotate45,
  maximumLabels: 6,          
  edgeLabelPlacement: EdgeLabelPlacement.shift, 
)

Format numeric labels:

NumericAxis(
  numberFormat: NumberFormat.currency(symbol: '\$', decimalDigits: 0),
  labelFormat: '{value}%',
)

Format date labels:

DateTimeAxis(
  dateFormat: DateFormat.MMMd(),
  intervalType: DateTimeIntervalType.months,
)

---

Gridlines and Tick Marks

NumericAxis(
  majorGridLines: const MajorGridLines(
    width: 1,
    color: Colors.grey,
    dashArray: <double>[5, 5],
  ),
  minorTicksPerInterval: 4,
  minorGridLines: const MinorGridLines(
    width: 0.5,
    color: Colors.grey,
  ),
  majorTickLines: const MajorTickLines(size: 6, width: 1),
  minorTickLines: const MinorTickLines(size: 3, width: 0.5),
  axisLine: const AxisLine(width: 1, color: Colors.black),
)

To hide gridlines entirely:

NumericAxis(
  majorGridLines: const MajorGridLines(width: 0),
)

---

Range — Min, Max, Interval

NumericAxis(
  minimum: 0,
  maximum: 500,
  interval: 100,
  rangePadding: ChartRangePadding.round,
)

For date axes:

DateTimeAxis(
  minimum: DateTime(2024, 1, 1),
  maximum: DateTime(2024, 12, 31),
  interval: 2,
  intervalType: DateTimeIntervalType.months,
)

---

Inversed Axis

Reverses the axis direction (maximum value at the origin):

NumericAxis(isInversed: true)
CategoryAxis(isInversed: true)
DateTimeAxis(isInversed: true)

---

Plot Bands

Strip lines (Plot bands) highlight specific regions or values on the axis:

NumericAxis(
  plotBands: <PlotBand>[
    PlotBand(
      start: 50,
      end: 50,
      borderWidth: 2,
      borderColor: Colors.red,
      label: 'Target',
      labelStyle: const TextStyle(color: Colors.red),
    ),
    PlotBand(
      start: 80,
      end: 100,
      color: Colors.green.withOpacity(0.2),
      label: 'Safe Zone',
    ),
  ],
)

---

Multi-Level Labels

Group axis labels under parent categories:

CategoryAxis(
  multiLevelLabels: const <CategoricalMultiLevelLabel>[
    CategoricalMultiLevelLabel(
      start: 'Jan',
      end: 'Mar',
      text: 'Q1',
      level: 1,
    ),
    CategoricalMultiLevelLabel(
      start: 'Apr',
      end: 'Jun',
      text: 'Q2',
      level: 1,
    ),
  ],
  multiLevelLabelStyle: MultiLevelLabelStyle(
    borderType: MultiLevelBorderType.rectangle,
    borderColor: Colors.grey,
  ),
)

---

Axis Crossing (Zero Line)

Move the axis to cross at a specific value (e.g., center the chart at zero):

NumericAxis(
  crossesAt: 0,          
  placeLabelsNearAxisLine: true,
)

---

Axis Visibility

Hide an axis entirely:

NumericAxis(isVisible: false)

Useful when you want the chart area without visible axis lines or labels.