Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (152).NET Core  (26)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (29)Blazor  (107)DocIO  (20)Essential JS 2  (72)Essential Studio  (164)File Formats  (20)Flutter  (115)JavaScript  (150)Microsoft  (102)PDF  (59)React  (33)Succinctly series  (124)Syncfusion  (490)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (27)Windows Forms  (55)WinUI  (27)WPF  (123)Xamarin  (132)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (108)Chart  (53)Cloud  (10)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (50)Development  (263)Doc  (7)DockingManager  (1)eBook  (94)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (15)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (233)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (25)Performance  (7)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (29)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (10)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (65)UI  (139)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (13)Web  (227)What's new  (146)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Customizing Axes in Flutter Charts: A Complete Guide

Customizing Axes in Flutter Charts: A Complete Guide

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 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
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
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 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 at 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
Axes with Opposed Positions in Flutter Charts

Note: For more details, refer to the Opposed axes in the Flutter Charts demo.

Inversed axis

Also, we can easily invert an axis using the isInversed 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
Flutter Charts with Inverted Axes

Axis crossing

You can place the axis wherever in the plot area using the crossesAt 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
Flutter Charts with Axis Crossing Feature

Also, you can position the axis labels out of the plot area by setting the placeLabelsNearAxisLine property to false.

Note: For more details, refer to the Axis crossing in the Flutter Charts demo.

Multiple axes

You can add n number of additional axes to the Flutter Charts using the axes property. Then, associate them with a series by specifying the name of the axis in the xAxisName for the horizontal axis and yAxisName 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
Multiple Axes in Flutter Charts

Note: For more details, refer to the Multiple axes in the Flutter charts demo.

Axis animation

Flutter Charts allow you to animate the axis element using the enableAxisAnimation 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
Axes Animation in Flutter Charts

Note: For more details, refer to the Axis animation in the Flutter Charts demo.

Axis label customization features

Handling label collision

Flutter Charts smartly handles axis label collision,  when they overlap with each other. Using the labelIntersectAction 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
Flutter Charts with Rotated Axis Labels

Note: For more details, refer to the Handling label collision in the Flutter Chart demo.

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 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
Edge Labels with Shifted Position

Note: For more details, refer to the Edge label placement in the Flutter Charts demo.

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 and dateFormat 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
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 property. You may also move the tick line inside the plot area using the tickPosition property.

SfCartesianChart(
                primaryXAxis: NumericAxis(
                       labelPosition: ChartDataLabelPosition.inside,
                       tickPosition: TickPosition.inside
                ),
)
Positioning Labels and Ticks Inside the Plot Area
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 property. You can rotate the labels by specifying the required degree.

SfCartesianChart(
                primaryXAxis: NumericAxis(
                       labelRotation: 90
                )
)
Rotating X-axis Labels to 90 Degrees
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 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
Setting Maximum Width for Labels

Note: For more details, refer to the Maximum width for the labels demo.

Fixed width for axis labels

Also, you can specify the width for axis labels using the labelsExtent 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.

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
Flutter Charts with Plot Bands

Note: For more details, refer to the Plot bands in the Flutter Charts demo.

Plot band recurrence

Also, you can mark an event that occurs recursively by enabling the plot band 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
Flutter Charts with Recursive Plot Bands

Note: For more details, refer to the Plot band recurrence demo.

Conclusion

Thanks for reading! I hope you are now more aware of all the axes features and customizing options available in Syncfusion 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 to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play, App Store, Web, Windows Store, macOS, and Snapcraft (Linux).

If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

You can also contact us through our support forumfeedback portal, or Direct-Trac support system. We are always happy to assist you! 

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top