Class ChartIndicator

Defines the technical indicator that is used in financial markets.

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

ChartSubComponent

ChartIndicator

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.BuildRenderTree(RenderTreeBuilder)

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnAfterRenderAsync(bool)

ComponentBase.OnInitialized()

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.Dispose(bool)

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartIndicator : ChartSubComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

ChartIndicator()

Declaration

public ChartIndicator()

Properties

Animation

Gets or sets an instance of ChartIndicatorAnimation
which controls the options to configure the animation for the indicator.

Declaration

[Parameter]
public ChartIndicatorAnimation Animation { get; set; }

Property Value

Type	Description
ChartIndicatorAnimation	An instance of ChartIndicatorAnimation.

Remarks

Use this property to control the behavior of the animation associated with the indicator.

Examples

// This example demonstrates how to configure a technical indicator with animation in a Syncfusion Blazor Chart.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" YName="Y" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Name="Apple Inc" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Sma" Field="FinancialDataFields.Close" SeriesName="Apple Inc" Fill="blue" Period="2">
            <ChartIndicatorAnimation Enable="true" Duration="3000" />
        </ChartIndicator>
    </ChartIndicators>
</SfChart>

BandColor

Gets or sets the color of the Bollinger Band indicator area.

Declaration

[Parameter]
public string BandColor { get; set; }

Property Value

Type	Description
string	A string value specifying the color of the Bollinger Band indicator. The default value is rgba(211,211,211,0.25).

Remarks

Use valid hex or rgba CSS color strings for the color value.

Examples

// This example demonstrates how to render a candlestick chart with a Bollinger Bands indicator,
// setting the band color to red.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.BollingerBands" SeriesName="Apple Inc" BandColor="red" />
    </ChartIndicators>
</SfChart>

Close

Gets or sets the close value of the indicator.

Declaration

[Parameter]
public string Close { get; set; }

Property Value

Type	Description
string	A string value specifying the close value of the indicator. The default value is string.Empty.

Remarks

This property typically holds the closing price or value for the indicator data.

Examples

// This example demonstrates how to set the close value for a candlestick chart with a simple moving average (SMA) indicator.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" YName="Y" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Name="Apple Inc" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Field="FinancialDataFields.Close" Close="Close" SeriesName="Apple Inc" />
    </ChartIndicators>
    <ChartLegendSettings Visible="false" />
</SfChart>

DPeriod

Gets or sets the period over which price changes will define the %D value in stochastic indicators.

Declaration

[Parameter]
public double DPeriod { get; set; }

Property Value

Type	Description
double	A double value representing the DPeriod value in stochastic indicators. The default value is 3.

Remarks

This property determines the period over which price changes are considered to calculate the %D value in stochastic indicators.

Examples

// This example demonstrates how to render a DPeriod property in the chart indicator. 
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Stochastic" SeriesName="Apple Inc" DPeriod="2" />
    </ChartIndicators>
</SfChart>

DashArray

Gets or sets the dash array of the indicator.

Declaration

[Parameter]
public string DashArray { get; set; }

Property Value

Type	Description
string	A string value specifying the dash array of the indicator. The default value is "0".

Remarks

Use this property to specify a custom dash pattern, enhancing the appearance of the indicator on the chart.

Examples

// This example demonstrates how to render a candlestick chart with a Bollinger Bands indicator,
// and applies a dashed line style using the DashArray property.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.BollingerBands" SeriesName="Apple Inc" DashArray="5,3" />
    </ChartIndicators>
</SfChart>

DataSource

Gets or sets defines the data source for the indicator.

Declaration

[Parameter]
public object DataSource { get; set; }

Property Value

Type	Description
object	An object representing the data source for the indicator.

Remarks

This property allows you to specify the data source for the indicator, defining the dataset from which the indicator will derive its values. Ensure that the provided data source contains the required information for the specific indicator type.

Examples

// This example demonstrates how to render datasource for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Fill="Blue" Period="3" />
    </ChartIndicators>
</SfChart>

EnableComplexProperty

Enables the complex property data binding for the indicator.

