How to format the axis label text in the Flutter Radial Gauge?

Description

This article describes how to customize or format the label text for the radial axis in Flutter Radial Gauge.

Solution

You can add the prefix or suffix to the axis labels with the labelFormat property of axis and numberFormat property allows you to customize the numeric value of labels.

labelFormat – Allows you to add the required string as a prefix or suffix to axis label values.

numberFormat – Allows you to customize the axis labels with globalized number format.

The following steps explains how to set the labelFormat and numberFormat property to the axis label.

Step 1: Create the radial gauge widget and add a radial axis.

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Center(
      child: SfRadialGauge(axes: <RadialAxis>[
        RadialAxis(),
      ]),
    ),
  );
}

Step 2: To add the prefix or suffix to the axis labels, set the labelFormat property of axis. In the following code example, a suffix symbol “%” is added to axis labels.

axes: <RadialAxis>[
          RadialAxis(
            startAngle: 180,
            endAngle: 360,
            minimum: 0,
            maximum: 100,
            interval: 10,
            labelFormat: '{value}%',
          )
        ],

Output

Step 3: To customize the numeric value of axis labesl, set the numberFormat property of the axis as shown in following code example.

axes: <RadialAxis>[
          RadialAxis(
            startAngle: 180,
            endAngle: 360,
            minimum: 1000,
            maximum: 10000,
            interval: 1000,
            numberFormat: NumberFormat.compact(),
          )
        ],

To use NumberFormat , import 'package:intl/intl.dart' show NumberFormat;

Output

View the Github Sample here.