Tooltip in Flutter Pyramid Chart

6 Aug 202616 minutes to read

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

The tooltip state is preserved during device orientation changes and browser resize. For example, if the tooltip’s duration is set to 10,000 ms, and you change the device orientation from portrait to landscape after 5,000 ms of display, the tooltip will remain visible 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: SfPyramidChart(
              tooltipBehavior: _tooltipBehavior,
              series: PyramidSeries<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 the 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 and defaults to 3000.
  • animationDuration - specifies the duration for animating the tooltip and defaults to 350.
  • elevation - specifies the elevation of the tooltip.
  • canShowMarker - toggles the visibility of the marker in the tooltip.
  • header - specifies the header for the tooltip. By default, the series name is displayed in the header.
  • format - formats the tooltip text. By default, the tooltip is rendered with x and y values. You can add a prefix or suffix to x, y, and series name values in the tooltip by formatting them.
  • shadowColor - specifies the color of the tooltip shadow.
  • shouldAlwaysShow - used to show or hide the tooltip.
  • textAlignment - aligns the text in the tooltip.
  • decimalPlaces - used to specify the number of decimals displayed in tooltip text.
  • shared - used to share the tooltip with same index points.
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: SfPyramidChart(
              tooltipBehavior: _tooltipBehavior,
              series: PyramidSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y)
            )
          )
        )
      );
    }

Customized tooltip

Label format

By default, x and y values are displayed in the tooltip, and they can be customized using the format property as shown in the code snippet below. You can show the following values in the tooltip and add a prefix or suffix to them.

  • 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: SfPyramidChart(
              tooltipBehavior: _tooltipBehavior,
              series: PyramidSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y)
            )
          )
        )
      );
    }

tooltip format

Tooltip positioning

The tooltip can be displayed in 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: SfPyramidChart(
              tooltipBehavior: _tooltipBehavior,
              series: PyramidSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y)
            )
          )
        )
      );
    }

pointer tooltip

Tooltip template

You can customize the tooltip appearance 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: SfPyramidChart(
              tooltipBehavior: _tooltipBehavior,
              series: PyramidSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y)
            )
          )
        )
      );
    }

Tooltip template

Activation mode

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

The ActivationMode enum includes 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: SfPyramidChart(
              tooltipBehavior: _tooltipBehavior,
              series: PyramidSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y)
            )
          )
        )
      );
    }

Also refer tooltip event for customizing the tooltip further.