Annotation in Flutter Circular Charts (SfCircularChart)

22 Apr 20216 minutes to read

Chart supports annotations which allows you to mark the specific area of interest in the chart area. You can add the custom widgets using this annotations feature as depicted below.

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  child: SfCircularChart(
                    annotations: <CircularChartAnnotation>[
                      CircularChartAnnotation(
                        widget: 
                          Container(
                            child: const Text('Annotation')
                          ),
                      )
                    ]
                  )
                )
              )
            )
          );
        }

    Annotation

    Positioning the annotation

    The horizontalAlignment and verticalAlignment values can be specified to align the annotation widget either horizontally or vertically, and the also the property radius can be used for placing the annotation whose values range from ‘0%’ to ‘100%’. Defaults to 0%.

    Positioning based on Alignment and Radius

    To place the annotation based on the radius values, set the Radius, and for changing the alignment of the annotation use the horizontalAlignment and verticalAlignment properties of annotation are shown in the following code snippet.

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  child: SfCircularChart(
                    annotations: <CircularChartAnnotation>[
                      CircularChartAnnotation(
                        widget: Container(
                          child: const Text('Text')
                        ),
                        radius: '50%',
                        verticalAlignment: ChartAlignment.center,
                        horizontalAlignment: ChartAlignment.far  
                      )
                    ]
                  )
                )
              )
            )
          );
        }

    Positioning based on Alignment and radius

    Chart with watermark

    Chart supports watermark which allows you to mark the specific area of interest in the chart area. You can add the custom widgets and watermarks using this annotations feature as depicted below.

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: SafeArea(
              child: Center(
                child: Container(
                  child: SfCircularChart(
                    annotations: <CircularChartAnnotation>[
                     CircularChartAnnotation(
                     child: Container(
                      child: const Text(
                        '€ - \$ ',
                      style: TextStyle(
                      color: Color.fromRGBO(216, 225, 227, 1),
                      fontWeight: FontWeight.bold,
                      fontSize: 80),
                        ),
                      ),
                     )
                    ] 
                  )
                )
              )
            )
          );
        }

    Chart with Watermark