Labels in Fluter Linear Gauge (SfLinearGauge)

23 Apr 20217 minutes to read

The default style of axis labels is as follows.

Initialize linear gauge for axis

Customize label styles

Axis labels can be customized using the axisLabelStyle property of SfLinearGauge. The axisLabelStyle property has the following properties to customize the axis labels.

  • color – Allows to customize the color of the labels.
  • fontFamily – Allows to specify the font family for labels.
  • fontStyle – Allows to specify the font style for labels.
  • fontWeight – Allows to specify the font weight for labels.
  • fontSize – Allows to specify the font size for labels.
  • dart
  • @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                body: Center(
                    child: SfLinearGauge(
                        axisLabelStyle: TextStyle(
                            color: Colors.red,
                            fontSize: 15,
                            fontStyle: FontStyle.italic,
                            fontWeight: FontWeight.bold,
                            fontFamily: 'Times')
                    )
                )
            )
        );
      }

    Customize linear gauge axis label style

    Change visibility

    The showLabels property of SfLinearGauge allows
    you to show or hide the visibility of axis labels. The default value of this property is true.

  • dart
  • @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
              body: Center( 
                      child: SfLinearGauge(showLabels: false)) 
            )
        );
    }

    Change visibility

    Customize interval between labels

    The interval between labels can be customized using the interval property of SfLinearGauge. The major ticks are generated based on this interval property.

  • dart
  • @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
              body: Center( 
                      child: SfLinearGauge(
                       interval: 20 
                    )
                )
            )
        );
    }

    Set label interval in axis track

    Change label position

    The linear axis allows to position the labels either inside or outside the axis track using the labelsPosition property. By default, labels are positioned inside the axis track.

  • dart
  • @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
              body: Center( 
                    child: SfLinearGauge(
                        tickPosition: LinearElementPosition.outside,
                        labelPosition: LinearLabelPosition.outside
                    ), 
                )
            )
        );
    }

    Set linear gauge label position

    Change label offset

    The labelOffset property allows you to adjust the distance between the tick-end and the labels.

  • dart
  • @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
              body: Center( 
                    child: SfLinearGauge(
                      labelOffset:20
                    ),             
                )
            )
        );
    }

    Set linear gauge label offset

    Customize maximum number of visible labels

    By default, a maximum of three labels is displayed for every 100 logical pixels in an axis. The maximum number of labels that should present within 100 logical pixels length can be customized using the maximumLabels property of the axis.

  • dart
  • @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
              body: Center( 
                      child: SfLinearGauge(
                        maximumLabels: 5
                    ) 
                )
            )
        );
    }

    Set maximum number of labels in axis track

    Customize label text

    You can format or change the whole numeric label text using the labelFormatterCallback.

  • dart
  • SfLinearGauge(
        labelFormatterCallback: (label) {
          if (label == '0') {
            return 'Start';
          }
    
          if (label == '50') {
            return 'Mid';
          }
    
          if (label == '100') {
            return 'End';
          }
    
          return label;
        }
    )

    Customize Label Text in axis track

    Number format

    The numberFormat property is used to format the numeric labels. The default value of this property is null.

  • dart
  • SfLinearGauge(
      numberFormat: NumberFormat("\$")
    ),

    Customize Label Format in Axis Label