Methods in Flutter Circular Charts (SfCircularChart)

22 Apr 202115 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.

  • dart
  • 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>[
                ColumnSeries<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.

  • dart
  • 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>[
                ColumnSeries<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.

  • dart
  • 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>[
                ColumnSeries<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.

  • dart
  • 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>[
              ColumnSeries<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.

  • dart
  • 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);
        }