Tooltip in Flutter Funnel Chart (SfFunnelChart)

22 Apr 202111 minutes to read

Chart provides tooltip support for all the series. It is used to show information about the segment, when you tap on the segment. To enable the tooltip, you need to set enableTooltip property as true.

  • dart
  • late TooltipBehavior _tooltipBehavior;
    
        @override
        void initState(){
          _tooltipBehavior = TooltipBehavior(enable: true);
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: Container(
                child: SfFunnelChart(
                  tooltipBehavior: _tooltipBehavior,
                  series: FunnelSeries<SalesData, String>(
                      dataSource: chartData,
                      xValueMapper: (SalesData sales, _) =>   sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales
                    )
                )
              )
            )
          );
        }

    Tooltip

    Customizing the appearance

    You can use the following properties to customize the tooltip appearance.

    • color - used to change the background color of tooltip.
    • borderWidth - used to change the stroke width of the tooltip.
    • borderColor - used to change the stroke color of the tooltip.
    • opacity - used to control the transparency of the tooltip.
    • duration - specifies the duration for displaying the tooltip that defaults to 3000.
    • animationDuration - specifies the duration for animating the tooltip that default to 350.
    • elevation - specifies the elevation of tooltip.
    • canShowMarker - toggles the visibility of the marker in the tooltip.
    • header - specifies the header for tooltip. By default, the series name will be displayed in the header.
    • format - formats the tooltip text. By default, the tooltip will be rendered with x and y-values. You can add prefix or suffix to x, y, and series name values in the tooltip by formatting them.
    • shadowColor - specifies the color of the tooltip shadow.
  • dart
  • late TooltipBehavior _tooltipBehavior;
    
        @override
        void initState(){
            _tooltipBehavior = TooltipBehavior(
                    enable: true,
                    borderColor: Colors.red,
                    borderWidth: 2,
                    color: Colors.lightBlue
                  );
            super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: Container(
                height: 350,
                width: 350,
                child: SfFunnelChart(
                  tooltipBehavior: _tooltipBehavior,
                )
              )
            )
          );
        }

    Customized tooltip

    Label format

    By default, x and y value will be displayed in the tooltip, and it can be customized using format property as depicted in the below code snippet. You can show the below values in the tooltip. Also you can add prefix or suffix to these values.

    • X value - point.x
    • Y value - point.y
    • Bubble size - point.size
    • Name of the series - series.name
  • dart
  • late TooltipBehavior _tooltipBehavior;
    
        @override
        void initState(){
            _tooltipBehavior = TooltipBehavior(
                    enable: true, 
                    // Formatting the tooltip text
                    format: 'point.y%'
                  );
            super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: Container(
                child: SfFunnelChart(
                  tooltipBehavior: _tooltipBehavior
                )
              )
            )
          );
        }

    tooltip format

    Tooltip positioning

    The tooltip can be made to display in the fixed location or at the pointer location itself using the tooltipPosition property. This defaults to auto.

  • dart
  • late TooltipBehavior _tooltipBehavior;
    
        @override
        void initState(){
            _tooltipBehavior = TooltipBehavior(
                    enable: true, 
                    tooltipPosition: TooltipPosition.pointer
                  );
            super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: Container(
                child: SfFunnelChart(
                  tooltipBehavior: _tooltipBehavior
                )
              )
            )
          );
        }

    pointer tooltip

    Tooltip template

    You can customize the appearance of the tooltip with your own widget by using the builder property of tooltipBehavior.

  • dart
  • late TooltipBehavior _tooltipBehavior;
    
        @override
        void initState(){
            _tooltipBehavior = TooltipBehavior(
                    enable: true,
                    // Templating the tooltip
                    builder: (dynamic data, dynamic point, dynamic series,
                    int pointIndex, int seriesIndex) {
                      return Container(
                        child: Text(
                          'Point Y : ${point.y.toString()}'
                        )
                      );
                    }
                  );
            super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: Container(
                child: SfFunnelChart(
                  tooltipBehavior: _tooltipBehavior
                )
              )
            )
          );
        }

    Tooltip template

    Activation mode

    The activationMode property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is ActivationMode.singleTap.

    The ActivationMode enum contains the following values:

    • longPress - activates tooltip only when performing the long press action.
    • singleTap - activates tooltip only when performing single tap action.
    • doubleTap - activates tooltip only when performing double tap action.
    • none - hides the visibility of tooltip when setting activation mode to none.
  • dart
  • late TooltipBehavior _tooltipBehavior;
    
        @override
        void initState(){
            _tooltipBehavior = TooltipBehavior(
                    enable: true,
                    // Tooltip will be displayed on long press
                    activationMode: ActivationMode.longPress
                  );
            super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: Container(
                child: SfFunnelChart(
                  tooltipBehavior: _tooltipBehavior
                )
              )
            )
          );
        }

    Also refer tooltip event for customizing the tooltip further.