Declaration

[Parameter]
public bool EnableComplexProperty { get; set; }

Property Value

Type	Description
bool	true if complex property data binding is enabled; otherwise, false. The default value is false.

Remarks

Set the EnableComplexProperty property to true to enable complex property data binding which controls the indicator's appearance and behavior based on complex data structures.

Examples

// This example demonstrates how to set the enab.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" OpposedPosition="true" RowIndex="0" Minimum="-7000000000" Maximum="5000000000" Title="Accumulation Distribution" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" />
    <ChartIndicators>
        <ChartIndicator DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="y.Low" High="y.High" Close="y.Close" Volume="y.Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Fill="Blue" Period="3" EnableComplexProperty="true" />
    </ChartIndicators>
</SfChart>

FastPeriod

Gets or sets the fast period used to define the MACD line.

Declaration

[Parameter]
public double FastPeriod { get; set; }

Property Value

Type	Description
double	A double representing the fast period for defining the MACD line. The default value is 26.

Remarks

This property is applicable only for the MACD (Moving Average Convergence Divergence) indicator. It is used to customize the MACD period, influencing the calculation of the MACD line.

Examples

// This example demonstrates how to render a candlestick chart with a MACD indicator,
// using a slow period of 12 for the MACD calculation.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Macd" SeriesName="Apple Inc" FastPeriod="12" />
    </ChartIndicators>
</SfChart>

Field

Gets or sets the field to compare the current value with previous values.

Declaration

[Parameter]
public FinancialDataFields Field { get; set; }

Property Value

Type Description

Type	Description
FinancialDataFields	One of the FinancialDataFields enumeration that specifies the financial data fields to compare the current value with previous values. The options include: `High`: Defines the highest price in the stocks over time. `Low`: Defines the lowest price in the stocks over time. `Open`: Defines the opening price in the stocks over time. `Close`: Defines the closing price in the stocks over time. The default value is FinancialDataFields.Close.

FinancialDataFields

One of the FinancialDataFields enumeration that specifies the financial data fields to compare the current value with previous values. The options include:

High: Defines the highest price in the stocks over time.
Low: Defines the lowest price in the stocks over time.
Open: Defines the opening price in the stocks over time.
Close: Defines the closing price in the stocks over time.
The default value is FinancialDataFields.Close.

Remarks

This property is used to determine which aspect of financial data (e.g., high price, low price) the indicator should analyze against historical data.

Examples

// This example demonstrates how to render a candlestick chart with a Bollinger Bands indicator using the 'High' field .
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.BollingerBands" Field="FinancialDataFields.High" SeriesName="Apple Inc" StandardDeviation="5" />
    </ChartIndicators>
</SfChart>

Fill

Gets or sets the fill color of the indicator line.

Declaration

[Parameter]
public string Fill { get; set; }

Property Value

Type	Description
string	A string value specifying the fill color of the indicator line.

Remarks

Use valid hex or rgba CSS color strings for the color value.

Examples

// This example demonstrates how to render a candlestick chart with a Bollinger Bands indicator,
// and sets the fill color of the indicator to red.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.BollingerBands" SeriesName="Apple Inc" Fill="red" />
    </ChartIndicators>
</SfChart>

High

Gets or sets the high value of the indicator.

Declaration

[Parameter]
public string High { get; set; }

Property Value

Type	Description
string	A string representing the high value of the indicator. The default value is an empty string.

Remarks

This property is typically used to provide the upper bound or maximum value for the indicator.

Examples

// This example demonstrates how to render high value for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Fill="Blue" Period="3" />
    </ChartIndicators>
</SfChart>

KPeriod

Gets or sets the look-back period over which price changes will define the %K value in stochastic indicators.

Declaration

[Parameter]
public double KPeriod { get; set; }

Property Value

Type	Description
double	A double representing the look-back period. The default value is 14.

Remarks

This property determines the period over which price changes are considered to calculate the %K value in stochastic indicators.

Examples

