Callbacks in Flutter Cartesian Charts (SfCartesianChart)

7 Jun 202124 minutes to read

The below Callbacks are for Cartesian chart.

onTooltipRender

Triggers when the tooltip is rendering. Here, you can customize the text, header, x and y-positions. The onTooltipRender Callback contains the following arguments.

  • text - specifies the content of the tooltip.
  • header - specifies the header content of the tooltip.
  • locationX - specifies the x position of tooltip.
  • locationY - specifies the y position of tooltip.
  • seriesIndex - specifies the current series index.
  • dataPoints - holds the data point collection.
  • pointIndex - specifies the current point index.
  • viewportPointIndex - specifies the viewport index value of the tooltip.
  • dart
  • late TooltipBehavior _tooltipBehavior;
    
        @override
        void initState(){
          _tooltipBehavior =  TooltipBehavior(enable: true);
          super.initState(); 
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                tooltipBehavior: _tooltipBehavior,
                onTooltipRender: (TooltipArgs args) {
                  args.text = 'Customized Text';
                }
              )
            )
          );
        }

    onActualRangeChanged

    Triggers when the visible range of an axis is changed, i.e. value changes for minimum, maximum, and interval. Here, you can customize the visible range of an axis. The onActualRangeChanged Callback contains the following arguments.

    • axisName - specifies the axis name.
    • axis - holds the information about the current axis.
    • actualMin - specifies the actual minimum range of an axis.
    • actualMax - specifies the actual maximum range of an axis.
    • actualInterval - specifies the actual interval of an axis.
    • visibleMin - specifies the visible minimum range of an axis.
    • visibleMax - specifies the visible maximum range of an axis.
    • visibleInterval - specifies the visible interval of an axis.
    • orientation - specifies the current axis orientation.
  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                onActualRangeChanged: (ActualRangeChangedArgs args){
                  if (args.axisName == 'primaryYAxis'){
                    args.visibleMin = 10;
                  }
                }
              )
            )
          );
        }

    onAxisLabelRender

    Triggers while rendering the axis labels. Text and text styles such as color, font size, and font weight can be customized. The onAxisLabelRender Callback contains the following arguments.

    • text - specifies the axis label to be rendered.
    • value - specifies the actual value of the current axis label.
    • axisName - specifies the axis name.
    • orientation - specifies the current axis orientation.
    • axis - holds the information about the current axis.
    • textStyle - used to change the text color, size, font family, font style, and font weight.
  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                onAxisLabelRender: (AxisLabelRenderArgs args) {
                  if (args.axisName == 'primaryXAxis') {
                    args.text = 'Text';
                    TextStyle textStyle = args.textStyle;
                    args.textStyle =  textStyle.copyWith(color: Colors.red);
                  }
                }
              )
            )
          );
        }

    See Also

    onDataLabelRender

    Triggers when data label is rendering. Text and text styles such as color, font size, and font weight can be customized. The onDataLabelRender Callback contains the following arguments.

    • text - used to get and set the content of the data label.
    • textStyle - used to change the text color, size, font family, font style, and font weight.
    • pointIndex - specifies the current point index.
    • seriesRenderer - specifies current series and the series type may vary based on the chart type.
    • dataPoints - used to get the data points of the series.
    • viewportPointIndex - to get the viewport index value of the tapped data label.
    • offset - used to get and set the horizontal/vertical position of the data label. The first argument sets the horizontal component to x, while the second argument sets the vertical component to y.
    • color - used to get and set the background color of a data label.
  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                onDataLabelRender:(DataLabelRenderArgs args){
                  args.text = 'Data label';
                  CartesianSeries<dynamic, dynamic> series = args.seriesRenderer;
                  //Changed the background color of the data label based on the series type
                  if (series.name == 'Product A') {
                    args.color = Colors.blue;
                  } else if(series.name == 'Product B'){
                    args.color = Colors.red;
                  }
                },
                series: <CartesianSeries>[
                  ColumnSeries<ChartData, double>(
                    dataLabelSettings: DataLabelSettings(
                      isVisible: true
                    )
                  )
                ]
              )
            )
          );
        }
    
        class ChartData {
          ChartData(this.x, this.y);
          final double x;
          final double? y;
        }

    onLegendItemRender

    Triggers when the legend item is rendering. Here, you can customize the legend’s text, and shape. The onLegendItemRender Callback contains the following arguments.

    • text - specifies the content of the legend.
    • pointIndex - specifies the current point index that is applicable for circular chart type alone.
    • seriesIndex - specifies the current series index.
    • legendIconType - specifies the shape of the legend.
    • color - used to get and set the color of the legend icon.
  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                legend: Legend(isVisible: true),
                onLegendItemRender: (LegendRenderArgs args){
                  args.text = 'Legend Text';
                  args.legendIconType = LegendIconType.diamond;
                }
              )
            )
          );
        }

    onTrackballPositionChanging

    Triggers while the trackball position is changing. Here, you can customize the text of the trackball.The onTrackballPositionChanging Callback contains the following argument.

  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center( 
              child: SfCartesianChart(
                  onTrackballPositionChanging: (TrackballArgs args) {
                    args.chartPointInfo.label = 'Custom Text';
                  },
                  trackballBehavior: TrackballBehavior(
                    enable: true
                  )
                )
              )
          );
        }

    onCrosshairPositionChanging

    Triggers while the crosshair position is changing. Here, you can customize the text and line color of the crosshair.The onCrosshairPositionChanging Callback contains the following arguments.

    • text - used to get and set the crosshair tooltip content.
    • value - specifies the actual value of the crosshair.
    • axisName - specifies the axis name.
    • orientation - specifies the current axis orientation.
    • axis - holds the information about the current axis.
    • lineColor - used to get and set the color of the crosshair line.
  • dart
  • late CrosshairBehavior _crosshairBehavior;
    
        @override
        void initState(){
          _crosshairBehavior = CrosshairBehavior(
                enable: true
              );
          super.initState(); 
        }
    
        @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                onCrosshairPositionChanging: (CrosshairRenderArgs args){
                  args.text = 'crosshair';
                },
                crosshairBehavior: _crosshairBehavior
              )
            )
          );
        }

    onZooming

    Triggers when the zooming action is in progress. The onZooming Callback contains the following arguments.

  • dart
  • late ZoomPanBehavior _zoomPanBehavior;
    
        @override
        void initState(){
          _zoomPanBehavior = ZoomPanBehavior(
                enableDoubleTapZooming: true,
                enablePanning: true,
                enablePinching: true,
                enableSelectionZooming: true
              );
          super.initState(); 
        }
    
        @override
        Widget build(BuildContext context) {
        
          return Scaffold(
              body: Center(
                child: SfCartesianChart(
                  zoomPanBehavior: _zoomPanBehavior,
                  onZooming: (ZoomPanArgs args){
                      print(args.currentZoomFactor);
                      print(args.currentZoomPosition);
                  }
                )
              )
          );
        }

    onZoomStart

    Triggers when zooming action begins. The onZoomStart Callback contains the following arguments.

  • dart
  • late ZoomPanBehavior _zoomPanBehavior;
    
        @override
        void initState(){
          _zoomPanBehavior = ZoomPanBehavior(
                enableDoubleTapZooming: true,
                enablePanning: true,
                enablePinching: true,
                enableSelectionZooming: true
              );
          super.initState(); 
        }
    
        @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                zoomPanBehavior: _zoomPanBehavior,
                onZoomStart: (ZoomPanArgs args){
                    print(args.currentZoomFactor);
                    print(args.currentZoomPosition);
                }
              )
            )
          );
        }

    onZoomEnd

    Triggers when the zooming action is completed. The onZoomEnd Callback contains the following arguments.

  • dart
  • late ZoomPanBehavior _zoomPanBehavior;
    
        @override
        void initState(){
          _zoomPanBehavior = ZoomPanBehavior(
                enableDoubleTapZooming: true,
                enablePanning: true,
                enablePinching: true,
                enableSelectionZooming: true
              );
          super.initState(); 
        }
    
        @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                zoomPanBehavior: _zoomPanBehavior,
                onZoomEnd: (ZoomPanArgs args){
                    print(args.currentZoomFactor);
                    print(args.currentZoomPosition);
                }
              )
            )
          );
        }

    onZoomReset

    Triggers when zoomed state is reset. The onZoomReset Callback contains the following arguments.

  • dart
  • late ZoomPanBehavior _zoomPanBehavior;
    
        @override
        void initState(){
          _zoomPanBehavior = ZoomPanBehavior(
                enableDoubleTapZooming: true,
                enablePanning: true,
                enablePinching: true,
                enableSelectionZooming: true
              );
          super.initState(); 
        }
    
        @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                zoomPanBehavior: _zoomPanBehavior,
                onZoomReset: (ZoomPanArgs args){
                    print(args.currentZoomFactor);
                    print(args.currentZoomPosition);
                }
              )
            )
          );
        }

    onPointTapped

    Triggers when tapping the series point. The onPointTapped Callback contains the following arguments.

  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                onPointTapped: (PointTapArgs args){
                  print(args.seriesIndex);
                  print(args.pointIndex);
                }
              )
            )
          );
        }

    onAxisLabelTapped

    Triggers when tapping the axis label. The onAxisLabelTapped Callback contains the following arguments.

    • axis - holds the information about the current axis.
    • text - specifies the content of the axis label.
    • value - specifies the actual value of the current axis label.
    • axisName - used to get the axis name.
  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                onAxisLabelTapped: (AxisLabelTapArgs args) {
                  print(args.text);
                }
              )
            )
          );
        }

    See Also

    onLegendTapped

    Triggers when tapping the legend item. The onLegendTapped Callback contains the following arguments.

    • seriesIndex - specifies the current series index.
    • pointIndex - specifies the current point index that is applicable for circular series.
    • series - specifies the current series and the series type may vary based on the chart type.
  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                onLegendTapped: (LegendTapArgs args) {
                  print(args.seriesIndex);
                },
                legend: Legend(isVisible: true)
              )
            )
          );
        }

    onSelectionChanged

    Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The onSelectionChanged Callback contains the following arguments.

  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
              body: Center(
                child: SfCartesianChart(
                  onSelectionChanged: (SelectionArgs args){
                    args.selectedColor = Colors.red;
                    args.unselectedColor = Colors.lightGreen;
                  },
                  series: <CartesianSeries>[
                    ColumnSeries<ChartData, double>(
                      selectionBehavior: SelectionBehavior(
                        enable: true,
                      )
                    )
                  ]
                )
              )
          );
        }
    
        class ChartData {
          ChartData(this.x, this.y);
          final double x;
          final double? y;
        }

    onIndicatorRender

    Triggers when indicator is rendering. Here you can customize the name, signal line color, signal line width,dash array and so on.

    The onIndicatorRender contains following arguments.

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body:Center(
              child: SfCartesianChart(
                onIndicatorRender: (IndicatorRenderArgs args)
                {
                  if(args.index==0) 
                  {
                    args.indicatorname='changed1';
                    args.signalLineColor=Colors.green;
                    args.signalLineWidth=6.0;
                  }
                }
              )
            )
          );
        }

    onTrendlineRender

    Triggers when the trendline gets rendered. Trendline properties like color,opacity can be customized using trendlineRender Callback. The onTrendlineRender Callback contains the following arguments.

    • trendlineIndex - specifies the index of the trendline.
    • opacity - specifies the opacity of the trendline.
    • seriesName - specifies the series name of the trendline.
    • color - specifies the color of the trendline.
    • seriesIndex - specifies the seriesIndex.
    • data - specifies the data points of the series.
    • trendlineName - specifies the name of the trendline.
    • intercept - specifies the intercept value of the trendline.
    • dashArray - specifies and sets the trendline’s dashArray.
  • dart
  • @override
        Widget build(BuildContext context) {
        
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                onTrendlineRender: (TrendlineRenderArgs args) {
                  args.color = Colors.greenAccent;
                  args.opacity = 0.18;
                  args.dashArray = <double>[5, 3];
                }
              )
            )
          );
        }

    onRendererCreated

    Triggers when the series renderer is created. This callback can be used to obtain the ChartSeriesController instance, which is used to access the the public methods in the series.

  • dart
  • //Initialize the series controller
        ChartSeriesController? _chartSeriesController;
        
        @override
        Widget build(BuildContext context) {
    
          return Column(
            children: <Widget>[
              Container(
              child: SfCartesianChart(
                    series: <LineSeries<SalesData, num>>[
                        LineSeries<SalesData, num>(
                          dataSource: chartData,
                          //Initialize the onRendererCreated event and store the controller for the respective series
                          onRendererCreated: (ChartSeriesController controller) {
                              _chartSeriesController = controller;
                          },
                        ),
                      ],
                )
              ),
              Container(
                child: ElevatedButton(
                  onPressed: () {
                    //Removed a point from data source
                    chartData.removeAt(0);
                    //Added a point to the data source
                    chartData.add(ChartData(3,23));
                    //Here accessed the public method of the series.
                    _chartSeriesController?.updateDataSource(
                      addedDataIndexes: <int>[chartData.length -1],
                      removedDataIndexes: <int>[0],
                    );
                  },
                  child: Container(child: Text('Add a point'),)
                )
              )
            ]
          );
        }
    
        class SalesData {
          SalesData(this.x, this.y);
          final num x;
          final double? y;
        }

    onChartTouchInteractionDown

    Triggers when touched or clicked on the chart area. You can get the position of the touched region using this callback.

    The callback contains the following argument:

    • position - used to get the position of the touch interaction.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Container(
              child: SfCartesianChart(
                    onChartTouchInteractionDown: (ChartTouchInteractionArgs args){
                      print(args.position.dx.toString());
                      print(args.position.dy.toString());
                    }
                )
            );
        }

    onChartTouchInteractionUp

    Triggers when tapped or clicked on the chart area. You can get the position of the tapped region using this callback.

    The callback contains the following argument:

    • position - used to get the position of the touch interaction.
  • dart
  • @override
        Widget build(BuildContext context) {
         return Container(
            child: SfCartesianChart(
                onChartTouchInteractionUp: (ChartTouchInteractionArgs args){
                    print(args.position.dx.toString());
                    print(args.position.dy.toString());
                  }
            )
        );
      }

    onChartTouchInteractionMove

    Triggers when touched or clicked and moved on the chart area. You can get the position of the moving region using this callback.

    The callback contains the following argument:

    • position - used to get the position of the touch interaction.
  • dart
  • @override
      Widget build(BuildContext context) {
          return Container(
            child: SfCartesianChart(
                onChartTouchInteractionMove: (ChartTouchInteractionArgs args){
                    print(args.position.dx.toString());
                    print(args.position.dy.toString());
                  }
            )
        );
      }

    onMarkerRender

    Triggers when the marker is being rendered. Here, you can customize the following arguments.

    • pointIndex - to get the point index of the marker.
    • seriesIndex - to get the series index of the marker.
    • shape - to get and set the shape of the marker.
    • markerHeight - to get and set the height of the marker.
    • markerWidth - to get and set the width of the marker.
    • color - to get and set the color of the marker.
    • borderWidth - to get and set the border width of the marker.
    • borderColor - to get and set the border color of the marker.
    • viewportPointIndex - to get the viewport index value of the tapped data label.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Container(
                child: SfCartesianChart(
                    onMarkerRender: (MarkerRenderArgs args) {
                      if (args.pointIndex == 1) {
                        args.color = Colors.red;
                        args.markerHeight = 20;
                        args.markerWidth = 20;
                        args.shape = DataMarkerType.diamond;
                        args.borderColor = Colors.green;
                        args.borderWidth = 2;
                      }
                    },
                )
            );
        }

    onDataLabelTapped

    Triggers when tapping on the data label of the data point in the series. The onDataLabelTapped Callback contains the following arguments.

    • position - specifies the position of the tapped data label in logical pixels.
    • seriesIndex - specifies the series index of the tapped data label
    • pointIndex - specifies the point index of the tapped data label.
    • text - specifies the content of the tapped data label.
    • dataLabelSettings - to get the data label customization options specified in that particular series.
    • viewportPointIndex - to get the viewport index value of the tapped data label.

    NOTE

    This callback will not be called, when the builder is specified for data label (data label template). For this case, custom widget specified in the DataLabelSettings.builder property can be wrapped using the GestureDetector and this functionality can be achieved in the application level.

  • dart
  • @override
        Widget build(BuildContext context) {
          return Container(
              child: SfCartesianChart(
                  onDatalabelTapped: (DataLabelTapArgs args) {
                    print(args.seriesIndex);                 
                  },
                  series: <ChartSeries<Sample, DateTime>>[
                      LineSeries<Sample, DateTime>(
                        dataSource: chartData,
                        xValueMapper: (Sample sales, _) => sales.x,
                        yValueMapper: (Sample sales, _) => sales.y,
                        dataLabelSettings: DataLabelSettings(
                            isVisible: true),
                      )
                  ]
              )
          );
        }
    
        class Sample{
          Sample(this.x, this,y);
          final DateTime x;
          final double? y;
        }

    onPlotAreaSwipe

    Triggers while swiping on the plot area. Whenever the swiping happens on the plot area (the series rendering area), onPlotAreaSwipe callback will be called. It provides options to get the direction of swiping. If the chart is swiped from left to right direction, the direction is ChartSwipeDirection.start and if the swipe happens from right to left direction, the direction is ChartSwipeDirection.end. Using this callback, the user will be able to achieve pagination functionality (i.e., on swiping over chart area, next set of data points can be loaded to the chart).

  • dart
  • //Initialize the series controller
        ChartSeriesController? SeriesController;
        
        @override
        Widget build(BuildContext context) {
          return Container(
             child: SfCartesianChart(
                onPlotAreaSwipe:
                  (ChartSwipeDirection direction) =>
                      performSwipe(direction),
                series: <ChartSeries<SalesData, num>>[
                     AreaSeries<SalesData, num>(
                         dataSource: chartData,
                     ),
                ],
             )
          );
        }
    
        Widget performSwipe(ChartSwipeDirection direction) {
            if (direction == ChartSwipeDirection.end) {
                chartData.add(ChartSampleData(
                    x: chartData[chartData.length - 1].x + 1,
                    y: 10));
                seriesController?.updateDataSource(addedDataIndex: chartData.length - 1);
          }
        }
    
        class SalesData {
          SalesData(this.x, this.y);
          final num x;
          final double? y;
        }

    See Also

    NOTE

    chartData in the above code snippets is a class type list and holds the data for binding to the chart series. Refer Bind data source topic for more details.