---
title: "Customizing Axes in Flutter Charts: A Complete Guide"
published_at: "2021-11-18T11:00:28+00:00"
modified_at: "2026-02-10T06:38:53+00:00"
url: "https://www.syncfusion.com/blogs/post/customizing-axes-in-flutter-charts-a-complete-guide"
excerpt: "Customize axes in Flutter charts with Syncfusion. Learn to format labels, set ranges, add multiple axes, and enhance data visualization with a complete step-by-step guide."
taxonomy_category:
  - "Chart"
  - "Desktop"
  - "Flutter"
  - "Mobile"
  - "Tips and Tricks"
  - "Web"
taxonomy_post_tag:
  - "Charts"
  - "Customization"
  - "Flutter"
  - "Mobile"
  - "Web Development"
---

# Customizing Axes in Flutter Charts: A Complete Guide

[Dharanidharan Dharmasivam](https://www.syncfusion.com/blogs/author/dharanidharan-dharmasivam)

![Customizing Axes in Flutter Charts: A Complete Guide](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Customizing-Axes-in-Flutter-Charts-A-Complete-Guide.png)


Charts are wonderful data visualizing tools. They can easily show even a huge volume of complex data within a single window. Still, to make a chart appealing, it is necessary to customize the appearance of its elements.

Syncfusion [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts)
 is a well-crafted charting widget for visualizing data. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios. It provides options to customize each element in it so that we can easily design our charts as desired.

An axis is a significant element in a chart. Typically, there are two axes: x and y. We can plot the values (x-axis) for the corresponding categories (y-axis). Well-designed axes clearly convey data meaning, thus enhancing the readability and appearance of the chart.

In this blog, I am going to walk you through all the major features and customizing options available for the axes in the Syncfusion Flutter Charts widget.

## Axis elements

First, let’s have a look at the axis elements in the Flutter Charts widget:

- Axis line
- Axis title
- Major and minor grid lines
- Major and minor tick lines
- Axis labels

![Basic Elements of an Axis in Flutter Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Basic-Elements-of-an-Axis-in-Flutter-Charts.png)

Basic Elements of an Axis in Flutter Charts

In the following code example, we are customizing the axes elements in the Flutter Charts.

```
SfCartesianChart(

            // X-axis customization.
            primaryXAxis: NumericAxis(
                    //Customize the axis line.
                    axisLine: AxisLine(color: Colors.cyan, width: 2),

                    //Grid line customization.
                    majorGridLines:
                        MajorGridLines(color: Colors.cyan, width: 1),

                    //Minor grid line customization.
                    minorGridLines:
                        MinorGridLines(color: Colors.black12, width: 1),

                    //Major tick line customization.
                    majorTickLines:
                        MajorTickLines(color: Colors.cyan, size: 10),

                    //Minor tick line customization.
                    minorTickLines:
                        MinorTickLines(color: Colors.black12, size: 7),

                    //Axis title customization.
                    title: AxisTitle(text: 'X-Axis title'),

                    //Axis label customization.
                    labelStyle: TextStyle(color: Colors.blueGrey, fontSize: 11),
               ),
               
               // Y-axis customization.
               primaryYAxis: LogarithmicAxis(
                    
                    //Customize the axis line.
                    axisLine: AxisLine(color: Colors.cyan, width: 2),

                    //Major grid line customization.
                    majorGridLines:
                        MajorGridLines(color: Colors.cyan, width: 1),

                    //Minor grid line customization.
                    minorGridLines:
                        MinorGridLines(color: Colors.black12, width: 1),

                    //Major tick line customization.
                    majorTickLines:
                        MajorTickLines(color: Colors.cyan, size: 10),

                    //Minor tick line customization.
                    minorTickLines:
                        MinorTickLines(color: Colors.black12, size: 7),

                    //Axis title customization.
                    title: AxisTitle(text: 'Y-Axis title'),

                    //Axis label customization.
                    labelStyle:
                        TextStyle(color: Colors.blueGrey, fontSize: 11)
                ),
)
```

![Customizing the Axes Elements in Flutter Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Customizing-the-Axis-Elements-in-Flutter-Charts.png)

Customizing the Axes Elements in Flutter Charts

## Axes customization features

### Opposed axis

By default, the horizontal and vertical axes are at the bottom and left sides of a chart, respectively. If you wish to put the axes in the opposite positions, then you can do so using the [opposedPosition](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/opposedPosition.html)
 property of the respective axes. If you set this property to true, then the horizontal axis will be positioned at the top and the vertical axis will be positioned on the right side of the chart.

Refer to the following code example.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                          opposedPosition: true
                ),
                primaryYAxis: NumericAxis(
                       opposedPosition: true,
                )
)
```

![Axes with Opposed Positions in Flutter Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Axes-with-Opposed-Position-in-Flutter-Charts.png)

Axes with Opposed Positions in Flutter Charts

**Note:** For more details, refer to the [Opposed axes in the Flutter Charts demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/opposed-axes)
.

### Inversed axis

Also, we can easily invert an axis using the [isInversed](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html)
 property. This property enables us to render the horizontal axis from right to left and the vertical axis from top to bottom.

By default, the Flutter Charts renders the horizontal axis from left to right and the vertical axis from bottom to top.

Refer to the following code example.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                          isInversed: true
                ),
                primaryYAxis: NumericAxis(
                       isInversed: true,
                )
)
```

