Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

RateOfChangeIndicator Class

A rate of change (ROC) indicator.

Namespace: DevExpress.Maui.Charts

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

#Declaration

C#
public class RateOfChangeIndicator :
    CalculatedSeries

#Remarks

This indicator looks as follows:

Rate of Change Indicator

ChartView also supports the following oscillators (an oscillator is a trend indicator banded between two extreme values used to discover short-term overbought or oversold conditions):

#Add an Indicator to a Series

This example builds a rate of change indicator for Close values of a stock series. Associate this indicator with a separate Y axis and place it below the stock series.

  1. Add the RateOfChangeIndicator object to the chart’s collection of series (ChartView.Series).
  2. Set the indicator’s Data property to a CalculatedSeriesDataAdapter class instance. Use this object’s Series property to specify a series for which the indicator should be calculated.
  3. Use the ValueLevel and PointsCount properties to specify the price level of a financial series point and the number of data points used to calculate the indicator.
<dxc:ChartView x:Name="chart">
    <dxc:ChartView.Series>
        <dxc:StockSeries>
            <dxc:StockSeries.Data>
                <dxc:SeriesDataAdapter DataSource="{Binding StockPrices}" ArgumentDataMember="Date">
                    <dxc:ValueDataMember Type="High" Member="High" />
                    <dxc:ValueDataMember Type="Low" Member="Low" />
                    <dxc:ValueDataMember Type="Open" Member="Open" />
                    <dxc:ValueDataMember Type="Close" Member="Close" />
                </dxc:SeriesDataAdapter>
            </dxc:StockSeries.Data>
        </dxc:StockSeries>

        <dxc:RateOfChangeIndicator DisplayName="Rate of Change"
                                   ValueLevel="Close"
                                   PointsCount="14">
            <dxc:RateOfChangeIndicator.Data>
                <dxc:CalculatedSeriesDataAdapter Series="{Binding Series[0], Source={x:Reference chart}}"/>
            </dxc:RateOfChangeIndicator.Data>
            <dxc:RateOfChangeIndicator.AxisY>
                <dxc:NumericAxisY Position="Far" AlwaysShowZeroLevel="False" GridAlignment="2">
                    <dxc:NumericAxisY.Range>
                        <dxc:NumericRange Min="8" Max="12"/>
                    </dxc:NumericAxisY.Range>
                    <dxc:NumericAxisY.Layout>
                        <dxc:AxisLayout Anchor1="0" Anchor2="0.3"/>
                    </dxc:NumericAxisY.Layout>
                </dxc:NumericAxisY>
            </dxc:RateOfChangeIndicator.AxisY>
        </dxc:RateOfChangeIndicator>
    </dxc:ChartView.Series>

    <dxc:ChartView.AxisY>
        <dxc:NumericAxisY Position="Far" AlwaysShowZeroLevel="false" AutoRangeMode="VisibleValues">
            <dxc:NumericAxisY.Layout>
                <dxc:AxisLayout Anchor1="0.4" Anchor2="1"/>
            </dxc:NumericAxisY.Layout>
            <dxc:NumericAxisY.Label>
                <dxc:AxisLabel Position="Outside" TextFormat="$#"/>
            </dxc:NumericAxisY.Label>
        </dxc:NumericAxisY>
    </dxc:ChartView.AxisY>
</dxc:ChartView>

#Customize Indicator Appearance

To change the indicator line appearance, set the RateOfChangeIndicator.Style property to the LineIndicatorStyle object with the specified Stroke and StrokeThickness properties.

<dxc:RateOfChangeIndicator>
    <dxc:RateOfChangeIndicator.Style>
        <dxc:LineIndicatorStyle Stroke="#e95ddc" StrokeThickness="2"/>
    </dxc:RateOfChangeIndicator.Style>

    <!--Indicator Data-->
</dxc:RateOfChangeIndicator>
See Also