Axis types in Flutter Cartesian Charts (SfCartesianChart)

7 Jun 202124 minutes to read

Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis, and a horizontal (X) axis.

Vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the following types of scale:

  • Category
  • Numeric
  • Date-time
  • Date-time category
  • Logarithmic

Numeric axis

Numeric axis uses numerical scale and displays numbers as labels. By default, Numeric Axis is set to both horizontal axis and vertical axis.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: NumericAxis(), 
                            primaryYAxis: NumericAxis() 
                        )
                    )
                )
            );
        }

    Numeric axis

    Inversed numeric axis

    By using the isInversed property in Cartesian charts, the numeric axis can be inverted. Axis is rendered from the minimum value to the maximum value by default, and can be inverted from the maximum value to the minimum value.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: NumericAxis(isInversed: true), 
                            primaryYAxis: NumericAxis(isInversed: true) 
                        )
                    )
                )
            );
        }

    Inversed Numeric axis

    Customizing range

    To customize the range of an axis, use the minimum and maximum properties of NumericAxis. By default, nice range will be calculated automatically based on the provided data.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: NumericAxis(
                                minimum: 10,
                                maximum: 50
                            )  
                        )
                    )
                )
            );
        }

    Numeric axis range

    Customizing interval

    Axis interval can be customized using the interval property of ChartAxis. By default, nice interval will be calculated based on the minimum and maximum values of the provided data.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: NumericAxis(
                                // axis interval is set to 10
                                interval: 10
                            ) 
                        )
                    )
                )
            );
        }

    Numeric axis interval

    Applying padding to the range

    Padding can be applied to the minimum and maximum extremes of the axis range using the rangePadding property. Numeric axis supports the following types of padding:

    • additional
    • auto
    • none
    • normal
    • round

    additional

    When the value of rangePadding property is additional, the axis range will be rounded and an interval of the axis will be added as padding to the minimum and maximum values of the range.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: NumericAxis(
                                // Additional range padding is applied to y axis
                                rangePadding: ChartRangePadding.additional
                            )  
                        )
                    )
                )
            );
        }

    RangePadding additional

    auto

    When the value of rangePadding property is auto, the horizontal numeric axis takes none for padding calculation, whereas the vertical numeric axis takes normal for padding calculation. This is also the default value of rangePadding.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: NumericAxis(
                                rangePadding: ChartRangePadding.auto
                            )  
                        )
                    )
                )
            );
        }

    RangePadding auto

    none

    When the value of rangePadding property is none, padding will not be applied to the axis.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: NumericAxis(
                                rangePadding: ChartRangePadding.none
                            )  
                        )
                    )
                )
            );
        }

    normal

    When the value of rangePadding property is normal, padding is applied to the axis based on the default range calculation.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: NumericAxis(
                                rangePadding: ChartRangePadding.normal
                            )   
                        )
                    )
                )
            );
        }

    RangePadding normal

    round

    When the value of rangePadding property is round, axis range will be rounded to the nearest possible numeric value.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: NumericAxis(
                                rangePadding: ChartRangePadding.round
                            )  
                        )
                    )
                )
            );
        }

    RangePadding round

    Formatting the labels

    The numberFormat property of numeric axis formats the numeric axis labels with globalized label formats. The following code snippet demonstrates how to format numeric labels.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: NumericAxis(
                                // Y axis labels will be rendered with currency format
                                numberFormat: NumberFormat.simpleCurrency()
                            )
                        )
                    )
                )
            );
        }

    Number format

    Also refer label format and date format for formatting the labels
    further.

    NOTE

    You must import intl package for formatting labels using the NumberFormat class and date Format class.

    Decimal places

    The decimalPlaces property of numeric axis can be used to control the number of decimal digits of the numeric axis labels. The default value of decimalPlaces property is 3.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: NumericAxis(
                                deciamlPlaces: 5
                            ),
                            primaryYAxis: NumericAxis(
                                decimalPlaces: 4,
                                rangPadding: ChartRangePadding.none
                            )
                        )
                    )
                )
            );
        }

    Decimal Places

    NOTE

    • In order to control the decimal places of the y-axis labels, you need to use decimalPlaces property of the axis along with setting the rangePadding to none.
    • For x-axis labels, setting the decimalPlaces alone is enough.

    Category axis

    Category axis displays text labels instead of numbers. When the string values are bound to x values, then the x-axis must be initialized with CategoryAxis.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis()
                        )
                    )
                )
            );
        }

    Category Axis

    Placing labels between the ticks

    Labels in category axis can be placed on the ticks by setting the labelPlacement to onTicks. The default value of the labelPlacement property is betweenTicks. So, the labels will be placed between the ticks by default.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(
                                // Axis labels will be placed on the ticks
                                labelPlacement: LabelPlacement.onTicks
                            )
                        )
                    )
                )
            );
        }

    Displaying labels after a fixed interval

    To display the labels after a fixed interval n, set the interval property of ChartAxis to n. The default value of interval is null.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(
                                labelPlacement: LabelPlacement.betweenTicks,
                                interval: 2
                            ) 
                        )
                    )
                )
            );
        }

    Fixed interval

    Indexed category axis

    Category axis can also be rendered based on the index values of data source by setting the arrangeByIndex property to true in the axis.

  • dart
  • final List<ChartData> chartData = [
            ChartData('John', 10),
            ChartData('David', 9),
            ChartData('Brit', 10),
        ];
    
        final List<ChartData> chartData2 = [
            ChartData('Anto', 11),
            ChartData('Peter', 12),
            ChartData('Parker', 8),
        ];
    
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(
                                // Axis will be rendered based on the index values
                                arrangeByIndex: true
                            ),
                            series: <ChartSeries<ChartData, String>>[
                                ColumnSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y,
                                ),
                                ColumnSeries<ChartData, String>(
                                    dataSource: chartData2,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y,
                                )
                            ]
                        )
                    )
                )
            );
        }
    
        class ChartData {
            ChartData(this.x, this.y);
            final String x;
            final double? y;
        }

    Indexed category axis

    Date-time axis

    The date-time axis uses date-time scale and displays date-time values as axis labels in specified format.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis() 
                        )
                    )
                )
            );
        }

    DateTime axis

    Customizing range

    To customize the range of an axis, use the minimum and maximum properties of DateTimeAxis. By default, nice range will be calculated automatically based on the provided data.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(
                                minimum: DateTime(2010),
                                maximum: DateTime(2020)
                            )
                        )
                    )
                )
            );
        }

    DateTime range

    Date-time intervals

    The date-time intervals can be customized using the interval and intervalType properties of DateTimeAxis. For example, setting interval as 2 and intervalType to years, would consider 2 years to be an interval.

    The Flutter Chart supports the following types of interval for date-time axis:

    • auto
    • years
    • months
    • days
    • hours
    • minutes
    • seconds
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(
                                // Interval type will be months
                                intervalType: DateTimeIntervalType.months,
                                interval: 2
                            )
                        )
                    )
                )
            );
        }

    DateTime range

    See Also

    Double range support

    Date-time axis interval property can be customized using double value.

    For example, if you are rendering a series with months in x-axis with an interval of 0.5, then the interval will be calculated in days. The interval calculation may vary depending upon the number of days in the month.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(
                                 interval: 0.5,
                            )
                            primaryXAxis: NumericAxis()
                        )
                    )
                )
            );
         }

    doublerange

    Applying padding to range

    Padding can be applied to the minimum and maximum extremes of a range using the RangePadding property. The date-time axis supports the following types of padding:

    • none
    • round
    • additional
    • normal

    none

    When the value of rangePadding property is none, padding will not be applied to the axis.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(
                                rangePadding: ChartRangePadding.none
                            )
                        )
                    )
                )
            );
        }

    Range padding none

    round

    When the value of rangePadding property is round, axis range will be rounded to the nearest possible date-time value.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(
                                rangePadding: ChartRangePadding.round
                            ) 
                        )
                    )
                )
            );
        }

    RangePadding round

    additional

    When the value of rangePadding property is additional, range will be rounded and date-time interval of the axis will be added as padding to the minimum and maximum extremes of a range.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(
                                rangePadding: ChartRangePadding.additional
                            ) 
                        )
                    )
                )
            );
        }

    RangePadding round

    normal

    When the value of rangePadding property is normal, padding will be applied to the axis based on the default range calculation.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(
                                rangePadding: ChartRangePadding.normal
                            )
                        )
                    )
                )
            );
        }

    RangePadding normal

    Formatting the labels

    The dateFormat property formats the date-time axis labels. The default data-time axis label can be formatted with various built-in date formats, which depend on the given data source.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(
                                // X axis labels will be rendered based on the below format
                                dateFormat: DateFormat.y()
                            )  
                        )
                    )
                )
            );
        }

    Date format

    Also refer label format and number format for formatting the labels further.

    NOTE

    You must import intl package for formatting labels using the NumberFormat class and date Format class.

    Date-time category axis

    Date-time category axis is a combination of both DateTimeAxis and CategoryAxis. Date-time category axis is used to display the date-time values with non-linear intervals. For example, the business days alone have been depicted in a week here.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeCategoryAxis() 
                        )
                    )
                )
            );
        }

    DateTimeCategory axis

    Customizing range

    To customize the range of an axis, use the minimum and maximum properties of DateTimeCategoryAxis. By default, nice range will be calculated automatically based on the provided data.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeCategoryAxis(
                                minimum: DateTime(2010, 2, 3),
                                maximum: DateTime(2010, 2, 10)
                            )
                        )
                    )
                )
            );
        }

    DateTimeCategory range

    Date-time intervals

    The date-time category intervals can be customized using the interval and intervalType properties of DateTimeCategoryAxis. For example, To display the axis labels after a fixed interval n, set the interval property of ChartAxis to n and to display the labels in months, set the intervalType property of DateTimeCategoryAxis as months.

    The Flutter Chart supports the following types of interval for date-time category axis:

    • auto
    • years
    • months
    • days
    • hours
    • minutes
    • seconds
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeCategoryAxis(
                                // Interval type will be years
                                intervalType: DateTimeIntervalType.months,
                                interval: 2
                            )
                        )
                    )
                )
            );
        }

    DateTimeCategory intervals

    Formatting the labels

    The dateFormat property formats the date-time category axis labels. The default data-time category axis label can be formatted with various built-in date formats, which depend on the given data source.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeCategoryAxis(
                                // X axis labels will be rendered based on the below format
                                dateFormat: DateFormat.yMMMd()
                            )  
                        )
                    )
                )
            );
        }

    DateTimeCategory  date format

    Also refer label format and number format for formatting the labels further.

    NOTE

    You must import intl package for formatting labels using the NumberFormat class and date Format class.

    Logarithmic axis

    Logarithmic axis uses logarithmic scale and displays numbers as axis labels.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: NumericAxis(),
                            primaryYAxis: LogarithmicAxis() 
                        )
                    )
                )
            );
        }

    Logarithmic axis

    Change logarithmic range

    To customize the range of log axis, use the minimum, maximum, and interval properties. By default, the range will be calculated automatically based on the provided data.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: LogarithmicAxis(
                                minimum: 100,
                                maximum: 100000,
                                interval: 1,
                            )  
                        )
                    )
                )
            );
        }

    Logarithmic range

    Change log base value

    To customize the log base value, use the logBase property.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryYAxis: LogarithmicAxis(
                               logBase: 5,
                            )  
                        )
                    )
                )
            );
        }

    Logarithmic base

    Inversed logarithmic axis

    By using the isInversed Property in Cartesian charts, the logarithmic axis can be inverted. Axis gets rendered from the minimum value to the maximum value by default and can be inverted from the maximum value to the minimum value.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: LogarithmicAxis(
                              isInversed:true,
                            )  
                        )
                    )
                )
            );
        }

    Inversed logarithmic axis

    See Also