Back to Devexpress

Indicators

wpf-115226-controls-and-libraries-charts-suite-chart-control-series-indicators.md

latest17.0 KB
Original Source

Indicators

  • May 28, 2021
  • 5 minutes to read

Indicators are special metrics that are commonly used to analyze and process financial data visually.

The image demonstrates the FibonacciArcs indicator that is calculated using two financial series points’ values.

This document consists of the following sections:

Available Indicators

You can display any number of built-in indicators for the 2D XY Diagram series. The Chart control provides the following indicators:

IndicatorClassRelated document
Trend LinesTrendLineTrend Line
Regression LinesRegressionLineRegression Line
Fibonacci ArcsFibonacciArcsFibonacci Indicators
Fibonacci FansFibonacciFansFibonacci Indicators
Fibonacci RetracementFibonacciRetracementFibonacci Indicators
Simple Moving Average (SMA)SimpleMovingAverageMoving Average and Envelope
Exponential Moving Average (EMA)ExponentialMovingAverageMoving Average and Envelope
Weighted Moving Average (WMA)WeightedMovingAverageMoving Average and Envelope
Triangular Moving Average (TMA)TriangularMovingAverageMoving Average and Envelope
Triple Exponential Moving Average (TEMA)TripleExponentialMovingAverageTemaMoving Average and Envelope
Average True Range (ATR)AverageTrueRangeOscillator Indicators
Commodity Channel Index (CCI)CommodityChannelIndexOscillator Indicators
Detrended Price Oscillator (DPO)DetrendedPriceOscillatorOscillator Indicators
Moving Average Convergence/Divergence (MACD)MovingAverageConvergenceDivergenceOscillator Indicators
Rate of Change (RoC)RateOfChangeOscillator Indicators
Relative Strength Index (RSI)RelativeStrengthIndexOscillator Indicators
Triple Exponential Moving Average oscillator (TRIX)TripleExponentialMovingAverageTrixOscillator Indicators
Chaikin’s VolatilityChaikinsVolatilityOscillator Indicators
Williams %RWilliamsROscillator Indicators
Bollinger BandsBollingerBandsTrend Indicators
Mass IndexMassIndexTrend Indicators
Standard DeviationStandardDeviationTrend Indicators
Median PriceMedianPricePrice Indicators
Weighted CloseWeightedClosePrice Indicators
Typical PriceTypicalPricePrice Indicators
Fixed Error BarsFixedValueErrorBarsError Bars
Percentage Error BarsPercentageErrorBarsError Bars
Standard Error BarsStandardErrorBarsError Bars
Standard Deviation Error BarsStandardDeviationErrorBarsError Bars
Data Source Based Error BarsDataSourceBasedErrorBarsError Bars

How to Add an Indicator to a Series

In this section, you add a Fibonacci Retracement indicator that is shown in the following image:

Specify two points’ argument and value levels to add the Fibonacci Retracement indicator to the chart. Note that other indicators can require defining other specific parameters.

xaml
<dxc:StockSeries2D DisplayName="series">
      <dxc:StockSeries2D.Indicators>
            <dxc:FibonacciRetracement Argument1="09/12/2016"
                                      ValueLevel1="High" 
                                      Argument2="10/18/2016"
                                      ValueLevel2="High" 
                                      LegendText="Fibonacci Retracement"
                                      ShowInLegend="True"/>
      </dxc:StockSeries2D.Indicators>
      <!--...-->
</dxc:StockSeries2D>

The markup above uses the following classes and properties:

Class or PropertyDescription
XYSeries2D.IndicatorsThe series indicators’ collection.
FibonacciRetracementThe Fibonacci Retracement indicator.
FinancialIndicator.Argument1Specifies the first indicator point’s argument.
FinancialIndicator.ValueLevel1Specifies the first indicator point’s value level.
FinancialIndicator.Argument2Specifies the second indicator point’s argument.
FinancialIndicator.ValueLevel2Specifies the second indicator point’s value level.
Indicator.LegendTextText that is shown with an indicator marker in a legend.
Indicator.ShowInLegendSpecifies the value indicating whether to show an indicator in a chart legend.

How to Plot an Indicator on a Separate Pane

