Syncfusion AI Assistant

How can I help you?

Methods in Flutter Circular Charts (SfCircularChart)

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;
    }