// This example demonstrates how to render a KPeriod property in the chart indicator. 
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Stochastic" SeriesName="Apple Inc" KPeriod="3" />
    </ChartIndicators>
</SfChart>

Low

Gets or sets the low value of the indicator.

Declaration

[Parameter]
public string Low { get; set; }

Property Value

Type	Description
string	A string representing the low value of the indicator. The default value is an empty string.

Remarks

This property is typically used to provide the lower bound or minimum value for the indicator.

Examples

// This example demonstrates how to render low value for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Fill="Blue" Period="3" />
    </ChartIndicators>
</SfChart>

LowerLine

Gets or sets an instance of ChartIndicatorLowerLine that defines the appearance of the lower line in technical indicators.

Declaration

[Parameter]
public ChartIndicatorLowerLine LowerLine { get; set; }

Property Value

Type	Description
ChartIndicatorLowerLine	An instance of ChartIndicatorLowerLine.

Remarks

This property provides options to visually enhance and distinguish the lower line in technical indicators by customizing the color and width.

Examples

// This example demonstrates how to render a chart with a Bollinger Bands indicator, customizing the lower line.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" YName="Y" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Name="Apple Inc" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.BollingerBands" Field="FinancialDataFields.Close" SeriesName="Apple Inc" Fill="#6063ff" Period="3">
            <ChartIndicatorLowerLine Width="2" Color="Yellow"></ChartIndicatorLowerLine>
        </ChartIndicator>
    </ChartIndicators>
</SfChart>

MacdLine

Gets or sets an instance of ChartIndicatorMacdLine which defines the appearance of the MacdLine in the Macd indicator.

Declaration

[Parameter]
public ChartIndicatorMacdLine MacdLine { get; set; }

Property Value

Type	Description
ChartIndicatorMacdLine	An instance of ChartIndicatorMacdLine.

Remarks

This property provides options to visually enhance and distinguish the Macd line in technical indicators by customizing the color and width.
Note: It is only applicable for Macd Indicator.

Examples

// This example demonstrates how to macd line in the macd indicator.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" YName="Y" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Width="2" Name="Apple Inc" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Macd" Field="FinancialDataFields.Close" SeriesName="Apple Inc" Period="3">
            <ChartIndicatorMacdLine Color="navy" Width="2"></ChartIndicatorMacdLine>
        </ChartIndicator>
    </ChartIndicators>
</SfChart>

MacdNegativeColor

Gets or sets the color of the negative bars in Macd indicators.

Declaration

[Parameter]
public string MacdNegativeColor { get; set; }

Property Value

Type	Description
string	A string representing the color of the negative bars. The default value is "#e74c3d".

Remarks

It accepts values in hex or rgba as a valid CSS color string. This property is only applicable for Macd indicators.

Examples

// This example demonstrates how to render a candlestick chart with a MACD indicator,
// displaying both the MACD line and signal line, and setting the negative MACD color to blue.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Macd" SeriesName="Apple Inc" MacdType="MacdType.Both" MacdNegativeColor="blue" />
    </ChartIndicators>
</SfChart>

MacdPositiveColor

Gets or sets the color of the positive bars in Macd indicators.

Declaration

[Parameter]
public string MacdPositiveColor { get; set; }

Property Value

Type	Description
string	A string representing the color of the positive bars. The default value is "#2ecd71".

Remarks

It accepts values in hex or rgba as a valid CSS color string. This property is only applicable for Macd indicators.

Examples

// This example demonstrates how to render a candlestick chart with a MACD indicator,
// displaying both the MACD line and signal line, and setting the positive MACD color to blue.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Macd" SeriesName="Apple Inc" MacdType="MacdType.Both" MacdPositiveColor="blue" />
    </ChartIndicators>
</SfChart>

MacdType

Gets or sets the type of the Macd indicator.

Declaration

[Parameter]
public MacdType MacdType { get; set; }

Property Value

Type Description

Type	Description
MacdType	One of the MacdType enumeration that specifies the type of Macd indicator. The options include: `Line`: Predicts the trend using a simple moving average approach. `Histogram`: Predicts the trend using a histogram approach. `Both`: Predicts the trend using both line and histogram approaches. The default value is MacdType.Both.

