Technical indicators in Flutter Cartesian Charts (SfCartesianChart)

7 Jun 202124 minutes to read

The different types of technical indicators available in chart are follows:

Adding Technical indicator into Chart

To render any indicator, add it to the TechnicalIndicators collection using the indicators in SfCartesianChart.The following properties can be used to customize the appearance:

NOTE

: If you giving series and indicator in the chart, you can add the same seriesName to the series and indicator, otherwise you can directly bind the dataSource to the indicators property.

Indicator Types

Accumulation distribution indicator (AD)

Accumulation distribution indicator is a volume-based indicator designed to measure the accumulative flow of money into and out of a security. It requires volumeValueMapper property additionally with the data source to calculate the signal line.

Refer the following example,

  • dart
  • @override
         Widget build(BuildContext context) {
           return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                legend: Legend(isVisible: true),
                indicators: <TechnicalIndicators<ChartData,DateTime>>[AccumulationDistributionIndicator<ChartData, DateTime>(
                      seriesName: 'HiloOpenClose')],
                series: <ChartSeries<ChartData, DateTime>>[
                  HiloOpenCloseSeries<ChartData, DateTime>(
                  dataSource: ChartData,
                  xValueMapper: (ChartData sales, _) => sales.x,
                  lowValueMapper: (ChartData sales, _) => sales.low,
                  highValueMapper: (ChartData sales, _) => sales.high,
                  openValueMapper: (ChartData sales, _) => sales.open,
                  closeValueMapper: (ChartData sales, _) => sales.close,
                  name: 'HiloOpenClose'),
                  ]
                )
              )
            );
          }
    
          class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    ADIndicator

    Average true range indicator(ATR)

    ATR indicator is a technical analysis volatility indicator. This indicator does not indicate the price trend. simply the degree of price volatility. The average true range is an N-day smoothed moving average (SMMA) of the true range values.

    Refer the following example,

  • dart
  • @override
        Widget build(BuildContext context) {
         return Scaffold(
            body: Center(
             child: SfCartesianChart(
              primaryXAxis: DateTimeAxis(),
              legend: Legend(isVisible: true),
              indicators:
              <TechnicalIndicators<dynamic,   dynamic>>[
              AtrIndicator<dynamic, dynamic>(
                period: 3,
                seriesName: 'HiloOpenClose')],
        series: <CartesianSeries<ChartData, DateTime>>[
                HiloOpenCloseSeries<ChartData, DateTime>(
                  name: 'HiloOpenClose')
                  ]
                )
              )
            );
          }
          class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    ATRIndicator

    Bollinger band Indicator

    This indicator also has upperLineColor and lowerLineColor properties that can be used to define the brushes for the indicator lines.

    Also, we can specify standard deviation values for the BollingerBand indicator using standardDeviation property.

    Refer the following example,

  • dart
  • @override
        Widget build(BuildContext context) {
         return Scaffold(
           body: Center(
             child: SfCartesianChart(
               primaryXAxis: DateTimeAxis(),
               legend: Legend(isVisible: true),
               indicators:        <TechnicalIndicators<dynamic, dynamic>[ BollingerBandIndicator<dynamic, dynamic>(
                      period: 3,
                      seriesName: 'HiloOpenClose')],
               series: <CartesianSeries<ChartData, DateTime>>[
                  HiloOpenCloseSeries<ChartData, DateTime>(name: 'HiloOpenClose')
                  ]
                )
              )
            );         
          }
    
          class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    BollingerBand

    Exponential moving average indicator (EMA)

    An EMA indicator is a simple, arithmetic moving average that is calculated by adding the closing price for the number of time periods and dividing the total value by the number of periods.

    It also has a valueField property. Based on this property Indicator will render.

    Refer the following example,

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                legend: Legend(isVisible: true),
                indicators: <TechnicalIndicators<dynamic, dynamic>>[
            EmaIndicator<dynamic, dynamic>(
                seriesName: 'HiloOpenClose',
                valueField: 'high',)],
                series: <ChartSeries<ChartData, DateTime>>[
            HiloOpenCloseSeries<ChartData, DateTime>(
                name: 'HiloOpenClose')
                ]
              )
            )
          );
        }
    
        class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    EMAIndicator

    Moving average convergence divergence (MACD)

    This is mostly using indicator having shortPeriod and longPeriod for defining the motion of the indicator.

    Also you can draw Line, Histogram MACD or Both types using the macdType property,

    The macdLineColor property is used to define the color for the MACD line and the histogramNegativeColor and histogramPositiveColor property is used to define the color for the MACD histogram.

    Refer the following example,

  • dart
  • @override
        Widget build(BuildContext context) {
         return Scaffold(
           body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                legend: Legend(isVisible: true),
                indicators: <TechnicalIndicators<dynamic, dynamic>>[
              MacdIndicator<dynamic, dynamic>(
                  longPeriod: 5,
                  shortPeriod: 2,
                  seriesName: 'HiloOpenClose')],
                series: <CartesianSeries<ChartData, DateTime>>[
              HiloOpenCloseSeries<ChartData, DateTime>(
                name: 'HiloOpenClose')
               ]
              )
            )
          );
        }
    
         class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    MACDIndicator

    Momentum Indicator

    This indicator also has a centerline. The centerLineColor and centerLineWidth properties are used to define center line.

    Refer the following example,

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                legend: Legend(isVisible: true),
                indicators: <TechnicalIndicators<dynamic, dynamic>>[
              MomentumIndicator<dynamic, dynamic>(
                period: 3,
                seriesName: 'HiloOpenClose',)],
               series: <ChartSeries<ChartData, DateTime>>[
              HiloOpenCloseSeries<ChartData, DateTime>(name: 'HiloOpenClose')
                ]
              )
            )
          );
        }
    
         class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    MomentumIndicator

    Relative strength index Indicator(RSI)

    The RSI indicator has an additional two lines other than the signal line.They indicate the overBought and overSold region.

    The upperLineColor property is used to define the color for the line that indicates overBought region, and the lowerLineColor property is used to define the color for the line that indicates overSold region.

    Refer the following example,

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                legend: Legend(isVisible: true),
                 indicators: <TechnicalIndicators<dynamic, dynamic>>[
              RsiIndicator<dynamic, dynamic>(
                period: 3,
                seriesName: 'HiloOpenClose',
                overbought: 70,
                oversold: 30)],
                series: <ChartSeries<ChartData, DateTime>>[
              HiloOpenCloseSeries<ChartData, DateTime>(name: 'HiloOpenClose')
                ]
              )
            )
          );
         }
    
          class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    RSIIndicator

    Simple moving average indicator(SMA)

    The Simple moving average indicator is similar to Exponential moving average indicator and this can be defined using the following code examples.

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                legend: Legend(isVisible: true),
                indicators: <TechnicalIndicators<dynamic, dynamic>>[
              SmaIndicator<dynamic, dynamic>(
                seriesName: 'HiloOpenClose',
                valueField: 'close')],
               series: <ChartSeries<ChartData, DateTime>>[
              HiloOpenCloseSeries<ChartData, DateTime>(
                name: 'HiloOpenClose')
                ]
              )
            )
          );
        }
    
         class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    SMAIndicator

    Stochastic indicator

    This indicator is used to measure the range and momentum of price movements. It contains kPeriod and dPeriod property defining the ‘k’ percentage and ‘d’ percentage respectively.

    In this indicator upperLineColor,lowerLineColor and periodLineColor property are used to define the color for the Stochastic indicator lines.

    Refer the following example,

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                legend: Legend(isVisible: true),
                indicators: <TechnicalIndicators<dynamic, dynamic>>[
              StochasticIndicator<dynamic, dynamic>(   
                  seriesName: 'HiloOpenClose',,
                  kPeriod: 2,
                  dPeriod: 3)],
                 series: <ChartSeries<ChartData, DateTime>>[
              HiloOpenCloseSeries<ChartData, DateTime>(name: 'HiloOpenClose')
                ]
              )
            )
          );
        }
    
         class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    StochasticIndicator

    Triangular moving average indicator (TMA)

    A TMA indicator is simply a double-smoothed simple moving average of data calculated over a period where the middle portion of the data has more weight.

    Refer the following example,

  • dart
  • @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                legend: Legend(isVisible: true),
                indicators: <TechnicalIndicators<dynamic, dynamic>>[
              TmaIndicator<ChartData, dynamic>(
                  seriesName: 'HiloOpenClose',
                  valueField: 'low')],
                series: <ChartSeries<ChartData, DateTime>>[
              HiloOpenCloseSeries<ChartData, DateTime>(
                name: 'HiloOpenClose')
                ]
              )
            )
          );
        }
    
         class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    TMAIndicator

    Legend for technical indicators

    Legend provides information about the series rendered in the chart. Legend for the indicator is rendered along with the series legend when the legend is set to be visible. Also when the name property is given to an indicator, the legend name is changed based on the indicator name.legendItemText can also be provided for changing the name of the legend. In default rendering the legendIconType will be a horizontal line.

    The following code example can define the legend.

  • dart
  • @override
        Widget build(BuildContext context){
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                indicators: <TechnicalIndicators<dynamic, dynamic>>[
                  MomentumIndicator<dynamic, dynamic>(
                      seriesName: 'HiloOpenClose',
                      legendIconType: LegendIconType.diamond,
                      legendItemText: 'Indicator')],
                series: <ChartSeries<ChartData, DateTime>>[
                  HiloOpenCloseSeries<ChartData, DateTime>(
                      name: 'HiloOpenClose')
                      ]
                    )
                  )
                );
              }
    
          class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    Legend

    Also refer technical indicators event for customizing the tooltip further.

    Tooltip for technical indicators

    The chart will display the segment information through the tooltip. It is used to show information about the segment when you tap on the segment. The technical indicator tooltip has the same ActivationMode that has been given in the TooltipBehavior of the series.

  • dart
  • late TooltipBehavior _tooltipBehavior;
        
        @override
        void initState(){
          _tooltipBehavior = TooltipBehavior(enable: true, shared: true);
        super.initState();
        }
    
        @override
        Widget build(BuildContext context){
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                primaryXAxis: DateTimeAxis(),
                tooltipBehavior: _tooltipBehavior,
                indicators: <TechnicalIndicators<dynamic, dynamic>>[
                  ATRIndicator<dynamic, dynamic>(
                      seriesName: 'HiloOpenClose',
                      )
                    ],
                series: <ChartSeries<ChartData, DateTime>>[
                  HiloOpenCloseSeries<ChartData, DateTime>(
                      enableTooltip: true,
                      name: 'HiloOpenClose')
                  ]
                )
              )
            );
          }
    
           class ChartData {
            ChartData(this.x, this.low, this.high, this.open, this.close);
            final DateTime x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }

    tooltip

    Binding data source to indicators

    In order to use TechnicalIndicators for line, area chart etc., you need to bind the data source of the chart to indicator’s xValueMapper, lowValueMapper, highValueMapper, openValueMapper, closeValueMapper respectively.

    Refer the following example below

  • dart
  • @override
        Widget build(BuildContext context){
          return Scaffold(
            body: Center(
              child: SfCartesianChart(
                indicators: <TechnicalIndicators>[
                MomentumIndicator<SalesData, num>(
                    period: 5,
                    dataSource: chartData,
                    xValueMapper: (SalesData sales, _) => sales.x,
                    highValueMapper: (SalesData sales, _) => sales.high,
                    lowValueMapper: (SalesData sales, _) => sales.low,
                    openValueMapper: (SalesData sales, _) => sales.open,
                    closeValueMapper: (SalesData sales, _) => sales.close,
                  )
                ], 
                series: <ChartSeries<SalesData, num>>[
                  LineSeries<SalesData, num>(
                      color: Colors.purple,
                      dataSource: chartData,
                      xValueMapper: (SalesData1 sales, _) => sales.x,
                      yValueMapper: (SalesData1 sales, _) => sales.y,
                  )
                ]
              )
            )
          );
        }
    
         class SalesData {
            SalesData(this.x, this.low, this.high, this.open, this.close);
            final num x;
            final double? low;
            final double? high;
            final double? open;
            final double? close;
          }
    
          class SalesData1{
            SalesData1(this.x, this.y);
            final num x;
            final double y;
          }

    Binding data source to Indicators

    Note : Each indicators has their own number of value mappers available,

    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.