![Flutter Charts with Inverted Axes](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Flutter-Chart-with-Inverted-Axis.png)

Flutter Charts with Inverted Axes

### Axis crossing

You can place the axis wherever in the plot area using the [crossesAt](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/crossesAt.html)
 property. This is used to place the axis crossing on another axis based on the value.

Refer to the following code example.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                         crossesAt: 250
                ),
                primaryYAxis: NumericAxis(
                       crossesAt: 3
                )
)
```

![Flutter Charts with Axis Crossing Feature](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Flutter-Chart-with-Axis-Crossing-Feature.png)

Flutter Charts with Axis Crossing Feature

Also, you can position the axis labels out of the plot area by setting the [placeLabelsNearAxisLine](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/placeLabelsNearAxisLine.html)
 property to false.

**Note:** For more details, refer to the [Axis crossing in the Flutter Charts demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/axis-crossing)
.

### Multiple axes

You can add n number of additional axes to the Flutter Charts using the [axes](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/axes.html)
 property. Then, associate them with a series by specifying the name of the axis in the [xAxisName](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/xAxisName.html)
 for the horizontal axis and [yAxisName](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/yAxisName.html)
 for the vertical axis in the series.

Refer to the following code example.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                  title: AxisTitle(text:'Primary x-axis')
                ),

                primaryYAxis: NumericAxis(
                  title: AxisTitle(text:'Primary y-axis')
                ),

                axes: [
                  NumericAxis(
                    name:'xAxis',
                    title: AxisTitle(text:'Secondary x-axis'),
                    opposedPosition: true
                  ),
                   NumericAxis(
                    name:'yAxis',
                    title: AxisTitle(text:'Secondary y-axis'),
                    opposedPosition: true
                  )
                ],
                series: <ChartSeries<_ChartData, dynamic>>[
                  SplineSeries<_ ChartData, dynamic>(
                    dataSource: chartData,
                    xValueMapper: (_ChartData data, _) => data.x,
                    yValueMapper: (_ChartData data, _) => data.y,
                  ),

                  SplineSeries<_ ChartData, dynamic>(
                    dataSource: chartData2,
                    xValueMapper: (_ChartData data, _) => data.x,
                    yValueMapper: (_ChartData data, _) => data.y,
                  
                    //Bind the x-axis to secondary x-axis.
                    xAxisName: 'xAxis',

                    //Bind the y-axis to secondary y-axis.
                    yAxisName: 'yAxis'
                  )]
            )
```

![Multiple Axes in Flutter Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Multiple-Axes-in-Flutter-Chart.png)

Multiple Axes in Flutter Charts

**Note:** For more details, refer to the [Multiple axes in the Flutter charts demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/multiple-axis-chart)
.

### Axis Animation

Flutter Charts allow you to animate the axis element using the [enableAxisAnimation](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableAxisAnimation.html)
 property. If you enable this property, all the axis elements will be animated when the axis’s visible range is changed dynamically. The visible range of the axis will change while zooming, panning, or updating the data points.

Refer to the following code.

```
SfCartesianChart(
      enableAxisAnimation: true
)
```