MacdType

One of the MacdType enumeration that specifies the type of Macd indicator. The options include:

Line: Predicts the trend using a simple moving average approach.
Histogram: Predicts the trend using a histogram approach.
Both: Predicts the trend using both line and histogram approaches. The default value is MacdType.Both.

Remarks

This property is only applicable for Macd indicators.

Examples

// This example demonstrates how to render a candlestick chart with a MACD indicator,
// displaying both the MACD line and signal line.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Macd" SeriesName="Apple Inc" MacdType="MacdType.Both" />
    </ChartIndicators>
</SfChart>

Open

Gets or sets the open value of the indicator.

Declaration

[Parameter]
public string Open { get; set; }

Property Value

Type	Description
string	A string representing the open value of the indicator. The default value is an empty string.

Remarks

This property typically holds the opening price or value for the indicator data.

Examples

// This example demonstrates how to render open value for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Fill="Blue" Period="3" />
    </ChartIndicators>
</SfChart>

OverBought

Gets or sets the over-bought (threshold) values.

Declaration

[Parameter]
public double OverBought { get; set; }

Property Value

Type	Description
double	A double representing the over-bought threshold values. The default value is 80.

Remarks

This property is only applicable to RSI and stochastic indicators.

Examples

// This example demonstrates how to render an OverBought property in the chart indicator. 
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Rsi" SeriesName="Apple Inc" KPeriod="3" OverBought="50" />
    </ChartIndicators>
</SfChart>

OverSold

Gets or sets the over-sold (threshold) values.

Declaration

[Parameter]
public double OverSold { get; set; }

Property Value

Type	Description
double	A double representing the over-sold threshold values. The default value is 20.

Remarks

This property is only applicable to RSI and stochastic indicators.

Examples

// This example demonstrates how to render an OverSold property in the chart indicator. 
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Rsi" SeriesName="Apple Inc" KPeriod="3" OverSold="50" />
    </ChartIndicators>
</SfChart>

Period

Gets or sets the period over which price changes will be considered to predict the trend.

Declaration

[Parameter]
public double Period { get; set; }

Property Value

Type	Description
double	A double representing the period. The default value is 14.

Remarks

This property defines the time span over which price changes are taken into account for trend prediction. Adjusting this value can impact the sensitivity of trend analysis.

Examples

// This example demonstrates how to render a period property in the chart indicator. 
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.AccumulationDistribution" SeriesName="Apple Inc" Period="3" />
    </ChartIndicators>
</SfChart>

PeriodLine

Gets or sets an instance of ChartIndicatorPeriodLine that defines the appearance of the Period Line in technical indicators.

Declaration

[Parameter]
public ChartIndicatorPeriodLine PeriodLine { get; set; }

Property Value

Type	Description
ChartIndicatorPeriodLine	An instance of ChartIndicatorPeriodLine.

Remarks

This property provides options to visually enhance and distinguish the period line in technical indicators by customizing the color and width.

Examples

// This example demonstrates how to indicator period line in the indicator.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" YName="Y" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Width="2" Name="Apple Inc" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Stochastic" Field="FinancialDataFields.Close" SeriesName="Apple Inc" Period="3">
            <ChartIndicatorPeriodLine Color="yellow" Width="3"></ChartIndicatorPeriodLine>
        </ChartIndicator>
    </ChartIndicators>
</SfChart>

SeriesName

Gets or sets the name of the series whose data has to be depicted as an indicator.

Declaration

[Parameter]
public string SeriesName { get; set; }

Property Value

Type	Description
string	A string representing the series name. The default value is an empty string.

Remarks

Ensure that the provided series name corresponds to an existing data series in the chart.

Examples

// This example demonstrates how to render a candlestick chart with a Bollinger Bands indicator using SeriesName property.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.BollingerBands" SeriesName="Apple Inc" BandColor="red" />
    </ChartIndicators>
</SfChart>

ShowZones

Gets or sets a value indicating whether to show over-bought and over-sold regions.

