Callbacks in Flutter Cartesian Charts (SfCartesianChart)

19 Dec 202324 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.
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.
@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfCartesianChart(
            onActualRangeChanged: (ActualRangeChangedArgs args){
              if (args.axisName == 'primaryYAxis'){
                args.visibleMin = 10;
              }
            }
          )
        )
      );
    }

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.
@override
    Widget build(BuildContext context) {
    
      return Scaffold(
        body: Center(
          child: SfCartesianChart(
            onDataLabelRender:(DataLabelRenderArgs args){
              args.text = 'Data label';
              CartesianSeries<ChartData, double> 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.
@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.

late TrackballBehavior _trackballBehavior;

    @override
    void initState(){
      _trackballBehavior =  TrackballBehavior(enable: true);
      super.initState(); 
    }

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

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.
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.

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.

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.

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.

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

onPointTap

Triggers when tapping on the series point. The onPointTap callback contains the following arguments.

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfCartesianChart(
            series: <CartesianSeries<ChartData,num>>[
              ColumnSeries(
                onPointTap: (ChartPointDetails details) {
                  print(details.pointIndex);
                  print(details.seriesIndex);
                }
              )
            ],
          )
        )
      );
    }

onPointDoubleTap

Triggers when double-tap the series point. The onPointDoubleTap callback contains the following arguments.

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfCartesianChart(
            series: <CartesianSeries<ChartData,num>>[
              ColumnSeries(
                onPointDoubleTap: (ChartPointDetails details) {
                  print(details.pointIndex);
                  print(details.seriesIndex);
                }
              )
            ],
          )
        )
      );
    }

onPointLongPress

Triggers when long press on the series point. The onPointLongPress callback contains the following arguments.

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfCartesianChart(
            series: <CartesianSeries<ChartData,num>>[
              ColumnSeries(
                onPointLongPress: (ChartPointDetails details) {
                  print(details.pointIndex);
                  print(details.seriesIndex);
                }
              )
            ],
          )
        )
      );
    }

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.
@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.
@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.

late SelectionBehavior _selectionBehavior;

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

    @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
                )
              ]
            )
          )
      );
    }

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

onRenderDetailsUpdate (TechnicalIndicators)

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

The onRenderDetailsUpdate contains following arguments.

@override
    Widget build(BuildContext context) {
      List<double> signalLineDashArray = <double>[5,5];
      double signalLineWidth = 3.0;
      Color signalLineColor = Colors.cyan;
      return Scaffold(
        body:Center(
          child: SfCartesianChart(
            indicators: <TechnicalIndicators<dynamic, dynamic>>[
              SmaIndicator<dynamic, dynamic>(
                onRenderDetailsUpdate: (IndicatorRenderParams params) {
                  return TechnicalIndicatorRenderDetails(signalLineColor, signalLineWidth, signalLineDashArray);
                },
            )],
          )
        )
      );
    }

onRenderDetailsUpdate (Trendline)

Triggers when the trendline gets rendered. The onRenderDetailsUpdate callback contains the following arguments.

  • seriesName - specifies the series name of the trendline.
  • calculatedDataPoints - specifies the calculated data points of the trendline.
  • trendlineName - specifies the name of the trendline.
  • intercept - specifies the intercept value of the trendline.
  • rSquaredValue - specifies the r-squared value of the trendline.
  • slope - specifies the slope value of the trendline.
@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfCartesianChart(
            series: <LineSeries<ChartData, String>>[
              LineSeries<ChartData, String>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y,
                trendlines: <Trendline>[
                  Trendline(onRenderDetailsUpdate: (TrendlineRenderParams args) {
                    print('Slope value: ' + args.slope![0].toString());
                    print('rSquare value: ' + args.rSquaredValue.toString());
                    print('Intercept value (x): ' + args.intercept.toString());
                  })
                ]
              )
            ],
          )
        )
      );
    }

