TechnicalIndicator

23 Sep 20258 minutes to read

Defines how to represent the market trend using technical indicators.

Properties

accessibility AccessibilityModel

Options to improve accessibility for technical indicator elements.

animation AnimationModel

Options for customizing the animation of the series.
By default, animation is enabled with a duration of 1000 milliseconds (about 1 second). It can be disabled by setting enable to false.
The following properties are supported in animation:

• enable: If set to true, the series is animated on initial loading.
• duration: The duration of the animation in milliseconds.
• delay: The delay before the animation starts, in milliseconds.

bandColor string

Configures the settings for customizing the Bollinger Bands in the indicator.

Defaults to ‘rgba(211,211,211,0.25)’

close string

The data source field that contains the close value.
It is applicable for both financial series and technical indicators.

Defaults to ’’

colorName string

The data source field that contains the color mapping value.
It is applicable for range color mapping.

dPeriod number

Defines the period over which price changes determine the %D value in stochastic indicators.

Defaults to 3

dashArray string

Defines the pattern of dashes and gaps used to stroke the lines in Line type series.

Defaults to ’’

dataSource Object|DataManager

Specifies the data source for the series. It can be an array of JSON objects, or an instance of DataManager.

<div id='Chart'></div>

let dataManager: DataManager = new DataManager({
   url: 'https://services.syncfusion.com/js/production/api/orders'
});
let query: Query = new Query().take(5);
let chart: Chart = new Chart({
...
  series: [{
       type: 'Column',
       dataSource: dataManager,
       xName: 'CustomerID',
       yName: 'Freight',
       query: query
   }],
...
});
chart.appendTo('#Chart');

Defaults to ’’

enableComplexProperty boolean

This property is used to improve chart performance through data mapping for the series data source.

Defaults to false

fastPeriod number

Sets the fast period to define the MACD line.

Defaults to 26

field FinancialDataFields

Defines the field used to compare the current value with previous values.

Defaults to ‘Close’

fill string

The fill color for the series, which accepts values in hex or rgba as a valid CSS color string.
It also represents the color of the signal lines in technical indicators.
For technical indicators, the default value is ‘blue’, and for series, it is null.

Defaults to null

high string

The data source field that contains the high value.
It is applicable for both financial series and technical indicators.

Defaults to ’’

kPeriod number

Defines the look-back period for price changes used to calculate the %K value in stochastic indicators.

Defaults to 14

low string

The data source field that contains the low value.
It is applicable for both financial series and technical indicators.

Defaults to ’’

lowerLine ConnectorModel

Defines the appearance of the lower line in technical indicators.

macdLine ConnectorModel

Defines the appearance of the MACD line in the MACD indicator.

Defaults to { color: ‘#ff9933’, width: 2 }

macdNegativeColor string

Specifies the color for negative bars in the MACD indicator.

Defaults to ‘#e74c3d’

macdPositiveColor string

Specifies the color for positive bars in the MACD indicator.

Defaults to ‘#2ecd71’

macdType MacdType

Defines the type of the MACD (Moving Average Convergence Divergence) indicator.

Defaults to ‘Both’

open string

The data source field that contains the open value.
It is applicable for both financial series and technical indicators.

Defaults to ’’

overBought number

Specifies the over-bought (threshold) values applicable for RSI and stochastic indicators.

Defaults to 80

overSold number

Defines the over-sold (threshold) values for RSI and stochastic indicators.

Defaults to 20

period number

Defines the period over which price changes are considered for trend prediction.

Defaults to 14

periodLine ConnectorModel

Defines the appearance of the period line in technical indicators.

pointColorMapping string

The data source field that contains the color value of a point.
It is applicable for series.

Defaults to ’’

query Query

Specifies a query to select data from the data source. This property is applicable only when the data source is an ej.DataManager.

Defaults to ’’

segmentAxis Segment

Defines the axis along which the line series will be split.

segments ChartSegmentModel[]

Specifies a collection of regions used to differentiate a line series.

seriesName string

Specifies the name of the series to be used for displaying the indicator data.

Defaults to ’’

showZones boolean

Specifies whether to enable or disable the over-bought and over-sold regions.

Defaults to true

slowPeriod number

Sets the slow period for defining the MACD line.

Defaults to 12

standardDeviation number

Sets the standard deviation values used to define the upper and lower Bollinger Bands.

Defaults to 2

type TechnicalIndicators

Defines the types of technical indicators. They are:

• ‘Sma’ - Predicts the trend using the Simple Moving Average approach.
• ‘Ema’ - Predicts the trend using the Exponential Moving Average approach.
• ‘Tma’ - Predicts the trend using the Triangular Moving Average approach.
• ‘Atr’ - Predicts the trend using the Average True Range approach.
• ‘AccumulationDistribution’ - Predicts the trend using the Accumulation Distribution approach.
• ‘Momentum’ - Predicts the trend using the Momentum approach.
• ‘Rsi’ - Predicts the trend using the Relative Strength Index (RSI) approach.
• ‘Macd’ - Predicts the trend using the Moving Average Convergence Divergence (MACD) approach.
• ‘Stochastic’ - Predicts the trend using the Stochastic Oscillator approach.
• ‘BollingerBands’ - Predicts the trend using the Bollinger Bands approach.

Defaults to ‘Sma’

upperLine ConnectorModel

Defines the appearance of the upper line in technical indicators.

visible boolean

If set to true, the series will be visible. If set to false, the series will be hidden.

Defaults to true

volume string

Defines the data source field that contains the volume value in candle charts.
It is applicable for both financial series and technical indicators.

Defaults to ’’

width number

The stroke width for the series, applicable only for Line type series.
It also represents the stroke width of the signal lines in technical indicators.

Defaults to 1

xAxisName string

The name of the horizontal axis associated with the series. It requires axes of the chart.
It is applicable for series and technical indicators.

<div id='Chart'></div>

let chart: Chart = new Chart({
...
    columns: [{ width: '50%' },
              { width: '50%' }],
    axes: [{
               name: 'xAxis 1',
               columnIndex: 1
           }],
    series: [{
               dataSource: data,
               xName: 'x', yName: 'y',
               xAxisName: 'xAxis 1'
    }],
});
chart.appendTo('#Chart');

Defaults to null

xName string

The data source field that contains the x value.
It is applicable to both series and technical indicators.

Defaults to ’’

yAxisName string

The name of the vertical axis associated with the series. It requires axes of the chart.
It is applicable for series and technical indicators.

<div id='Chart'></div>

let chart: Chart = new Chart({
...
    rows: [{ height: '50%' },
           { height: '50%' }],
    axes: [{
               name: 'yAxis 1',
               rowIndex: 1
           }],
    series: [{
               dataSource: data,
               xName: 'x', yName: 'y',
               yAxisName: 'yAxis 1'
    }],
});
chart.appendTo('#Chart');

Defaults to null