Declaration

[Parameter]
public bool ShowZones { get; set; }

Property Value

Type	Description
bool	true to show over-bought and over-sold regions; otherwise, false. The default value is true.

Remarks

This property is only applicable to RSI and stochastic indicators.

Examples

// This example demonstrates how to render a candlestick chart with a Relative Strength Index (RSI) indicator,
// with zones displayed for the RSI.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Rsi" SeriesName="Apple Inc" ShowZones="true" />
    </ChartIndicators>
</SfChart>

SlowPeriod

Gets or sets the slow period used to define the MACD line.

Declaration

[Parameter]
public double SlowPeriod { get; set; }

Property Value

Type	Description
double	A double representing the slow period for defining the MACD line. The default value is 12.

Remarks

This property is applicable only for the MACD (Moving Average Convergence Divergence) indicator. It is used to customize the MACD period, influencing the calculation of the MACD line.

Examples

// This example demonstrates how to render a candlestick chart with a MACD indicator,
// using a slow period of 12 for the MACD calculation.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Macd" SeriesName="Apple Inc" SlowPeriod="12" />
    </ChartIndicators>
</SfChart>

StandardDeviation

Gets or sets the standard deviation values used to define the upper and lower Bollinger Bands.

Declaration

[Parameter]
public double StandardDeviation { get; set; }

Property Value

Type	Description
double	A double representing the standard deviation values. The default value is 2.

Remarks

This property is applicable only for the Bollinger Bands indicator type. It determines the number of standard deviations to be used in calculating the upper and lower bands.

Examples

// This example demonstrates how to render a StandardDeviation property in the chart indicator. 
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" Name="Apple Inc" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.BollingerBands" SeriesName="Apple Inc" StandardDeviation="5" />
    </ChartIndicators>
</SfChart>

Type

Gets or sets the type of the technical indicator.

Declaration

[Parameter]
public TechnicalIndicators Type { get; set; }

Property Value

Type Description

Type	Description
TechnicalIndicators	One of the TechnicalIndicators enumerations that specifies the type of technical indicators. The options include: `Sma`: Predicts the trend using a simple moving average approach. `Ema`: Predicts the trend using an exponential moving average approach. `Tma`: Predicts the trend using a triangle moving average approach. `Momentum`: Predicts the trend using a momentum approach. `Atr`: Predicts the trend using an average true range approach. `AccumulationDistribution`: Predicts the trend using an accumulation distribution approach. `BollingerBands`: Predicts the trend using a Bollinger approach. `Macd`: Predicts the trend using moving average convergence divergence approach. `Stochastic`: Predicts the trend using a stochastic approach. `Rsi`: Predicts the trend using RSI approach. The default value is TechnicalIndicators.Sma.

TechnicalIndicators

One of the TechnicalIndicators enumerations that specifies the type of technical indicators. The options include:

Sma: Predicts the trend using a simple moving average approach.
Ema: Predicts the trend using an exponential moving average approach.
Tma: Predicts the trend using a triangle moving average approach.
Momentum: Predicts the trend using a momentum approach.
Atr: Predicts the trend using an average true range approach.
AccumulationDistribution: Predicts the trend using an accumulation distribution approach.
BollingerBands: Predicts the trend using a Bollinger approach.
Macd: Predicts the trend using moving average convergence divergence approach.
Stochastic: Predicts the trend using a stochastic approach.
Rsi: Predicts the trend using RSI approach.
The default value is TechnicalIndicators.Sma.

Remarks

The Type property determines the algorithm used for trend prediction in the indicator.

Examples

// This example demonstrates how to render a candlestick chart with an Accumulation/Distribution indicator.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails"  Name="Apple Inc"  XName="X"  Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Width="2" Type="ChartSeriesType.Candle">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.AccumulationDistribution" SeriesName="Apple Inc" />
    </ChartIndicators>
</SfChart>

UpperLine

Gets or sets an instance of ChartIndicatorUpperLine that defines the appearance of the upper line in technical indicators.

Declaration