Note

  • The slope values of the polynomial trendline type will depend on the polynomial order. The intercept, slope, and rSquaredValue are not applicable for moving average trendline type.

onRendererCreated (Series)

Triggers when the series renderer is created. This callback can be used to obtain the ChartSeriesController instance, which is used to:

  • Add, remove, or replace the data points programmatically.
  • pixelToPoint and pointToPixel conversions.
  • Restart the loading animation.
//Initialize the series controller
    ChartSeriesController? _chartSeriesController;
    
    final List<ChartData> chartData = <ChartData>[
      ChartData(1, 24),
      ChartData(2, 20),
      ChartData(3, 23),
      ChartData(4, 57),
      ChartData(5, 30),
      ChartData(6, 41),
    ];

    @override
    Widget build(BuildContext context) {

      return Column(
        children: <Widget>[
          Container(
          child: SfCartesianChart(
                series: <LineSeries<ChartData, num>>[
                    LineSeries<ChartData, 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 ChartData {
      ChartData(this.x, this.y);
      final num x;
      final double? y;
    }

onRendererCreated (Axis)

Triggers when the axis renderer is created and attached to its parent. It can be used to obtain the axis-wise [AxisController] which has the current visible range details and provides an option to change the visible range programmatically. Here, you can customize the following properties.

  • [visibleMinimum] - to gets and sets the visible minimum of the axis.
  • [visibleMaximum] - to gets and sets the visible maximum of the axis.
  • [zoomFactor] - to gets and sets the zoom factor of the axis.
  • [zoomPosition] - to gets and sets the zoom position of the axis.
  • [previousZoomFactor] - to gets the previous zoom factor of the axis.
  • [previousZoomPosition] - to gets the previous zoom position of the axis.
NumericAxisController? _xAxisController;
    final List<ChartData> chartData = <ChartData>[
      ChartData(1, 24),
      ChartData(2, 20),
      ChartData(3, 23),
      ChartData(4, 57),
      ChartData(5, 30),
      ChartData(6, 41),
    ];
    @override
    Widget build(BuildContext context) {
      return Column(
        children: <Widget>[
          SfCartesianChart(
            primaryXAxis: NumericAxis(
              // Initialize the onRendererCreated.
              onRendererCreated: (NumericAxisController controller) {
                _xAxisController = controller;
              },
              // Sets the initialVisibleMinimum.
              initialVisibleMinimum: 3,
              // Sets the initialVisibleMaximum.
              initialVisibleMaximum: 5,
            ),
            series: <LineSeries<ChartData, num>>[
              LineSeries<ChartData, num>(
                dataSource: chartData,
                xValueMapper: (ChartData chartData, _) => chartData.x,
                yValueMapper: (ChartData chartData, _) => chartData.y,
              ),
            ],
          ),
          ElevatedButton(
            onPressed: () {
              // Update the initialVisibleMaximum.
              _xAxisController?.visibleMaximum = 1;
              // Update the initialVisibleMinimum.
              _xAxisController?.visibleMinimum = 6;
            },
            child: Text('Update Visible Range'),
          )
        ],
      );
    }

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

onChartTouchInteractionDown

Triggers when touched or clicked on the chart area. You can get the tapped region using the position argument.

@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 tapped region using the position argument.

@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 tapped region using the position argument.

@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.
@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.
@override
    Widget build(BuildContext context) {
      return Container(
          child: SfCartesianChart(
              onDatalabelTapped: (DataLabelTapArgs args) {
                print(args.seriesIndex);                 
              },
              series: <CartesianSeries<Sample, DateTime>>[
                  LineSeries<Sample, DateTime>(
                    dataSource: chartData,
                    xValueMapper: (Sample data, _) => data.x,
                    yValueMapper: (Sample data, _) => data.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).

//Initialize the series controller
    ChartSeriesController? SeriesController;
    
    @override
    Widget build(BuildContext context) {
      return Container(
         child: SfCartesianChart(
            onPlotAreaSwipe:
              (ChartSwipeDirection direction) =>
                  performSwipe(direction),
            series: <CartesianSeries<ChartData, num>>[
                 AreaSeries<ChartData, 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 ChartData {
      ChartData(this.x, this.y);
      final num x;
      final double? y;
    }

See Also

onRenderDetailsUpdate (ErrorBarSeries)

Triggers when the error bar is being rendered. In this onRenderDetailsUpdate callback, you can get the following arguments.

@override
    Widget build(BuildContext context) {
      final dynamic chartData = [
        ChartData(1, 24),
        ChartData(2, 20),
        ChartData(3, 35),
        ChartData(4, 27),
        ChartData(5, 30),
        ChartData(6, 41),
        ChartData(7, 26)
      ];

      return Scaffold(
        body: SfCartesianChart(
      series: <CartesianSeries<ChartData, int>>[
        ErrorBarSeries<ChartData, int>(
          dataSource: chartData,
          xValueMapper: (ChartData data, _) => data.x,
          yValueMapper: (ChartData data, _) => data.y,
          onRenderDetailsUpdate: (ErrorBarRenderDetails args) {
            print(args.pointIndex);
            print(args.viewPortPointIndex);
            print(
                args.calculatedErrorBarValues!.horizontalPositiveErrorValue);
            print(
                args.calculatedErrorBarValues!.horizontalNegativeErrorValue);
            print(args.calculatedErrorBarValues!.verticalPositiveErrorValue);
            print(args.calculatedErrorBarValues!.verticalNegativeErrorValue);
          })
      ],
    )
    );
    }

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

onCreateRenderer

Used to create the renderer for custom series. This is applicable only when the custom series is defined in the sample and for built-in series types, it is not applicable.

Renderer created in this will hold the series state and this should be created for each series. onCreateRenderer callback function should return the renderer class and should not return null.

Series state will be created only once per series and will not be created again when we update the series.

Defaults to null.

@override
    Widget build(BuildContext context) {
      final List<ChartData> chartData = <ChartData>[
        ChartData(1, 24),
        ChartData(2, 20),
        ChartData(3, 35),
        ChartData(4, 27),
        ChartData(5, 30),
        ChartData(6, 41),
        ChartData(7, 26)
      ];
      return Container(
        child: SfCartesianChart(
          series: <ColumnSeries<ChartData, int>>[
            ColumnSeries<ChartData, int>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y,
              onCreateRenderer: (series) {
                return _CustomColumnSeriesRenderer();
              }
            ),
          ],
        )
      );
    }

    class _CustomColumnSeriesRenderer extends ColumnSeriesRenderer<ChartData, int> {
      _CustomColumnSeriesRenderer();

      @override
      ColumnSegment<ChartData, int> createSegment() {
        return _ColumnCustomPainter();
      }
    }

    class _ColumnCustomPainter extends ColumnSegment<ChartData, int> {
      _ColumnCustomPainter();

      @override
      int get currentSegmentIndex => super.currentSegmentIndex;

      @override
      Paint getFillPaint() {
        final Paint customerFillPaint = Paint();
        customerFillPaint.color = series.dataSource![currentSegmentIndex].y > 30
          ? Colors.red
          : Colors.green;
        customerFillPaint.style = PaintingStyle.fill;
        return customerFillPaint;
      }

      @override
      void onPaint(Canvas canvas) {
        super.onPaint(canvas);
      }
    }
 
    class ChartData {
      ChartData(this.x, this.y);
      final int x;
      final int y;
    }

onCreateShader

The onCreateShader provides options to get the outer rect, inner rect, and render type (either series or legend) using ChartShaderDetails class.

The onCreateShader callback is called once while rendering
the data points and legend. For further reference on this callback, Check the Gradient fill section.

/// Package import
    import 'dart:ui' as ui;

    Widget build(BuildContext context) {
    final List<ChartData> chartData = <ChartData>[
      ChartData('IND', 24),
      ChartData('AUS', 20),
      ChartData('USA', 27),
      ChartData('DEU', 57),
      ChartData('ITA', 30),
      ChartData('UK', 41),
    ];
    final List<Color> colors = <Color>[
      const Color.fromRGBO(75, 135, 185, 1),
      const Color.fromRGBO(192, 108, 132, 1),
      const Color.fromRGBO(246, 114, 128, 1),
      const Color.fromRGBO(248, 177, 149, 1),
      const Color.fromRGBO(116, 180, 155, 1)
    ];
    final List<double> stops = <double>[
      0.2,
      0.4,
      0.6,
      0.8,
      1,
    ];

    return Scaffold(
        appBar: AppBar(),
        body: Center(
            child: Container(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <CartesianSeries<ChartData, String>>[
            AreaSeries<ChartData, String>(
              dataSource: chartData,
              onCreateShader: (ShaderDetails chartShaderDetails) {
                return ui.Gradient.linear(chartShaderDetails.rect.topRight,
                    chartShaderDetails.rect.centerLeft, colors, stops);
              },
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y),
                ]
              ),
            )
          )
        );
      }

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

axisLabelFormatter

Called while rendering each axis label in the chart. Provides label text, axis name, orientation of the axis, trimmed text and text styles such as color, font size, and font weight to the user using the AxisLabelRenderDetails class.

You can customize the text and text style using the ChartAxisLabel class and can return it.

Defaults to null.

Widget build(BuildContext context) {
      return Container(
        child: SfCartesianChart(
            primarXAxis: CategoryAxis(
               axisLabelFormatter: (AxisLabelRenderDetails details) => axis(details),
            ),
        ));
    }

    ChartAxisLabel axis(AxisLabelRenderDetails details) {
      return ChartAxisLabel('Label', details.textStyle);
    }

See Also

multiLevelLabelFormatter

Triggers while rendering the multi-level labels. Text and text styles such as color, font size, font-weight, etc can be customized by using ChartAxisLabel class. The MultiLevelLabelRenderDetails contains the following arguments.

  • text - specifies the multi-level label to be rendered.
  • actualLevel - specifies the re-ordered level value of the current multi-level label.
  • axisName - specifies the axis name.
  • index - specifies the index of the multi-level label. and the index will be in the same order as specified in multiLevelLabels property.
  • textStyle - used to change the text color, size, font family, font style, etc.
@override
    Widget build(BuildContext context) {
      final List<ChartData> chartData = <ChartData>[
        ChartData(1, 24),
        ChartData(2, 20),
        ChartData(3, 35),
        ChartData(4, 27),
        ChartData(5, 30),
        ChartData(6, 41),
        ChartData(7, 26)
      ];
      return Scaffold(
        body: SfCartesianChart(
          primaryXAxis: NumericAxis(
            multiLevelLabelFormatter: (MultiLevelLabelRenderDetails details) {
              return ChartAxisLabel(
                details.index == 2 ? 'Callback' : details.text,
                details.textStyle);
            },
            multiLevelLabels: const <NumericMultiLevelLabel>[
              NumericMultiLevelLabel(
                start: 1, 
                end: 4, 
                text: 'First'
              ),
              NumericMultiLevelLabel(
                start: 4, 
                end: 7, 
                text: 'Second'
              ),
              NumericMultiLevelLabel(
                start: 1, 
                end: 4, 
                text: 'Third', 
                level: 1
              ),
              NumericMultiLevelLabel(
                start: 4, 
                end: 7, 
                text: 'Fourth', 
                level: 1
              ),
            ]
          ),
          series: <CartesianSeries<ChartData, int>>[
            LineSeries<ChartData, int>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y,
            )
          ]
        )
      );
    }

    class ChartData {
      ChartData(this.x, this.y);
        final int x;
        final int 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.