Callbacks in Flutter Funnel Chart

6 Aug 202622 minutes to read

The following callbacks are available for the Funnel chart.

onLegendItemRender

Triggers when the legend item is rendered. 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 Funnel 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: SfFunnelChart(
            legend: Legend(isVisible: true),
            onLegendItemRender: (LegendRenderArgs args){
              args.text = 'Legend Text';
              args.legendIconType = LegendIconType.diamond;
            }
          )
        )
      );
    }

onTooltipRender

Triggers while the tooltip is rendering. Here, you can customize the text, header, and 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: SfFunnelChart(
            onTooltipRender: (TooltipArgs args){
              args.text = 'Custom Text';
            },
            tooltipBehavior: _tooltipBehavior,
          )
        )
      );
    }

onDataLabelRender

Triggers when the data label is rendered. 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.
• viewportPointIndex - to get the viewport index value of the tapped data label.

DART

@override
    Widget build(BuildContext context) {
    
      return Scaffold(
        body: Center(
          child: SfFunnelChart(
            onDataLabelRender:(DataLabelRenderArgs args){
              args.text = 'Data label';
            },
            series: FunnelSeries<ChartData, String>(
              dataLabelSettings: DataLabelSettings(
                  isVisible: true
              )
            )
          )
        )
      );
    }

onLegendTapped

Triggers when the legend item is tapped. The onLegendTapped callback contains the following arguments.

• seriesIndex - specifies the current series index.
• pointIndex - specifies the current point index that is applicable for Funnel series.
• series - specifies the current series.

DART

@override
    Widget build(BuildContext context) {
    
      return Scaffold(
        body: Center(
          child: SfFunnelChart(
            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.

• seriesRenderer - specifies current series.
• seriesIndex - specifies the current series index.
• pointIndex - specifies the current point index.
• selectedColor - specifies color of the selected data points or series.
• unselectedColor - specifies color of the unselected data points or series.
• selectedBorderColor - specifies border color of the selected data points or series.
• selectedBorderWidth - specifies border width of the selected data points or series.
• unselectedBorderColor - specifies border color of the unselected data points or series.
• unselectedBorderWidth - specifies border width of the unselected data points or series.
• viewportPointIndex - to get the overall point index.

DART

late SelectionBehavior _selectionBehavior;

    @override
    void initState(){
      _selectionBehavior = SelectionBehavior(
               enable: true);              
      super.initState();
    }

    @override
    Widget build(BuildContext context) {
    
      return Scaffold(
        body: Center(
          child: SfFunnelChart(
          onSelectionChanged: (SelectionArgs args){
              args.selectedColor = Colors.red;
              args.unselectedColor = Colors.lightGreen;
            },
            series: FunnelSeries<ChartData, String>(
                selectionBehavior: _selectionBehavior
            )
          )
        )
      );
    }

onDataLabelTapped

Triggers when the data label of the data point in the series is tapped. 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 the data label (data label template). In this case, the custom widget specified in the DataLabelSettings.builder property can be wrapped using the GestureDetector, and this functionality can be achieved at the application level.

DART

Widget build(BuildContext context) {
      return Container(
        child: SfFunnelChart(
          onDataLabelTapped: (DataLabelTapDetails args) {
            print(args.seriesIndex);                 
          },
          series: FunnelSeries<Sample, DateTime>(
              dataSource: sample,
              xValueMapper: (Sample data, _) => data.x,
              yValueMapper: (Sample data, _) => data.y,
              dataLabelSettings: DataLabelSettings(
                isVisible: true),
          )
        )
      );
    }

onPointTap

Triggers when the series point is tapped. The onPointTap callback contains the following arguments.

• seriesIndex - specifies the current series index.
• pointIndex - specifies the current point index.
• dataPoints - holds the data point collection.
• viewportPointIndex - specifies the viewport index value of the tapped data point.

DART

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfFunnelChart(
            series: FunnelSeries<Sample, DateTime>(
                onPointTap: (ChartPointDetails details) {
                  print(details.pointIndex);
                  print(details.seriesIndex);
                }
              )
          )
        )
      );
    }

onPointDoubleTap

Triggers when the series point is double-tapped. The onPointDoubleTap callback contains the following arguments.

• seriesIndex - specifies the current series index.
• pointIndex - specifies the current point index.
• dataPoints - holds the data point collection.
• viewportPointIndex - specifies the viewport index value of the double-tapped data point.

DART

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfFunnelChart(
              series: FunnelSeries<Sample, DateTime>(
                onPointDoubleTap: (ChartPointDetails details) {
                  print(details.pointIndex);
                  print(details.seriesIndex);
                }
              )
          )
        )
      );
    }

onPointLongPress

Triggers when the series point is long-pressed. The onPointLongPress callback contains the following arguments.

• seriesIndex - specifies the current series index.
• pointIndex - specifies the current point index.
• dataPoints - holds the data point collection.
• viewportPointIndex - specifies the viewport index value of the long pressed data point.

DART

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfFunnelChart(
              series: FunnelSeries<Sample, DateTime>(
                onPointLongPress: (ChartPointDetails details) {
                  print(details.pointIndex);
                  print(details.seriesIndex);
                }
              )
          )
        )
      );
    }

onChartTouchInteractionUp

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

DART

@override
    Widget build(BuildContext context) {
      return Container(
            child: SfFunnelChart(
                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 tapped region using the position argument.

DART

@override
    Widget build(BuildContext context) {
        return Container(
            child: SfFunnelChart(
                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 tapped region using the position argument.

DART

@override
    Widget build(BuildContext context) {
        return Container(
          child: SfFunnelChart(
                onChartTouchInteractionDown: (ChartTouchInteractionArgs args){
                  print(args.position.dx.toString());
                  print(args.position.dy.toString());
                }
            )
        );
    }

onRendererCreated

Triggers when the series renderer is created. This callback can be used to obtain the FunnelSeriesController instance, which is used to access the public methods in the series.

DART

//Initialize the series controller
    FunnelSeriesController? funnelSeriesController;
    
    final List<ChartData> chartData = <ChartData>[
      ChartData(1, 24),
      ChartData(2, 20),
      ChartData(3, 23),
      ChartData(4, 57),
      ChartData(5, 30),
      ChartData(6, 41),
    ];

    @override
    Widget build(BuildContext context) {
      return Column(children: <Widget>[
        Container(
          child: SfFunnelChart(
            series: FunnelSeries<ChartData, dynamic>(
            dataSource: chartData,
            xValueMapper: (ChartData data, _) => data.x,
            yValueMapper: (ChartData data, _) => data.y,
            onRendererCreated: (FunnelSeriesController controller) {
              funnelSeriesController = controller;
            },
          ),
        ), 
      ),
      Container(
          child: ElevatedButton(
              onPressed: () {
                //Removed a point from data source
                chartData.removeAt(0);
                //Added a point to the data source
                chartData.add(ChartData(3, 23));
                //Here we accessed the public method of the series.
                funnelSeriesController!.updateDataSource(
                  addedDataIndexes: <int>[chartData.length - 1],
                  removedDataIndexes: <int>[0],
                );
              },
              child: Container(
                child: Text('Add a point'),
                )
              )
            )
          ]
        );
      }

    class ChartData {
      ChartData(this.x, this.y);
      final num x;
      final double? y;
    }