Indicators that are SeparatePaneIndicator class descendants can be plotted on a separate pane with a secondary y-axis. Below is the list of these indicators:

The following image shows the Standard Deviation indicator in a separate chart pane:

Use the following code to draw an indicator in a separate pane with a secondary axis:

xaml
<dxc:ChartControl.Legends>
    <dxc:Legend x:Name="legend"/>
</dxc:ChartControl.Legends>
<dxc:XYDiagram2D>
    <dxc:XYDiagram2D.SecondaryAxesY>
        <dxc:SecondaryAxisY2D x:Name="secondaryAxis" 
                              Alignment="Far"/>
    </dxc:XYDiagram2D.SecondaryAxesY>
    <dxc:XYDiagram2D.Panes>
        <dxc:Pane x:Name="pane"/>
    </dxc:XYDiagram2D.Panes>
    <!-- ... -->
    <dxc:StockSeries2D.Indicators>
          <dxc:StandardDeviation dxc:XYDiagram2D.IndicatorAxisY="{Binding ElementName=secondaryAxis}"
                                  dxc:XYDiagram2D.IndicatorPane="{Binding ElementName=pane}" 
                                  ValueLevel="High"
                                  Legend="{Binding ElementName=legend}" 
                                  LegendText="Standard Deviation"
                                  ShowInLegend="True"/>
    </dxc:StockSeries2D.Indicators>
    <!--...-->
</dxc:XYDiagram2D>

The markup above uses the following classes and properties:

Class or PropertyDescription
StandardDeviationThe StandardDeviation indicator.
XYDiagram2D.IndicatorPaneThe pane that displays an indicator.
XYDiagram2D.IndicatorAxisYThe y-axis to which an indicator is bound.
Indicator.LegendThe legend that shows the indicator’s designation.
Indicator.LegendTextText that identifies an indicator in a legend.
Indicator.ShowInLegendSpecifies whether to show an indicator in a legend.

How to Customize Indicator Appearance

You can create a custom color palette to draw indicators instead of the DefaultIndicatorsPalette.

Use the following XAML to configure a custom palette:

xaml
<dxc:ChartControl.IndicatorsPalette>
        <dxc:CustomIndicatorsPalette>
                <dxc:CustomIndicatorsPalette.Colors>
                         <Color>Blue</Color>
                         <Color>Green</Color>
                </dxc:CustomIndicatorsPalette.Colors>
        </dxc:CustomIndicatorsPalette>
</dxc:ChartControl.IndicatorsPalette>

The markup above uses the following classes and properties:

Class or PropertyDescription
ChartControl.IndicatorsPaletteProvides access to the palette applied to indicators.
CustomIndicatorsPaletteThe custom colors’ palette.
CustomIndicatorsPalette.ColorsThe palette’s collection of colors.
ColorThe palette color.

Note

You can specify a color for each indicator using the Indicator.Brush property.

Also, modify a style of a line that is used to draw an indicator.

For this, use the following code:

xaml
<dxc:StockSeries2D.Indicators>
      <dxc:StandardDeviation dxc:XYDiagram2D.IndicatorAxisY="{Binding ElementName=secAxis}"
                             dxc:XYDiagram2D.IndicatorPane="{Binding ElementName=pane}" 
                             ValueLevel="High"
                             Legend="{Binding ElementName=indicatorLegend}" 
                             LegendText="Standard Deviation"
                             ShowInLegend="True">
            <dxc:StandardDeviation.LineStyle>
                  <dxc:LineStyle Thickness="2">
                        <dxc:LineStyle.DashStyle>
                              <DashStyle Dashes="2 1 2"/>
                        </dxc:LineStyle.DashStyle>
                  </dxc:LineStyle>
            </dxc:StandardDeviation.LineStyle>
      </dxc:StandardDeviation>
</dxc:StockSeries2D.Indicators>

The code above uses the following classes and properties to configure a line:

Class or PropertyDescription
Indicator.LineStyleSpecifies the line style settings.
LineStyleLine style’s settings.
LineStyle.DashStyleSpecifies the dash style settings.

See Also

Animate Series Indicators

Financial Series

Primary and Secondary Axes

Legends

Panes