Callbacks in Flutter Circular Charts (SfCircularChart)

22 Apr 202115 minutes to read

Circular chart contains the below listed callbacks

onLegendItemRender

Triggers when the legend item is rendering. Here, you can customize the legend’s text, and shape. The onLegendItemRender Callback contains the following arguments.

  • text - specifies the content of the legend.
  • pointIndex - specifies the current point index that is applicable for circular chart type alone.
  • seriesIndex - specifies the current series index.
  • legendIconType - specifies the shape of the legend.
  • color - to get and set the color of the legend icon.
  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCircularChart(
                legend: Legend(isVisible: true),
                onLegendItemRender: (LegendRenderArgs args){
                  args.text = 'Legend Text';
                  args.legendIconType = LegendIconType.diamond;
                }
              )
            )
          );
        }

    onTooltipRender

    Triggers while tooltip is rendering. Here, you can customize the text, header, x and y-positions. The onTooltipRender Callback contains the following arguments.

    • text - specifies the content of the tooltip.
    • header - specifies the header content of the tooltip.
    • locationX - specifies the x position of tooltip.
    • locationY - specifies the y position of tooltip.
    • seriesIndex - specifies the current series index.
    • dataPoints - holds the data point collection.
    • pointIndex - specifies the current point index.
    • viewportPointIndex - to get the viewport index value of the tapped data label.
  • dart
  • late TooltipBehavior _tooltipBehavior;
    
        @override
        void initState(){
          _tooltipBehavior = TooltipBehavior(enable: true);
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCircularChart(
                onTooltipRender: (TooltipArgs args){
                  args.text = 'Custom Text';
                },
                tooltipBehavior:_tooltipBehavior,
              )
            )
          );
        }

    onDataLabelRender

    Triggers when data label is rendering. Text and text styles such as color, font size, and font weight can be customized. The onDataLabelRender Callback contains the following arguments.

    • text - specifies the content of the data label.
    • textStyle - used to change the text color, size, font family, font style, and font weight.
    • pointIndex - specifies the current point index.
    • seriesRenderer - specifies current series.
    • color - to get and set the color of data label.
    • viewportPointIndex - to get the viewport index value of the tapped data label.
    • dataPoints - to get the data points of the series.
  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCircularChart(
                onDataLabelRender:(DataLabelRenderArgs args){
                  args.text = 'Data label';
                },
                series: <CircularSeries>[
                  PieSeries<ChartData, String>(
                  dataLabelSettings: DataLabelSettings(
                      isVisible: true
                  )
                  )
                ]
              )
            )
          );
        }

    onPointTapped

    Triggers when tapping the series point. The onPointTapped Callback contains the following arguments.

  • dart
  • @override
          Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCircularChart(
                onPointTapped: (PointTapArgs args){
                  print(args.seriesIndex);
                  print(args.pointIndex);
                }
              )
            )  
          );
          }

    onLegendTapped

    Triggers when tapping the legend item. The onLegendTapped Callback contains the following arguments.

    • seriesIndex - specifies the current series index.
    • pointIndex - specifies the current point index that is applicable for circular series.
    • series - specifies the current series.
  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCircularChart(
                onLegendTapped: (LegendTapArgs args) {
                  print(args.seriesIndex);
                },
                legend: Legend(isVisible: true)
              )
            )
          );
        }

    onSelectionChanged

    Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The onSelectionChanged Callback contains the following arguments.

  • dart
  • late SelectionBehavior _selectionBehavior;
    
        @override
        void initState(){
          _selectionBehavior = SelectionBehavior(
                    enable: true);
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCircularChart(
              onSelectionChanged: (SelectionArgs args){
                  args.selectedColor = Colors.red;
                  args.unselectedColor = Colors.lightGreen;
                },
                series: <CircularSeries>[
                  PieSeries<ChartData, String>(
                    selectionBehavior: _selectionBehavior
                  )
                ]
              )
            )
          );
        }

    onDataLabelTapped

    Triggers when tapping on the data label of the data point in the series. The onDataLabelTapped Callback contains the following arguments.

    • position - specifies the position of the tapped data label in logical pixels.
    • seriesIndex - Specifies the series index of the tapped data label
    • pointIndex - Specifies the point index of the tapped data label.
    • text - Specifies the content of the tapped data label.
    • dataLabelSettings - to get the data label customization options specified in that particular series.
    • viewportPointIndex - to get the viewport index value of the tapped data label.

    NOTE

    This callback will not be called, when the builder is specified for data label (data label template). For this case, custom widget specified in the DataLabelSettings.builder property can be wrapped using the GestureDetector and this functionality can be achieved in the application level.

  • dart
  • @override
        Widget build(BuildContext context) {
          return Container(
            child: SfCartesianChart(
              onDatalabelTapped: (DataLabelTapArgs args) {
                print(args.seriesIndex);                 
              },
              series: <CircularSeries<Sample, DateTime>>[
                PieSeries<Sample, DateTime>(
                    dataSource: sample,
                    xValueMapper: (Sample sales, _) => sales.x,
                    yValueMapper: (Sample sales, _) => sales.y,
                    dataLabelSettings: DataLabelSettings(
                      isVisible: true),
                )
              ]
            )
          );
        }

    onChartTouchInteractionUp

    Triggers when tapped or clicked on the chart area. You can get the position of the tapped region using this callback.

    The callback contains the following argument:

    • position - used to get the position of the touch interaction.
  • dart
  • @override
        Widget build(BuildContext context) {
          return Container(
                child: SfCircularChart(
                    onChartTouchInteractionUp: (ChartTouchInteractionArgs args){
                      print(args.position.dx.toString());
                      print(args.position.dy.toString());
                    }
                )
            );
        }

    onChartTouchInteractionMove

    Triggers when touched or clicked and moved on the chart area. You can get the position of the moving region using this callback.

    The callback contains the following argument:

    • position - used to get the position of the touch interaction.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Container(
                child: SfCircularChart(
                    onChartTouchInteractionMove: (ChartTouchInteractionArgs args){
                      print(args.position.dx.toString());
                      print(args.position.dy.toString());
                    }
                )
            );
        }

    onChartTouchInteractionDown

    Triggers when touched or clicked on the chart area. You can get the position of the touched region using this callback.

    The callback contains the following argument:

    • position - used to get the position of the touch interaction.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Container(
              child: SfCircularChart(
                    onChartTouchInteractionDown: (ChartTouchInteractionArgs args){
                      print(args.position.dx.toString());
                      print(args.position.dy.toString());
                    }
                )
            );
        }

    onCreateShader

    Using this callback, you can fill the data points of circular charts series with gradient and image shader.

    The callback contains the following argument:

    • ChartShaderDetails - provides options to get the outer rect, inner rect, and render type (either series or legend)

    The onCreateShader callback is called once while rendering
    the data points and legend. For further reference on this callback, Check the Gradient and image shader section.