[Parameter]
public ChartIndicatorUpperLine UpperLine { get; set; }

Property Value

Type	Description
ChartIndicatorUpperLine	An instance of ChartIndicatorUpperLine.

Remarks

This property can be used to customize the width and color of the upper line of indicator.

Examples

// This example demonstrates how to update the upper line in the indicator.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" YName="Y" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Width="2" Name="Apple Inc" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.BollingerBands" Field="FinancialDataFields.Close" SeriesName="Apple Inc" Period="3">
            <ChartIndicatorUpperLine Color="Orange"></ChartIndicatorUpperLine>
        </ChartIndicator>
    </ChartIndicators>
</SfChart>

Visible

Gets or sets a value indicating whether the indicator is visible.

Declaration

[Parameter]
public bool Visible { get; set; }

Property Value

Type	Description
bool	true if the indicator is visible; otherwise, false. The default value is true.

Remarks

Toggling the visibility can be used to hide or display the indicator in the chart.

Examples

// This example demonstrates how to render visible for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator Visible="true" DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Fill="Blue" Period="3" />
    </ChartIndicators>
</SfChart>

Volume

Gets or sets the volume value of the indicator.

Declaration

[Parameter]
public string Volume { get; set; }

Property Value

Type	Description
string	A string representing the volume value of the indicator. The default value is an empty string.

Remarks

This property generally contains the volume data for the financial series represented by the indicator.

Examples

// This example demonstrates how to render volume for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Fill="Blue" Period="3" />
    </ChartIndicators>
</SfChart>

Width

Gets or sets the width of the indicator.

Declaration

[Parameter]
public double Width { get; set; }

Property Value

Type	Description
double	A double representing the width of the indicator. The default value is 1.

Remarks

Adjusting the width can be used to make the indicator line thicker or thinner in the chart.

Examples

// This example demonstrates how to render visible for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator Width="2" DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Period="3" />
    </ChartIndicators>
</SfChart>

XAxisName

Gets or sets the name of the corresponding horizontal axis on which the indicator is to be plotted.

Declaration

[Parameter]
public string XAxisName { get; set; }

Property Value

Type	Description
string	A string representing the name of the horizontal axis. The default value is an empty string.

Remarks

Ensure the provided axis name corresponds to an existing axis in the chart configuration.

Examples

// This example demonstrates how to render xAxisName for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator Visible="true" DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" Fill="Blue" Period="3" />
    </ChartIndicators>
</SfChart>

XName

Gets or sets the xValue of the indicator.

Declaration

[Parameter]
public string XName { get; set; }

Property Value

Type	Description
string	A string representing the xValue of the indicator. The default is an empty string.

Remarks

This property is used to map the field that represents X-values in the dataset for the indicator.

Examples

// This example demonstrates how to set the x-name for the indicator.
<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StockDetails" XName="X" YName="Y" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Name="Apple Inc" Type="ChartSeriesType.Candle" />
    </ChartSeriesCollection>
    <ChartIndicators>
        <ChartIndicator Type="TechnicalIndicators.Sma" Field="FinancialDataFields.Close" SeriesName="Apple Inc" Fill="blue" Period="2" />
    </ChartIndicators>
    <ChartLegendSettings Visible="false" />
</SfChart>

YAxisName

Gets or sets the name of the corresponding vertical axis on which the indicator is to be plotted.

Declaration

[Parameter]
public string YAxisName { get; set; }

Property Value

Type	Description
string	A string representing the name of the vertical axis. The default value is an empty string.

Remarks

Ensure the provided axis name matches an existing axis in the chart configuration.

Examples

// This example demonstrates how to render yAxisName for the indicator.
<SfChart>
    <ChartAxes>
        <ChartAxis Name="secondary" Minimum="-7000000000" Maximum="5000000000" Interval="6000000000" />
    </ChartAxes>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>
    <ChartIndicators>
        <ChartIndicator Visible="true" DataSource="@StockDetails" Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" XName="X" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" SeriesName="Apple Inc" YAxisName="secondary" />
    </ChartIndicators>
</SfChart>

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable