Tooltip in Flutter Funnel Chart

6 Aug 202613 minutes to read

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

The tooltip state is preserved when the device orientation changes or when the browser is resized. For example, if the tooltip’s duration is set to 10,000 ms, and you change the orientation of your device from portrait to landscape after 5,000 ms of tooltip display, the tooltip will continue for the next 5,000 ms in landscape mode before disappearing.

late TooltipBehavior _tooltipBehavior;

    @override
    void initState() {
      _tooltipBehavior = TooltipBehavior(enable: true);
      super.initState();
    }

    @override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
          ChartData('Jan', 35),
          ChartData('Feb', 28),
          ChartData('Mar', 38),
          ChartData('Apr', 32),
          ChartData('May', 40)
        ];
      return Scaffold(
        body: Center(
          child: Container(
            child: SfFunnelChart(
              tooltipBehavior: _tooltipBehavior,
              series: FunnelSeries<ChartData, String>(
                  dataSource: chartData,
                  xValueMapper: (ChartData data, _) =>   data.x,
                  yValueMapper: (ChartData data, _) => data.y
                )
             )
          )
        )
      );
    }
    class ChartData {
      ChartData(this.x, this.y);
      final String x;
      final double? y;
    }

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, and the default is 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.
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
  • Name of the series - series.name 
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 displayed either at a fixed location or at the pointer location itself using the tooltipPosition property. This defaults to TooltipPosition.auto.

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.

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 tooltip visibility based on touch actions. The default value of this property is ActivationMode.singleTap.

The ActivationMode enum contains the following values:

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 to the tooltip event for further tooltip customization.