![Axes Animation in Flutter Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Axes-Animation-in-Flutter-Chart.gif)

Axes Animation in Flutter Charts

**Note:** For more details, refer to the [Axis animation in the Flutter Charts demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/axis-animation)
.

## Axis label customization features

### Handling label collision

Flutter Charts smartly handles axis label collision, when they overlap with each other. Using the [labelIntersectAction](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html)
 property, you can hide, wrap, and rotate the labels to 45 or 90 degrees. This can be useful in space constraint scenarios.

Refer to the following code example.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
         labelIntersectAction: AxisLabelIntersectAction.rotate45
                )
)
```

![Flutter Charts with Rotated Axis Labels](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Flutter-Chart-with-Rotated-Axis-Labels.png)

Flutter Charts with Rotated Axis Labels

**Note:** For more details, refer to the [Handling label collision in the Flutter Chart demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/handling-labels-collision)
.

### Edge label placement

Labels near the borders of an axis with extended text may appear partially outside the chart. To avoid partial labels appearing at the corners, utilize the [edgelabelPlacement](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html)
 property. With this, you can easily hide or shift the edge labels.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                       edgeLabelPlacement: EdgeLabelPlacement.shift
                ),
                primaryYAxis: NumericAxis(
                       edgeLabelPlacement: EdgeLabelPlacement.shift
                )
)
```

![Edge Labels with Shifted Position](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Edge-Labels-with-Shifted-Position.png)

Edge Labels with Shifted Position

**Note:** For more details, refer to the [Edge label placement in the Flutter Charts demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/edge-label-placement)
.

### Label format

The globalized format is important when we use an application. Here, Charts provide an efficient way to format the axis labels. You can easily format the numbers and date-time values using the [numberFormat](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/numberFormat.html)
 and [dateFormat](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DateTimeAxis/dateFormat.html)
 properties, respectively.

```
//Import intl to use date and number formats.
import 'package:intl/intl.dart';

SfCartesianChart(
                primaryXAxis: DateTimeAxis(
                       dateFormat: DateFormat.MMM()
                ),
                primaryYAxis: NumericAxis(
                       numberFormat: NumberFormat.simpleCurrency()
                )
)
```

![Formatting Axis Labels in Flutter Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Formatting-Axis-Label-in-Flutter-Chart.png)

Formatting Axis Labels in Flutter Charts

### Label position

You can reduce the space occupied by the axis labels or move the axis labels anywhere inside the plot area using the [labelPosition](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelPosition.html)
 property. You may also move the tick line inside the plot area using the [tickPosition](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/tickPosition.html)
 property.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                       labelPosition: ChartDataLabelPosition.inside,
                       tickPosition: TickPosition.inside
                ),
)
```

![Positioning Labels and Ticks Inside the Plot Area](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Positioning-Labels-and-Ticks-Inside-the-Plot-Area.png)

Positioning Labels and Ticks Inside the Plot Area

### Label rotation

If the axis labels are so lengthy, you may rotate the labels to view them better with the [labelRotation](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelRotation.html)
 property. You can rotate the labels by specifying the required degree.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                       labelRotation: 90
                )
)
```

![Rotating X-axis Labels to 90 Degrees](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Rotating-X-axis-Labels-to-90-Degree.png)

Rotating X-axis Labels to 90 Degrees

### Maximum width for labels

If you render a bar chart with lengthy labels, the entire label will be visible, but the chart seems to be small. So, to avoid this, you can specify the maximum width for axis labels with the [maximumLabelWidth](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/maximumLabelWidth.html)
 property.

