Labels in Flutter Linear Gauge (SfLinearGauge)

16 Jul 20217 minutes to read

The default style of axis labels is as follows.

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')
                )
            )
        )
    );
  }

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)) 
        )
    );
}

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 
                )
            )
        )
    );
}

Change label position

The linear axis allows to position the labels either inside or outside the axis track using the labelPosition 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
                ), 
            )
        )
    );
}

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
                ),             
            )
        )
    );
}

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
                ) 
            )
        )
    );
}

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;
    }
)

Number format

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

DART

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