Introducing the New ROC and WMA Indicators in Flutter Charts
Tags: flutter, chart, desktop, whatsnew
Published: 2024-06-25 02:41:12

---
title: Introducing the New ROC and WMA Indicators in Flutter Charts
published: true
date: 2024-06-24 12:23:15 UTC
tags: flutter, chart, desktop, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/roc-and-wma-indicators-flutter-charts
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy6q1qju3x5q9nqmr7v9.png
---
**TL;DR:** Syncfusion Flutter Charts widget introduced the new ROC and WMA indicators in the 2024 volume 2 release. The ROC helps identify trends and potential reversal points, while WMA is responsive to price changes. Both can be implemented directly or by linking a series name.

The Syncfusion [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts "Flutter Charts") is a well-crafted charting widget for visualizing data. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios.

In the latest [2024 volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2") release, we’ve introduced the new [Rate of Change (ROC)](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RocIndicator-class.html "RocIndicator<T, D> class for Flutter Charts Package") and [Weighted Moving Average (WMA)](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WmaIndicator-class.html "WmaIndicator<T, D> class for Flutter Charts Package") indicators in the Flutter Charts. Let’s delve into their specifics!

## Rate of Change (ROC) indicator

The [Rate of Change (ROC](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RocIndicator-class.html "RocIndicator<T, D> class for Flutter Charts Package") is a momentum-based technical indicator that calculates the percentage difference between a current price and its price for a certain number of previous [periods](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RocIndicator/period.html "period property for Flutter Charts Package"). The formula is as follows:[![Rate of Change (ROC) indicator formula](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Rate-of-Change-ROC-indicator-formula.png)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Rate-of-Change-ROC-indicator-formula.png)

For instance, if an asset’s closing price today is $15, and 14 days ago it was $10, the 14-day ROC would be 50%, calculated using the formula:

((15 – 10) / 10) \* 100.

The ROC has two signals:

1. ROC signal line
2. Centerline or baseline

The baseline of the Rate of Change indicator plays a critical role in identifying new trends. A rise of the ROC signal through the baseline into positive territory indicates a reversal to an uptrend, presenting buying opportunities. On the other hand, when the ROC drops through the baseline into negative territory, it signifies a shift to a downtrend, suggesting potential sell signals.

There are two methods to map the data source to the ROC indicator in our [Flutter Charts](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html "SfCartesianChart class for Flutter Charts Package").

**Option 1:** Directly map the data source into the indicator using the [dataSource](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/dataSource.html "dataSource property for Flutter Charts Package") property. Refer to the following code example.

```csharp
SfCartesianChart(
  primaryXAxis: const DateTimeAxis(),
  ...
  indicators: [
    RocIndicator<DataModel, DateTime>(
      dataSource: _dataSource,
      xValueMapper: (DataModel data, int index) => data.x,
      closeValueMapper: (DataModel data, int index) => data. Close,
    ),
  ],
)
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Mapping-the-data-source-from-series-into-the-ROC-indicator-in-Flutter-Charts-1.png" alt="Mapping the data source from series into the ROC indicator in Flutter Charts" style="width:100%">

  <figcaption>Mapping the data source from series into the ROC indicator in Flutter Charts</figcaption>

</figure>

**Option 2** : Assign a [name](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html "name property for Flutter Charts Package") to the series and map the data source from this series to the indicator. This is done by using the [seriesName](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/seriesName.html "seriesName property for Flutter Charts Package") property.

```csharp
SfCartesianChart(
  primaryXAxis: const DateTimeAxis(),
  ...
  series: <CartesianSeries<DataModel, DateTime>>[
    CandleSeries(
      name: 'Candle',
      dataSource: _cartesianSeriesData,
      xValueMapper: (DataModel data, int index) => data.x,
      highValueMapper: (DataModel data, int index) => data.high,
      lowValueMapper: (DataModel data, int index) => data.low,
      openValueMapper: (DataModel data, int index) => data.open,
      closeValueMapper: (DataModel data, int index) => data.close,
    ),
  ],
  indicators: [
    RocIndicator<DataModel, DateTime>(
      seriesName: 'Candle',
    ),
  ],
)
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Mapping-the-data-source-from-series-into-the-ROC-indicator-in-Flutter-Charts.gif" alt="Mapping the data source from series into the ROC indicator in Flutter Charts" style="width:100%">

  <figcaption>Mapping the data source from series into the ROC indicator in Flutter Charts</figcaption>

</figure>

### Difference between momentum and rate of change (ROC) indicators

The momentum and the Rate of Change (ROC) are related indicators often yield similar results using the same [n-period](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RocIndicator/period.html "period property for Flutter Charts Package") value. The significant difference between them is that the Rate of Change (ROC) indicator calculates change by taking the current price less the price [n-periods](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RocIndicator/period.html "period property for Flutter Charts Package") earlier and then dividing it by the price [n-periods](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RocIndicator/period.html "period property for Flutter Charts Package") earlier to express it as a percentage. The [momentum indicator](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MomentumIndicator-class.html "MomentumIndicator<T, D> class for Flutter Charts Package") just multiplies the difference between prices by 100.

The [Weighted Moving Average (WMA)](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WmaIndicator-class.html "WmaIndicator<T, D> class for Flutter Charts Package") smooths out price data and identifies trends. The WMA assigns greater weight to **more recent** [periods](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WmaIndicator/period.html "period property for Flutter Charts Package"), which allows it to react more quickly to price changes. The WMA formula is,
[![Weighted Moving Average (WMA) indicator](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Weighted-Moving-Average-WMA-indicator-formula.png)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Weighted-Moving-Average-WMA-indicator-formula.png)

Let’s take the following data. Here, the period is 5.

![Timeframe in Weighted Moving Average indicator](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Timeframe-in-Weighted-Moving-Average-indicator.png)

Here, you can see the greater weight is assigned to the most recent price.

[![Weighted Moving Average (WMA) indicator](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Weighted-Moving-Average-WMA-indicator-.png)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Weighted-Moving-Average-WMA-indicator-.png)

When the price crosses above the WMA, it might indicate a buying opportunity; when it crosses below, it might indicate a selling opportunity.

There are two ways to map the data source to the WMA indicator in our Flutter Charts.

**Option 1** : Map the data source directly into the indicator using the [dataSource](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/dataSource.html "dataSource property for Flutter Charts Package") property. Refer to the following code example.

```csharp
SfCartesianChart(
  primaryXAxis: const DateTimeAxis(),
  ...
  indicators: [
    WMAIndicator<DataModel, DateTime>(
      dataSource: _dataSource,
      xValueMapper: (DataModel data, int index) => data.x,
      highValueMapper: (DataModel data, int index) => data.high,
      lowValueMapper: (DataModel data, int index) => data.low,
      openValueMapper: (DataModel data, int index) => data.open,
      closeValueMapper: (DataModel data, int index) => data. Close,
    ),
  ],
)
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Mapping-the-data-source-directly-into-the-WMA-indicator-in-Flutter-Charts.png" alt="Mapping the data source directly into the WMA indicator in Flutter Charts" style="width:100%">

  <figcaption>Mapping the data source directly into the WMA indicator in Flutter Charts</figcaption>

</figure>

**Option 2** : Map the data source from a series by assigning a [name](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html "name property for Flutter Charts Package") to the series and then mapping that series name to the indicator using the [seriesName](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/seriesName.html "seriesName property for Flutter Charts Package") property.

```csharp
SfCartesianChart(
  primaryXAxis: const DateTimeAxis(),
  ...
  series: <CartesianSeries<DataModel, DateTime>>[
    CandleSeries(
      name: 'Candle',
      dataSource: _cartesianSeriesData,
      xValueMapper: (DataModel data, int index) => data.x,
      highValueMapper: (DataModel data, int index) => data.high,
      lowValueMapper: (DataModel data, int index) => data.low,
      openValueMapper: (DataModel data, int index) => data.open,
      closeValueMapper: (DataModel data, int index) => data.close,
    ),
  ],
  indicators: [
    WMAIndicator<DataModel, DateTime>(
      seriesName: 'Candle',
    ),
  ],
)
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Mapping-the-data-source-from-series-into-the-WMA-indicator-in-Flutter-Charts.gif" alt="Mapping the data source from series into the WMA indicator in Flutter Charts" style="width:100%">

  <figcaption>Mapping the data source from series into the WMA indicator in Flutter Charts</figcaption>

</figure>

### Difference between the SMA and WMA indicators

The simple moving average ([SMA](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SmaIndicator-class.html "SmaIndicator<T, D> class for Flutter Charts Package")) and weighted moving average ([WMA](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WmaIndicator-class.html "WmaIndicator<T, D> class for Flutter Charts Package")) indicators are used to smooth out price data and identify trends. However, the difference is in how they treat the price while calculating the average value. The WMA assigns more weight to recent data points, making it more responsive to recent price changes than an SMA, which assigns equal weight to all price data.

## Conclusion

Thanks for reading! You now comprehensively understand the new [Rate of Change (ROC)](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RocIndicator-class.html "RocIndicator<T, D> class for Flutter Charts Package") and [Weighted Moving Average (WMA)](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WmaIndicator-class.html "WmaIndicator<T, D> class for Flutter Charts Package") indicators of the [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts "Flutter Charts") introduced in the [2024 volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2") release. To explore all the updates in this release, refer to our [release notes](https://help.syncfusion.com/common/essential-studio/release-notes/v26.1.35 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New pages") pages. We encourage you to try our [Flutter packages](https://pub.dev/publishers/syncfusion.com/packages "Flutter packages") and share your feedback in the comments below.

You can also access our complete [user guide](https://help.syncfusion.com/flutter/introduction/overview "Introduction to Syncfusion Flutter Widgets Documentation") and explore our [Flutter project examples](https://github.com/syncfusion/flutter-examples "Flutter GitHub demo") for more information. Additionally, you can discover our demo apps on various platforms, such as [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en "Syncfusion Flutter UI Widgets on Google Play"), the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341 "Syncfusion Flutter UI Widgets on App Store"), the [Microsoft Store](https://www.microsoft.com/store/productId/9NHNBWCSF85D "Syncfusion Flutter Gallery on Microsoft Store"), the [Snap Store](https://snapcraft.io/syncfusion-flutter-gallery "Syncfusion Flutter Gallery on Snapcraft"), the [App Center](https://install.appcenter.ms/orgs/syncfusion-demos/apps/syncfusion-flutter-gallery/distribution_groups/release "Syncfusion Flutter Gallery on App Center"), and our [website](https://flutter.syncfusion.com/#/ "Flutter UI Widget on Syncfusion website").

If you require a new widget in our Flutter framework or additional features in our existing widgets, please contact us via our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/flutter "Syncfusion Feedback Portal"). We are always delighted to assist you!

## Related blogs

- [What’s New in Flutter: 2024 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-flutter-2024-volume-2 "Blog: What’s New in Flutter: 2024 Volume 2")
- [Syncfusion Essential Studio 2024 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol2 "Blog: Syncfusion Essential Studio 2024 Volume 2 Is Here!")
- [Open and Save PDF Files Locally in Flutter](https://www.syncfusion.com/blogs/post/open-save-pdf-locally-flutter "Blog: Open and Save PDF Files Locally in Flutter")
- [Flutter Made Easy: 5 Tools to Build Better Apps Faster](https://www.syncfusion.com/blogs/post/build-apps-faster-with-flutter-tools "Blog: Flutter Made Easy: 5 Tools to Build Better Apps Faster")