If the axis label width exceeds the provided width, then it will be trimmed. An ellipsis (…) will be added at the end of the label and a tooltip will be shown while tapping or hovering the trimmed labels.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                       maximumLabelWidth: 90
                )
)
```

![Setting Maximum Width for Labels](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Setting-Maximum-Width-for-Labels.png)

Setting Maximum Width for Labels

**Note:** For more details, refer to the [Maximum width for the labels demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/maximum-width-for-labels)
.

### Fixed width for axis labels

Also, you can specify the width for axis labels using the [labelsExtent](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelsExtent.html)
 property. But here, the width represents the space between the axis line and the axis title. If an axis label width exceeds the provided width, then the axis label gets trimmed, and an ellipsis will be added. A tooltip will be shown on tapping or hovering over the trimmed labels.

```
SfCartesianChart(
                primaryXAxis: NumericAxis(
                       labelsExtent: 90
                )
)
```

**Note:** For more details, refer to the [Enable label extent demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/maximum-width-for-labels)
.

## Additional axis elements

### Plot bands

You can highlight a specific range in the plot area using the plot band ( stripline). This feature is used to shade the different ranges in the plot area, which will further enhance the readability of the chart.

```
SfCartesianChart(
       primaryXAxis: NumericAxis(
           plotBands: <PlotBand>[
                  PlotBand(
                      start: 2001,
                      end: 2002,
                      text: 'Segment 1',
                      color: const Color.fromRGBO(101, 199, 209, 1)),
                  PlotBand(
                      start: 2002,
                      end: 2003,
                      text: 'Segment 2',
                      color: const Color.fromRGBO(254, 213, 2, 1)),
                  PlotBand(
                      start: 2003,
                      end: 2004,
                      text: 'Segment 3',
                      color: const Color.fromRGBO(140, 198, 62, 1)),
                  PlotBand(
                      start: 2004,
                      end: 2005,
                      text: 'Segment 4',
                      color: const Color.fromRGBO(217, 112, 1, 1))
                ]
        )
)
```

![Flutter Charts with Plot Bands](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Flutter-Chart-with-Plot-Bands.png)

Flutter Charts with Plot Bands

**Note:** For more details, refer to the [Plot bands in the Flutter Charts demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/plot-band)
.

### Plot band recurrence

Also, you can mark an event that occurs recursively by enabling the [plot band](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/plotBands.html)
 to be drawn repeatedly at regular intervals.

```
SfCartesianChart(
       primaryYAxis: NumericAxis(
           plotBands: <PlotBand>[
                  PlotBand(
                      isRepeatable: true,
                      repeatEvery: 100,
                      size: 50,
                      start: 0,
                      end: 100,
                      repeatUntil: 500,
                      shouldRenderAboveSeries: false,
                      color: Colors.grey.shade300
                  )
            ]
      )
)
```

![Flutter Charts with Recursive Plot Bands](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Flutter-Chart-with-Recursive-Plot-Band.png)

Flutter Charts with Recursive Plot Bands

**Note:** For more details, refer to the [Plot band recurrence demo](https://flutter.syncfusion.com/#/cartesian-charts/axis-features/plot-band-recurrence)
.

## Conclusion

Thanks for reading! I hope you are now more aware of all the axes features and customizing options available in Syncfusion [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts)
. With these features, you can enhance the appearance and readability of the data in your charts. Try them out, post any questions, and let us know which axis feature is useful for your scenario in the comments section below.

Browse our [documentation](https://help.syncfusion.com/flutter/introduction/overview)
 to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this [GitHub repo](https://github.com/syncfusion/flutter-examples)
. Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en)
, [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341)
, [Web](https://flutter.syncfusion.com/)
, [Windows Store](https://www.microsoft.com/en-in/p/syncfusion-flutter-gallery/9nhnbwcsf85d#activetab=pivot:overviewtab)
, [macOS](https://install.appcenter.ms/orgs/syncfusion-demos/apps/syncfusion-flutter-gallery/distribution_groups/release)
, and [Snapcraft (Linux)](https://snapcraft.io/syncfusion-flutter-gallery)
.

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out these features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums)
, [feedback portal](https://www.syncfusion.com/feedback)
, or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents)
. We are always happy to assist you!

## Related blogs

- [Updating Live Data in Flutter Charts – A Complete Guide](https://www.syncfusion.com/blogs/post/updating-live-data-in-flutter-charts.aspx)
- [7 Best Flutter Charts for Visualizing Income and Expenditure](https://www.syncfusion.com/blogs/post/7-best-flutter-charts-for-visualizing-income-and-expenditure.aspx)
- [Introducing the New Flutter Spark Charts Widget](https://www.syncfusion.com/blogs/post/introducing-the-new-flutter-spark-charts-widget.aspx)
- [Introducing the Box and Whisker Chart in Flutter](https://www.syncfusion.com/blogs/post/introducing-the-box-and-whisker-chart-in-flutter.aspx)