Methods in Flutter Circular Charts (SfCircularChart)

13 Oct 202317 minutes to read

Methods in tooltipBehavior

Show method in tooltipBehavior

The show method is used to activate the tooltip at the specified x and y point values.

late SfCircularChart chart;
    late TooltipBehavior _tooltipBehavior;

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

    @override
    Widget build(BuildContext context) {

      final List<ChartData> chartData = [
          ChartData(10, 17),
          ChartData(20, 34),
          // Add the required data
      ];

      chart = SfCircularChart(
        tooltipBehavior: _tooltipBehavior,
          series: <CircularSeries>[
            PieSeries<ChartData, double>(
              enableTooltip: true,
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y)
        ]
      );

      return Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              TextButton(
                child: Text('Show'),
                onPressed: show
              ),
              Container(child: chart)
            ]
          )
        )
      );
    }

    void show() {
      _tooltipBehavior.show(10, 17);
    }

showByIndex method in tooltipBehavior

The showByIndex method is used to display the tooltip at the specified series and point index.

The below mentioned arguments are given to the showByIndex method:

seriesIndex - index of the series for which the pointIndex is specified.

pointIndex - index of the point for which the tooltip should be shown.

late SfCircularChart chart;
    late TooltipBehavior _tooltipBehavior;

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

    @override
    Widget build(BuildContext context) {

      final List<ChartData> chartData = [
          ChartData(10, 17),
          ChartData(20, 34),
          // Add the required data
      ];

      chart = SfCircularChart(
        tooltipBehavior: _tooltipBehavior,
          series: <CircularSeries>[
            PieSeries<ChartData, double>(
              enableTooltip: true,
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y)
        ]
      );

      return Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              TextButton(
                child: Text('Show'),
                onPressed:(){
                    _tooltipBehavior.showByIndex(0,1);
                }
              ),
              Container(child: chart)
            ]
          )
        )
      );
    }

showByPixel method in tooltipBehavior

The showByPixel method is used to display the tooltip at the specified x and y-positions.

x & y - logical pixel values to position the tooltip.

late SfCircularChart chart;
    late TooltipBehavior _tooltipBehavior;

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

    @override
    Widget build(BuildContext context) {

      final List<ChartData> chartData = [
          ChartData(10, 17),
          ChartData(20, 34),
          // Add the required data
      ];

      chart = SfCircularChart(
        tooltipBehavior: _tooltipBehavior,
          series: <CircularSeries>[
            PieSeries<ChartData, double>(
              enableTooltip: true,
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y)
        ]
      );

      return Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              TextButton(
                child: Text('Show'),
                onPressed:(){
                  _tooltipBehavior.showByPixel(230.0,470.0);
                }
              ),
              Container(child: chart)
            ]
          )
        )
      );
    }

Hide method in tooltipBehavior

The hide method is used to hide the displaying tooltip programmatically.

late SfCircularChart chart;
    late TooltipBehavior _tooltipBehavior;

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

    @override
    Widget build(BuildContext context) {
      final List<ChartData> chartData = [
          ChartData(10, 17),
          ChartData(20, 34)
      // Add the required data  
      ];

      chart = SfCircularChart(
        tooltipBehavior: _tooltipBehavior,
        series: <CircularSeries>[
          PieSeries<ChartData, double>(
              enableTooltip: true,
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y)
          ]
      );

      return Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              TextButton(
                child: Text('Hide'),
                onPressed: hide
              ),
              Container(child: chart)
            ]
          )
        )
      );
    }

    void hide(){
        _tooltipBehavior.hide();
    }

Methods in selectionBehavior

SelectDataPoints method in selectionBehavior

The selectDataPoints method is used to select the data point programmatically. The required arguments are listed below.

  • pointIndex - index of the point which needs to be selected.
  • seriesIndex - index of the series for which the pointIndex is specified and this is an optional parameter. By default it will be considered as 0.

Note: The enableMultiSelection is also applicable for this but, it is based on the API values specified in the chart.

late SfCircularChart chart;
    late SelectionBehavior _selectionBehavior;

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

    @override
    Widget build(BuildContext context) {
      
      final List<ChartData> chartData = [
        ChartData(10, 17),
        ChartData(20, 34)
        // Add the required data
      ];
      chart = SfCircularChart(
        series: <CircularSeries>[
          PieSeries<ChartData, double>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y,
              selectionBehavior: _selectionBehavior
          )
        ]
      );
      
      return Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              TextButton(
                child: Text('Select'),
                onPressed: select
              ),
              Container(child: chart)
            ]
          )
        )
      );
    }

    void select() {
        _selectionBehavior.selectDataPoints(1, 0);
    }

PixelToPoint

Converts logical pixel value to the data point value.

The pixelToPoint method takes logical pixel value as input and returns a chart data point.

Note: The method will return the center value of the segment.

//Initialize the series controller
    CircularSeriesController? seriesController;

    @override
    Widget build(BuildContext context) {
      return Container(
        child: SfCircularChart(
          series: <PieSeries<ChartData, String>>[
            PieSeries<ChartData, String>(
              onRendererCreated: (CircularSeriesController  controller) {
                   seriesController = controller;
                 },
               )
             ],
             onChartTouchInteractionUp: (ChartTouchInteractionArgs args) {
              final Offset value = Offset(args.position.dx, args.position.dy);
              ChartPoint<dynamic>? chartpoint = seriesController?.pixelToPoint(value);
          }
        )
      );
    }

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