# LightningChart JS Trader developer documentation
> The 1 stop developer guide for all things in LightningChart JS Trader
This file contains all documentation content in a single document following the llmstxt.org standard.
## Getting started
LightningChart JS Trader Developer Documentation
LightningChart JS Trader is a library for creating interactive and impressive technical analysis applications with top performance.
With LightningChart, developers can utilize high level components to embed extremely performant graphs into their frontend applications with minimal work.
To get LightningChart JS Trader package, please fill the contact form [here](https://lightningchart.com/js-charts/trader/) opened by clicking the Start 30-day Free Trial button,
and we will provide a free trial.
You can also test Trader via our [Interactive Examples](https://lightningchart.com/js-charts/trader/interactive-examples/?isList=true) demo.
---
## Adding indicators
Technical indicators can be added to the chart via user interface, or in code.
----------------------
### Adding indicators via user interface
The chart user interface includes Indicators button within the toolbar to the left of the chart. Clicking this opens the indicator menu, which contains all available indicators divided in several categories based on the characteristics of the indicator. Clicking a category shows a list of all indicators it contains.
Then, click the indicator name to add it to the chart.
Indicators can be added even before any data has been loaded to the chart, since they are automatically updated every time the loaded dataset changes.
### Adding indicators in code
Technical indicators can also be added in code. This can be done by calling respective add...() method found under `chart.indicators()` method.
Some indicators allow setting the number of time periods when adding them. This is optional though, and can be changed later.
```ts
// Adding two indicators in code, the latter with a new time period count.
tradingChart.indicators().addSimpleMovingAverage()
tradingChart.indicators().addAroon(20)
```
It should be noted that adding indicators in code does not take local storage into account. This means that if loading from / saving to storage is enabled,
the chart loads indicators both from local storage and from code, leading to a situation where the chart could have duplicate indicators.
---
## Modifying indicators
This section gives basic information how to modify technical indicators added to the chart, both via user interface and in code.
----------------------
### Modifying indicators via user interface
All technical indicators can be modified via its respective settings menu. This menu can be opened by clicking the Indicator settings button for study indicators (indicators appearing below the price chart), located in the top-left corner of the indicator's segment, or by clicking the Edit indicator button for overlays (indicators rendered on top of the price data), found within the indicator settings menu accessible via the top-left corner of the main chart.
The settings menu lists all modifiable properties such as time period count, line width and indicator color settings. The shown properties depend on the indicator itself.
### Modifying indicators in code
Technical indicators can be modified in code by calling various indicator specific set...() methods. To access these methods, the indicator should be saved as a variable beforehand.
```ts
const sma = tradingChart.indicators().addSimpleMovingAverage()
sma.setPeriodCount(20)
sma.setLineWidth(2)
sma.setLineColor('#00FFFF')
```
Note that in LightningChart JS Trader, the color values for respective methods should be given in HEX format e.g. #FFFFFF.
If the method doesn't seem to do anything, check the console of your browser, as Trader often informs the user in case the given values are in wrong format.
---
## Removing indicators
Technical indicators can be removed from the chart via user interface, or in code.
----------------------
### Removing indicators via user interface
Indicators can be removed by clicking the Remove indicator button, that is located either in the top-left corner of the indicator's segment for study indicators (indicators appearing below the price chart), or for overlays (indicators rendered on top of the price data) in the indicator settings menu found in the top-left corner of the main chart.
Amongst the buttons in the toolbar, there is also Clear contents button. Clicking this opens various clearing options including a button to remove all added indicators from the chart.
### Removing indicators in code
Removing technical indicators in code can be done by calling `dispose()` method for the indicator. The indicator must be saved as a variable beforehand.
```ts
// Assign indicator as a variable.
const sma = tradingChart.indicators().addSimpleMovingAverage()
// Then later remove it.
sma.dispose()
```
You can also remove all indicators simultaneously by calling `disposeAllIndicators()` found under `chart.indicators()` method.
```ts
tradingChart.indicators().disposeAllIndicators()
```
---
## Common indicator properties
Each technical indicator has its own set of properties and methods regarding its calculations and visual appearance. All of these properties can be modified both via user interface and in code. See [Modifying indicators](/technical-indicators/modifying-indicators) to learn how.
However, there are many common properties that most indicators have. This section introduces these properties and methods to use them.
----------------------
***Line color***
Line color adjusts the color of the indicator line. In code, `setLineColor()` method can be used for this. If the indicator contains several lines, each line has its own method. Furthermore, if the indicator consists of bars instead of lines, for instance in case of a histogram, the method name will be `setBarColor()` respectively.
***Line width***
Line width adjusts the width of the indicator line. In code, `setLineWidth()` method can be used for this. If the indicator contains several lines, the same method affects all the lines. In other words, the lines of the indicator always have the same line width.
***Moving average type***
Many indicators use moving averages in their mathematical formulas. LightningChart JS Trader allows choosing between several averaging types, which lets you to create custom versions of the indicators. Use `setMovingAverageType()` method to change the average. Available options include Exponential, Hull, Simple, Time Series (Least Squares), Triangular, Variable Index Dynamic Average (VIDYA), Variable, Volume-Weighted and Weighted averages, as well as Welles Wilder's Smoothing.
***Offset***
Offset moves the indicator from its calculated position forward or backward. For example, offset 1 moves the indicator one time period forward while offset -1 moves it one time period backwards. Use `setOffset()` method to set this in code. Note that modifying offset for an indicator does not affect other indicators using it as a source.
***Period count***
Many indicators are based on a specific number of past time periods. For instance, a Simple Moving Average with period count 10 takes the price values of the ten latest time periods and calculates their average. Period count, in code `setPeriodCount()` method, is used to adjust this number of time periods.
***Source***
Source allows changing the values the indicator is based on. For example, you can modify indicator calculations to be based on High or Low values instead of Close values. LightningChart JS Trader also allows using other indicator values as a source. For instance, you can have a Simple Moving Average based on an Exponential Moving Average. In code, use `setSource()` method to set this.
Note that it is possible to create source loops by setting several indicators to be based on each other (i.e. indicator A based on indicator B, B based on C, and C based on A). LightningChart recognizes this situation and forces the indicators' source settings back to default options in order to prevent the application from freezing or crashing.
Source is available for indicators only when their mathematical formula allows it.
***Label type***
When any indicator is added to the chart, a label showing the latest indicator value is created automatically. Label type, `setValueLabelType()` in code, allows modifying what parts of the label are shown. Available options include showing only the label, the horizontal line across the chart, showing both, and hiding the whole label. Note that the main chart's show value labels setting has to be enabled to show indicator specific labels.
***Visible***
Visible, in code `setVisible()` method, allows hiding and showing the indicator. Note that hiding an indicator does not remove it from the chart. Use `dispose()` to delete the indicator. Furthermore, if a study indicator (indicator below the price chart) is hidden, its segment still remains visible.
---
## List of available indicators
The following technical indicators are available in LightningChart JS Trader.
----------------------
### Envelopes
***Bollinger Band***
Bollinger Band calculates a moving average line and then adds two more lines, one above and one below, based on a set number of standard deviation levels. Use `setStandardDeviationNumber()` method to set this.
***Donchian Channels***
Donchian Channels consist of three lines: an upper band based on the highest High values, a lower band based on the lowest Low values, and a middle band marking the midrange of the other bands. Donchian Channels are used to identify bullish and bearish extremes.
***Fractal Chaos Bands***
Fractal Chaos Bands (FCB) filter out insignificant price movements by plotting the high and low price fractals as a channel. FCB can be used to tell if the market is trending.
***High Low Bands***
High Low Bands consist of three lines: a Triangular Moving Average line, and upper and lower band lines based on specific percentage of the average line. High Low Bands can be used to identify bullish and bearish trends.
***Keltner Channels***
Keltner Channels consist of three lines: an Exponential Moving Average line, and volatility based channel lines above and below it. Average True Range is used for these lines. Keltner Channels are used to follow trends and notice reversals in price.
***Moving Average Envelopes***
Moving Average Envelopes (MAE) consist of three lines: a middle line based on selected moving average, and upper and lower band lines based on specific percentage of the average line. Moving Average Envelopes can be used to follow trends, as well as to identify overbought and oversold levels. Use `setMovingAverageType()` method to set the average the middle line is based on.
***Prime Number Bands***
Prime Number Bands find the closest prime number above and below the current price, and creates a band based on them.
***Standard Error Bands***
Standard Error Bands work similarly to Bollinger Bands, with the exception of using standard error instead of standard deviation
to calculate the upper and lower bands. The middle line is based on selected moving average.
***Stoller Average Range Channel***
Stoller Average Range Channels (STARC) are volatility-based envelopes set above and below a selected moving average. Similarly to Keltner Channels, Average True Range (ATR) is used to plot the upper and lower bands. The moving average is based on the price of the security instead of its typical price.
----------------------
### Moving Averages
***Exponential Moving Average***
Exponential Moving Average (EMA) adds a percentage of the closing price to a percentage of the moving average value of the previous day.
***Hull Moving Average***
Hull Moving Average (HMA) is designed to eliminate lag, making it a fast, more responsive moving average. HMA is used to identify trend reversals and entry points.
***Simple Moving Average***
Simple Moving Average (SMA) indicates the average of a security’s closing price over a number of time periods.
***Time Series Moving Average***
Time Series Moving Average (TSMA), also known as Least Squares Moving Average, is a moving average based on linear regression line.
***Triangular Moving Average***
Triangular Moving Average (TMA) is a double smoothed Simple Moving Average. It puts more weight to the middle section of the data.
***Variable Index Dynamic Average***
Variable Index Dynamic Average (VIDYA) is an Exponential Moving Average that automatically adjusts its smoothing based on the volatility of the price. VIDYA uses standard deviation to calculate the volatility, whereas other similar indicator, Variable Moving Average (VMA), uses Chande Momentum Oscillator.
***Variable Moving Average***
Variable Moving Average (VMA) is an Exponential Moving Average that automatically adjusts its smoothing based on the volatility of the price. VMA uses Chande Momentum Oscillator to measure the volatility, whereas other similar indicator, Variable Index Dynamic Average (VIDYA), uses standard deviation.
***Volume-Weighted Moving Average***
Volume Weighted Moving Average (VWMA) takes volume into account when weighting prices during moving average calculations.
***Weighted Moving Average***
Weighted Moving Average (WMA) places more weight on recent data values by multiplying the previous day’s data value by a weighting factor, based on the moving average of a set number of days.
***Welles Wilder's Smoothing***
Welles Wilder's Smoothing (WWS) indicator is a moving average that smoothens out price movements, which helps spotting bullish and bearish trends.
----------------------
### Oscillators - Money Flow
***Accumulation/Distribution***
Accumulation/Distribution indicator (A/D) shows whether a stock is being accumulated or distributed. It uses both price and volume information.
***Chaikin Money Flow***
Chaikin Money Flow calculates a Volume-weighted average based on Accumulation-Distribution (A/D) line.
***Chaikin Oscillator***
Chaikin Oscillator calculates Moving Average Convergence-Divergence (MACD) based on Accumulation-Distribution (A/D) line. It is used to detect trends and reversals.
***Ease Of Movement***
Ease of Movement (EOM or EMV) is a volume-based oscillator fluctuating above and below the zero line. It quantifies the relationship between the price and the volume, thus measuring the ease of price movement.
***Elder's Force Index***
Elder's Force Index uses price and volume information to measure the strength of a price move.
***Klinger Volume Oscillator***
Klinger Volume Oscillator (KVO) predicts price reversals by comparing volume with price movements. It consists of three components:
-KVO line is the difference between the selected moving average of short period data and long period data.
-Signal line is Signal period moving average of KVO.
-Histogram shows the difference between KVO and Signal.
***Market Facilitation Index***
Market Facilitation Index measures the willingness of the market to move the price. The index values are shown as histogram bars with various colors that indicate the relation between the index and volume. These colors are pre-defined and cannot be modified.
***Money Flow Index***
The Money Flow Index (MFI) uses price and volume data for identifying overbought or oversold signals. It can also be used to spot divergences which warn of a trend change in price. MFI moves between 0 and 100. Unlike many other oscillators such as the Relative Strength Index (RSI), the Money Flow Index incorporates both price and volume data.
***Negative Volume Index***
Negative Volume Index (NVI) tracks volume as it decreases from the previous day. Since NVI shows the actions of the majority of the traders, it is usually used as a contrarian indicator; smart money is active on quiet days and not-so-smart money on busy days.
***On-Balance Volume***
On-Balance Volume (OBV) has been developed to predict stock price changes by using volume changes.
***Positive Volume Index***
Positive Volume Index (PVI) tracks volume as it increases from the previous day. Since PVI shows the actions of the majority of the traders, it is usually used as a contrarian indicator; smart money is active on quiet days and not-so-smart money on busy days.
***Price Volume Trend***
Price Volume Trend (PVT) uses actual trading volumes to confirm or invalidate the strength of a price trend. PVT takes the percentual
change in price into account when calculating its value.
***Trade Volume Index***
Trade Volume Index (TVI) shows whether a security is being accumulated (bought) or distributed (sold). It moves distinctly when significant changes in price and volume happen simultaneously. TVI is most often used with intraday data.
***Twiggs Money Flow***
Twiggs Money Flow (TMF) is a variation of Chaikin Money Flow indicator. It uses True Range instead of Close value and moving averages (EMA) instead of cumulative volume. TMF can be used to evaluate money flow as bullish or bearish, and to warn of breakouts.
***Volume***
Volume is the number of traded securities over a certain time period. LightningChart JS Trader allows showing Volume as an overlay (in the price chart) or as a study (separate chart below the price chart). Use `setShowAsOverlay()` method to change this. By default, Volume is shown as an overlay.
Volume values need to be assigned to the indicator separately, as they are not calculated from the OHLC-values. You can either assign the values while [adding the whole dataset](/adding-data-in-code), or call `tradingChart.setVolumeData()` to add or modify only the Volume values.
***Volume Oscillator***
Volume Oscillator (VO) is a momentum oscillator for Volume, that works similarly to MACD. VO can be used to confirm or refute other signals. It consist of three components:
-VO line is the difference between the selected moving average of short period data and long period data.
-Signal line is Signal period moving average of VO.
-Histogram shows the difference between VO and Signal.
***Volume Rate of Change***
Volume Rate of Change (VROC) indicator is similar to the regular Rate of Change, but is calculated based on Volume instead of price. It is used to measure the volatility in Volume as well as to confirm price moves.
***Williams Accumulation Distribution***
Williams Accumulation Distribution (WAD) measures market strength and pressures and looks for marker divergence. It helps confirm trend directions and strengths.
***Williams Variable Accumulation Distribution***
Williams Variable Accumulation Distribution (WVAD) calculates the relationship between the open-close range and the high-low range, which gives information about buying and selling pressures.
----------------------
### Oscillators - Price
***Aroon Oscillator***
Aroon Oscillator measures the difference between Aroon-Up and Aroon-Down indicators, which measures uptrend strength and downtrend strength respectively.
***Awesome Oscillator***
Awesome Oscillator (AO) provides information about the strength of the stock and possible reversals. It compares recent momentum with the momentum over a longer time frame.
***Balance Of Power***
Balance of Power (BOP) indicates how strongly the price moves towards higher or lower extremes by measuring the strength of buying and selling pressures.
***Center Of Gravity***
Center fo Gravity (COG) is designed to anticipate future price movements. Since it has no lag, it can give clear signals of turning points in the price. A Simple Moving Average can be displayed as a signal line. Use `setShowSignal()` method to show and hide the signal.
***Chande Forecast Oscillator***
Chande Forecast Oscillator (CFO) measures the difference between the closing price and the forecasted price of a n-period linear regression. The result is shown as a percentage.
***Chande Momentum Oscillator***
Chande Momentum Oscillator is used to identify the relative strength or weakness of the market.
***Commodity Channel Index***
Commodity Channel Index (CCI) is designed to spot new trends and weaknesses in them, as well as to watch overbought and oversold levels.
***Coppock Curve***
Coppock Curve is a price momentum indicator that is used to identify long-term buy and sell signals. Long and short Rate of Change values and Weighted Moving Average are used in the calculations.
***Detrended Price Oscillator***
Detrended Price Oscillator (DPO) removes trend to estimate the length of price cycles. It is used to measure the volatility of the price.
***Elder-Ray Index***
The Elder-Ray Index, also known as Elder-Ray Power Indicator, measures the market consensus over a period of time. It consists of two indicators: Bull Power measuring the buying pressure and Bear Power measuring the selling pressure.
***Elder Thermometer Custom***
This is a custom version of Elder Thermometer. It compares current High and Low values to High and Low values specific time periods ago, and creates a histogram based on the result.
***Fractal Chaos Oscillator***
Fractal Chaos Oscillator (FCO) measures the trendiness of the market. It ranges between 1 (trending market) and -1 (chaotic market). FCO is used more in intra-day trading.
***Intraday Momentum Index***
Intraday Momentum Index (IMI) is a version of Relative Strength Index (RSI), which uses the change from Open to Close instead of the change from the previous Close to the current Close.
***Momentum Oscillator***
The Momentum Oscillator compares the latest price to a price selected number of time periods ago. This version returns the normalized values, i.e. the ratio between the prices.
***Moving Average Convergence Divergence***
Moving Average Convergence Divergence indicator (MACD) is the difference between ExponentialMoving Average (EMA) of short period data, and EMA of long period data, that is: EMA(price short period) - EMA(price long period). The Signal line is signal period EMA of MACD. Histogram shows the difference between MACD and Signal (MACD - Signal).
***Moving Average Convergence Divergence Custom***
Moving Average Convergence Divergence indicator (MACD) shows the difference between two moving averages of different lengths. The Signal line is signal period moving average of MACD. Histogram shows the difference between MACD and Signal (MACD - Signal).
This custom MACD allows using different moving averages for all smoothings. Use `setPeriodCounts()` and `setMovingAverageTypes()` methods to configure the averages.
***Percentage Price Oscillator***
Percentage Price Oscillator (PPO) indicator shows the difference between Exponentially weighted Moving Average (EMA) of Short period data, and EMA of Long period data. Signal line is signal period EMA of PPO. Histogram shows the percentage difference between PPO and Signal.
***Performance Index***
The Performance Index, sometimes called just Performance indicator, displays how much the price has changed since the first period. The result is shown as a percentage, making it a "normalized" chart and thus useful when comparing securities.
***Pretty Good Oscillator***
Pretty Good Oscillator (PGO) measures the distance between the latest close value and the moving average of the price. The result is then divided by a moving average of the Average True Range. PGO is used to detect buy and sell signals.
***Prime Number Oscillator***
Prime Number Oscillator (PNO) finds the nearest prime number to the current price and plots the difference as an oscillator line.
***QStick***
The QStick indicator numerically identifies trends. It takes a moving average of the difference between the Open and Close prices.
***Rainbow Oscillator***
Rainbow Oscillator is a trend-following indicator based on several recursive smoothings via moving averages of the price. The indicator finds the highest and lowest values among these averages and creates an oscillator and a bandwidth based on them. Use `setLookbackPeriods()` and `setSmoothingLevels()` methods to configure smoothings.
***Rate Of Change***
Rate of Change indicator measures the price change between the current price and the price a certain number of periods ago. The difference is shown as a percentage.
***Relative Strength Index***
Relative Strength Index (RSI) compares the internal strength of a single security by calculating the average momentum over a set number of days.
***Stochastic Momentum Index***
Stochastic Momentum Index (SMI) is a variation of Stochastic Oscillator. It shows the distance between the current price and the midpoint of High/Low range. SMI is therefore less unpredictable compared to regular Stochastic Oscillator.
***Stochastic Oscillator***
Stochastic Oscillator (SO) indicator compares a closing price to a range of prices over a time period. It is used to identify overbought and oversold levels.
***Stochastic Smoothed***
Stochastic Oscillator (SO) indicator compares a closing price to a range of prices over a time period. It used to identify overbought and oversold levels.
The difference between Smoothed SO and regular SO is that smoothed study smoothens also the stochastic (%K) line. Different moving averages and time period counts can be used for %K and %D lines. Use `setPeriodCounts()` and `setMovingAverageTypes()` methods to configure the averages.
***True Strength Index***
True Strength Index (TSI) double smoothens the price changes, thus filtering out the noise. TSI can be used to identify trends and reversals as well as to to determine overbought and oversold conditions.
***Ultimate Oscillator***
The Ultimate Oscillator (UO) captures momentum across three different time frames, which reduces the volatility and generates fewer trade signals. Therefore, UO is often used to identify buy and sell signals.
***Ultimate Oscillator Smoothed***
The Ultimate Oscillator (UO) captures momentum across three different time frames, which reduces the volatility and generates fewer trade signals. Therefore, UO is often used to identify buy and sell signals. Smoothed Ultimate Oscillator differs from the regular UO by using smoothing with a moving average instead of summation during the calculations.
***Williams Percent Range***
Williams Percent Range, also known as Williams %R, measures overbought and oversold levels by comparing the current closing price to the high-low range over a specific time period.
----------------------
### Statistics
***Correlation Coefficient***
Correlation Coefficient measures the correlation between two securities, that is the linear relationship between the two variables. It ranges from -1 to 1, -1 meaning perfect negative correlation and 1 meaning perfect positive correlation. 0 means no linear correlation. Since Correlation Coefficient compares two datasets, you need to assign the additional set with `setDataset()` method.
***Kurtosis***
Kurtosis measures the "tailedness" of the probability distribution of the price. High Kurtosis indicates frequent price fluctuations in the past.
***Median Price***
Median Price is the average of the High and Low prices for a time period. It is drawn as a single overlay line.
***Skewness***
Skewness measures the asymmetry of the probability distribution of the price. It gives information about the extremes of the data set.
***Standard Deviation***
Calculates the Standard Deviation of the price by comparing the current and historical price movements. Used to measure the volatility of the price.
***Standard Error***
Standard Error is an approximate standard deviation of a sample population. It indicates how much the population mean is likely to differ from the sample mean.
***Typical Price***
Typical Price is the average of the High, Low and Close prices for a time period. It is drawn as a single overlay line.
***Weighted Close***
Weighted Close is the average price of each day, that puts more weight on Close price compared to High and Low. It is drawn as a single overlay line.
----------------------
### Trend Indicators
***Accumulative Swing Index***
Accumulative Swing Index (ASI) is a trend line measuring long-term trends in prices. ASI is the cumulative sum of the Swing Index. Adding ASI shows also the Swing Index in a separate segment.
***Aroon***
The Aroon indicator identifies trend changes in the price. It also reveals the strength of that trend. Aroon consists of two lines: Aroon Up measuring the uptrend strength and Aroon Down measuring the downtrend strength.
***Average Directional Index***
Average Directional Index (ADX) measures the overall strength of a trend by calculating the average of expanding price range values. Directional Movement Indicators (-DI and +DI) can be shown together with the ADX line. Use `showDiLines()` method to show or hide them. The indicator uses Wilder's smoothing techniques.
***Choppiness Index***
Choppiness Index (CHOP) measures volatility by determining whether a market is trending or ranging.
***Gopalakrishnan Range Index***
Gopalakrishnan Range Index (GAPO or GOPRI) measures the volatility of a stock or commodity. It uses logarithm of the price range to determine the variability of price data.
***Ichimoku Cloud***
Ichimoku Cloud consists of several averaging lines and a lagging closing price line. The difference between two of the lines is colored to comprise the cloud. Ichimoku Cloud is used to detect support and resistance levels. Momentum of the price and trend direction are also shown.
***Linear Regression***
Linear Regression plots a trendline value for each data point using least squares method. The indicator consists of four lines: slope, intercept, forecast and R squared. Of these slope and R squared are displayed in their own segments while intercept and forecast share one segment. When the main Linear Regression (R squared) is updated, the other lines are automatically updated as well. Likewise, removing the R squared line removes also all other components.
***Parabolic Stop and Reverse***
Parabolic Stop and Reverse (PSAR) indicator shows the current trend direction, and reveals potential price reversals. PSAR appears either above (trending down) or below (trending up) the trading data as a series of dots.
***Random Walk Index***
Random Walk Index (RWI) compares price movements to random movements to determine if the movement is of random nature or part of a statistically significant trend. RWI is therefore used to measure the strength of uptrends and downtrends.
***Range Action Verification Index***
Range Action Verification Index (RAVI) uses moving averages of different lengths to determine whether a market is trending.
***Schaff trend Cycle***
Schaff Trend Cycle (STC) combines Slow Stochastic (%D) and Moving Average Convergence Divergence (MACD) indicators. This creates a signal line that can be used to identify market trend as well as buy and sell signals.
***Schaff trend Cycle Signal***
Schaff Trend Cycle (STC) combines Slow Stochastic (%D) and Moving Average Convergence Divergence (MACD) indicators creating a signal line that can be used to identify market trend as well as buy and sell signals. This version of STC uses the MACD Signal line as basis for Stochastic calculations.
***Supertrend***
Supertrend is an indicator designed to follow trends and spot buy and sell signals. It is plotted on top of the price chart.
***Swing Index***
Swing Index (SI) detects price trends of a security. It is often used as a part of the Accumulative Swing Index.
***System Quality Number Trend***
SQN (System Quality Number) measures the quality of a trading system by comparing the mean and the standard deviation of the trading systems R-multiple distribution. When this SQN formula is applied to the daily price change of a stock, it measures the trendiness of the market.
***Triple Exponential Average***
Triple Exponential Average (TRIX) indicator is a triple exponential moving average shown as a percentage change. It is designed to filter out unimportant price changes.
***Vertical Horizontal Filter***
Vertical Horizontal Filter (VHF) determines the trendiness (level of trend activity) of prices in order to identify trending phases and trading ranges.
----------------------
### Volatility
***Average Daily Range***
Average Daily Range (ADR) measures volatility by calculating the average of high-low ranges over a given time range.
***Average True Range***
Average True Range (ATR) measures market volatility by calculating the average of true ranges over a given time range.
***Chaikin Volatility***
Chaikin Volatility (CV) measures security's price volatility by comparing the range between High and Low values over a set period of time.
***Ehler Fisher Transform***
Ehler Fisher Transform (EFT) normalizes the prices over specified time periods, thus helping identifying significant price reversals.
***High Minus Low***
High Minus Low indicator representing the "per period" range, in other words the difference between the High and the Low values.
***Historical Volatility Index***
Historical Volatility Index (HVI) is an annualized volatility level of single period returns.
***Mass Index***
Mass Index detects potential trend reversals in a stock's price by measuring the range between High and Low prices over a period of time.
***Z-Value***
Z-Value, also known as the Standard Score or Z-Score, is the number of standard deviations, by which a value is above or below the mean value of the data set.
----------------------
### Other
***Open Interest***
Open interest is the total number of outstanding derivative contracts, such as options or futures that have not been settled for an asset. The total Open Interest does not count, nor does total of every buy and sell contract. Instead, Open Interest provides a more accurate picture of the options trading activity, and whether money flows into the futures and options market are increasing or decreasing.
Open Interest values need to be assigned to the indicator separately, as they are not calculated from the OHLC-values. You can either assign the values while [adding the whole dataset](/adding-data-in-code), or call `tradingChart.setOpenInterestData()` to add or modify only the Open Interest values.
---
## Custom indicators
Technical Analysis Charts allow users to create their own indicators with *CustomOverlay* and *CustomStudy* classes. In general, they work the same way as all the other indicators. However, while other indicators' data points are calculated automatically, custom indicators require adding own data points after they have been created. Use `setData()` method to add a new dataset to the indicator, replacing existing data, or `addData()` to add points to the end of the existing data. Both methods accept an array of numbers. X-values (time values) don't have to be added since custom indicators get them automatically from the trading data. If the indicator data should be moved horizontally, use `setOffset()` method.
Note that the custom indicators are not updated automatically like other indicators when the dataset changes. Therefore, the above methods have to called again to ensure the custom indicator is up-to-date.
Custom indicators can also be created with [heatmaps](/heatmaps), or by using [internal chart instance](/internal-chart-instance).
----------------------
### Custom overlay
Custom Overlay draws a single line on top of the trading data similarly to moving averages. `setLineWidth()` and `setLineColor()` methods can be used to modify the indicator's appearance.
```ts
// Adding Custom Overlay indicator based on double Welles Wilder Smoothing.
// Technical Analysis Methods are used to calculate the smoothings.
const co = tradingChart.indicators().addCustomOverlay()
co.setName('Custom Overlay')
co.setLineColor('#00FF00')
co.setLineWidth(2)
const dataset = tradingChart.getData(false)
const taMethods = new TechnicalAnalysisMethods(tradingChart)
const wwsValues = taMethods.calculateWellesWilderSmoothing(dataset[4] as number[], 10)
const coValues = taMethods.calculateWellesWilderSmoothing(wwsValues, 10)
co.setData(coValues)
co.setOffset(dataset[4].length - coValues.length)
```
----------------------
### Custom study
Custom study draws a single line in a separate segment below the main chart. `setLineWidth()` and `setLineColor()` methods can be used to modify the indicator's appearance.
```ts
// Adding Custom Study indicator showing Relative Strength Index based on Supertrend.
// Technical Analysis Methods are used calculate the Supertrend and the RSI values.
const cs = tradingChart.indicators().addCustomStudy()
cs.setName('Custom Study')
cs.setLineColor('#FFDD00')
cs.setLineWidth(2)
const dataset = tradingChart.getData(false)
const taMethods = new TechnicalAnalysisMethods(tradingChart)
const stValues = taMethods.calculateSuperTrend(dataset[4] as number[], dataset[2] as number[], dataset[3] as number[], 10, 3)
const csValues = taMethods.calculateRelativeStrengthIndex(stValues, 14)
cs.setData(csValues)
cs.setOffset(dataset[4].length - csValues.length)
```
---
## Technical analysis methods
Technical Analysis Charts include *TechnicalAnalysisMethods* class which contains all the mathematical formulas used to calculate technical indicators. Users can use these formulas for example to create their own [custom indicators](../custom-indicators).
To use Technical Analysis Methods in code, first import the class from *lcjs-trader* module ("@lightningchart/lcjs-trader") and then create a new class instance in code. The class cannot be used without a reference to the TradingChart due to some of the calculations requiring access to the trading data added to the chart. Therefore, a TradingChart instance has to be created before using Technical Analysis Methods.
```ts
// Using Technical Analysis Methods to calculate Rate of Change based on High values.
// Importing the class.
// Create TradingChart instance before using Technical Analysis Methods.
const tradingChart = ta.tradingChart({loadFromStorage: false, colorTheme: Themes.turquoiseHexagon})
// Getting the current dataset.
const dataset = tradingChart.getData(false)
// Using the methods to create a custom indicator.
const taMethods = new TechnicalAnalysisMethods(tradingChart)
const rocValues = taMethods.calculateRateOfChange(dataset[2] as number[], 10)
if (rocValues != null) {
const cs = tradingChart.indicators().addCustomStudy()
cs.setData(rocValues)
}
```
---
## Technical indicators
Find guides on using technical indicators here.
---
## Adding drawing tools
Drawing tools can be drawn to the chart via user interface, or in code.
----------------------
### Drawing via user interface
The easiest way to add drawing tools is to select them from the user interface and then draw then directly to the chart.
The chart user interface includes Drawing Tools button within the various settings buttons in the toolbar. Clicking this opens all available drawing tools divided in several categories based on the characteristics of the tool. Clicking a category shows a list of all drawing tools it contains. Then, click the tool icon to initiate drawing.
After the drawing tools has been selected, left-clicking a location on the chart adds the tool to that position. If the drawing tool has several control points, for instance at the start and the end of a Trend Line or at wave peaks, you will need to click the chart several times. Right-clicking during the drawing phase cancels adding the drawing tool.
Drawing tools are not automatically updated when the loaded dataset changes, unless their Magnetic property has been enabled, in which case the Y-values of the controls points
depend on the data values.
### Adding drawing tools in code
Drawing tools can also be added in code, though it is recommended to add them via user interface. This can be done by calling respective add...() method found under `chart.drawingTools()` method. You will need to give the method the X- and Y-position values of each of the drawing tool's control points.
```ts
// Adding a Trend Line in code with start X-, start Y-, end X-, and end Y-values.
tradingChart.indicators().addTrendLine(10, 30, 40, 20)
```
The X-values given are indexed, meaning that the first data point of the dataset has X-value of 0, the second one has 1 etc. Therefore, in the above example, the added Trend Line starts at tenth data point and ends at 40th data point.
It should be noted that adding drawing tools in code does not take local storage into account. This means that if loading from / saving to storage is enabled,
the chart loads drawing tools both from local storage and from code, leading to a situation where the chart could have duplicate tools.
---
## Modifying drawing tools
This section gives basic information how to modify drawing tools added to the chart, both via user interface and in code.
----------------------
### Modifying drawing tools via user interface
All drawing tools can be modified via its respective settings menu. This menu can be opened by right-clicking any of the tool's control points.
Some drawing tools, such as horizontal and vertical lines, arrows and text elements, don't have control points. In these cases, right-clicking anywhere over the tool brings up the menu.
The settings menu lists all modifiable properties such as line width and various color and fill settings. The shown properties depend on the drawing tool itself.
### Modifying drawing tools in code
Drawing tools can be modified in code by calling various tool specific set...() methods. To access these methods, the tool should be saved as a variable beforehand.
Furthermore, it is possible to update the drawing tool's position via `drawingTool.updatePosition()` method. You will need to give the method X- and Y-position values for each of the drawing tool's control points. There is also `getPosition()` method which can be used to get the drawing tool's current position. It can be handy when updating some, but not all control point locations.
```ts
const trendLine = tradingChart.drawingTools().addTrendLine(10, 30, 40, 20)
trendLine.setLineWidth(2)
trendLine.setLineColor('#00FFFF')
// Updating drawing tool's position
trendLine.updatePosition(10, 50, 40, 60)
```
Note that in LightningChart JS Trader, the color values for respective methods should be given in HEX format e.g. #FFFFFF.
If the method doesn't seem to do anything, check the console of your browser, as Trader often informs the user in case the given values are in wrong format.
---
## Removing drawing tools
Drawing tools can be removed from the chart via user interface, or in code.
----------------------
### Removing via user interface
All drawing tools can be removed by clicking the Remove button found in the drawing tool settings menu, that is brought up by right-clicking any of the tool's control points.
Some drawing tools, such as horizontal and vertical lines, arrows and text elements, don't have control points. In these cases, right-clicking anywhere over the tool brings up the menu.
Amongst the settings buttons in the top-right corner, there is also Clear contents button. Clicking this opens various clearing options including a button to remove all added drawing tools from the chart.
### Removing drawing tools in code
Drawing tools can be removed in code can be done by calling `dispose()` method. The drawing tool must be saved as a variable beforehand.
```ts
// Assign drawing tool as a variable.
const trendLine = tradingChart.drawingTools().addTrendLine(10, 30, 40, 20)
// Then later remove it.
trendLine.dispose()
```
You can also remove all drawing tools simultaneously by calling `disposeAllDrawingTools()` found under `chart.drawingTools()` method.
```ts
tradingChart.drawingTools().disposeAllDrawingTools()
```
---
## Common drawing tool properties
Each drawing tool has its own set of properties and methods regarding its behavior and visual appearance. All of these properties can be modified both via user interface and in code. See [Modifying drawing tools](/drawing-tools/modifying-drawing-tools) to learn how.
However, there are many common properties that most drawing tools have. This section introduces these properties and methods to use them.
----------------------
***Area color***
Some drawing tools have colored areas for example between its lines. *Area color*, `setAreaColor()` method in code, adjusts the color of these areas. Note that LightningChart often automatically applies some transparency to the colored area to prevent the tools from completely covering the price data underneath them.
***Fill enabled***
Some drawing tools with colored areas have option to switch off the coloring. If *Fill enabled*, `setFillEnabled()` in code, is set false, the colored areas become transparent, and only the drawing tool lines are shown.
***Line color***
*Line color* adjusts the color of the drawing tool line. In code, `setLineColor()` method can be used for this. If the drawing tool contains several lines, the same method modifies all the lines. *Line color* also affects the control points.
***Line width***
*Line width* adjusts the width of the indicator line. In code, `setLineWidth()` method can be used for this. If the drawing tool contains several lines, the same method modifies all the lines. *Line width* also affects the control points.
***Magnetic***
Enabling *Magnetic* causes the drawing tool to automatically snap to the closest OLHC-data point in vertical direction. For example, the end points of a Trend Line are based on the Close values at the positions of the respective control points. Use `setMagnetic()` method in code to enable and disable this.
---
## List of available drawing tools
The following drawing tools are available in LightningChart JS Trader.
----------------------
### Lines
***Cross Line***
Draws horizontal and vertical lines crossing at the selected point of the chart.
***Extended Line***
Draws a straight line between two control points, then extends the line to the left and right edges of the chart. Both extensions can be switched on and off.
***Freeform Line***
A brush-like tool that allows drawing lines and curves freely. Pressing the left mouse button down starts drawing while releasing the button ends it.
***Horizontal Line***
Draws a horizontal line across the whole chart at the selected price level.
***Horizontal Ray***
Draws a straight line from a selected point to the right edge of the chart.
***Trend Line***
Draws a straight line between two control points.
***Vertical Line***
Draws a vertical line across the whole chart.
----------------------
### Fibonaccis
***Fibonacci Arc***
Draws a trend line between two control points, followed by multiple arcs intersecting the line at levels 38.2%, 50.0%, 61.8% and 100%. The percentages are based on the length of the line. The arcs are centered at the second control point.
***Fibonacci Extension***
Fibonacci Extensions are based on three chosen points on chart: the first two points determine the price move while the third point is the end of retracement against that move. Extension lines using Fibonacci ratios are then drawn based on the price moves. Fibonacci Extensions are used to estimate how far the price could move.
***Fibonacci Fan***
Draws a trend line between two control points, then several Fibonacci fan lines starting from the first point and crossing an “invisible” vertical line at the X-value of the second point based on Fibonacci levels at 38.2%, 50.0% and 61.8%.
***Fibonacci Retracements***
Draws a trend line between two control points, then several horizontal retracement lines based on selected price range (height) of the trend line. The retracement lines are drawn at Fibonacci levels of 38.2%, 50.0% and 61.8%.
***Fibonacci Time Zones***
Draws vertical lines corresponding to elapsed time periods based on Fibonacci number sequence. Can be used to spot potential price reversal points.
----------------------
### Gann tools
***Gann Box***
Draws a box shape with various angle-based lines inside. Control points are placed on the corners of the box, allowing adjusting its size and shape. Gann Box can be used to spot recurring price cycles.
***Gann Fan***
Draws lines with different angles on the chart, dividing time and price into proportional sections. Gann Fan can be used to detect support and resistance levels on the chart.
----------------------
### Patterns
***Cycle Lines***
Draws vertical lines corresponding to elapsed time periods between the two control points. Can be used to set up and detect intervals and cycles.
***Sine Wave***
Draws a sine wave oscillating up and down. Two control points are used to mark the wave top and bottom peaks. Sine waves can be used to identify patterns in a market.
***Elliot Wave***
Draws a wave pattern between several control points. Consists of both Impulse (12345) and Corrective (ABC) waves. The wave type can be changed via the drawing tool settings menu [drawing tool settings menu](/drawing-tools/modifying-drawing-tools) also after the wave has been drawn.
***Correction Wave***
Draws a wave pattern between several control points. Consists of three Corrective wave points (ABC). The wave type can be changed via the drawing tool settings menu [drawing tool settings menu](/drawing-tools/modifying-drawing-tools) also after the wave has been drawn.
***Double Combo Wave***
Draws a wave pattern between several control points. Consists of three wave points (WXY). The wave type can be changed via the drawing tool settings menu [drawing tool settings menu](/drawing-tools/modifying-drawing-tools) also after the wave has been drawn.
***Impulse Wave***
Draws a wave pattern between several control points. Consists of five Impulse wave points (12345). The wave type can be changed via the drawing tool settings menu [drawing tool settings menu](/drawing-tools/modifying-drawing-tools) also after the wave has been drawn.
***Triangle Wave***
Draws a wave pattern between several control points. Consists of five Triangle wave points (ABCDE). The wave type can be changed via the drawing tool settings menu [drawing tool settings menu](/drawing-tools/modifying-drawing-tools) also after the wave has been drawn.
***Triple Combo Wave***
Draws a wave pattern between several control points. Consists of five wave points (WXYXZ). The wave type can be changed via the drawing tool settings menu [drawing tool settings menu](/drawing-tools/modifying-drawing-tools) also after the wave has been drawn.
***Head and Shoulders***
Draws a baseline with three peaks.
***XABCD Pattern***
Draws a five point pattern to the chart. Shows also price ratios between the points.
----------------------
### Channels
***Flat Top/Bottom***
Draws a line between two points and another horizontal line above or below it. The area between the lines is then colored.
***Linear Regression***
Calculates and draws a linear regression line between two control points. Then draws two channel lines, one above and one below the regression line based on the selected channel type. Available channel types include standard deviations (a set number of standard deviations between the linear regression line and the channel lines), Raff channel (Upper line and lower line distances are based on the most projecting top or bottom), and no channel (only the linear regression line is drawn).
***Parallel Channel***
Draws a line between two points and another parallel line above or below it, thus forming a channel. The middle value of the channel is displayed with a dashed line. The channel lines can be extended to the edge of the chart.
***Pitchfork***
Pitchfork, also known as Andrews Pitchfork, can be used to identify support and resistance levels for a stock's price. It places three control points on the chart and draws a line from the first point through the midpoint of the other points.
----------------------
### Measurement
***Date Range***
Measures the date range, bar count, and total volume between two points on the chart.
***Price Range***
Measures the price change between two price levels on the chart. The lines marking the levels can be extended to the edge of the chart.
----------------------
### Text
***Plain Text***
Text that can be freely positioned anywhere on the chart. Text color and font size can be modified.
***Text Box***
Text box that can be freely positioned anywhere on the chart. Text and text box colors, as well as font size and border width can be modified.
----------------------
### Shapes
***Ellipse***
Draws an ellipse to the chart. A control point is place on the top, bottom, left and right points of the ellipse, allowing adjusting its size and shape.
***Rectangle***
Draws a rectangle to the chart. A control point is placed on two opposite corners of the rectangle, allowing adjusting its size and shape.
***Triangle***
Draws a triangle to the chart. A control point is on each of the triangle's corners, allowing adjusting its size and shape.
----------------------
### Symbols & Objects
***Arrow***
Draws an arrow pointing to one of the four directions (up, down, left, right). Can be freely positioned anywhere on the chart. Arrow color depends on the selected direction, though it can be freely modified after the direction has been set.
---
## Drawing tools
Find guides on using drawing tools here.
---
## Heatmaps
Technical Analysis Charts have a built-in heatmap feature, which allows users to draw heatmaps on top of the trading data. These are essentially two-dimensional grids with various colors marking the intensity of the data in various points on the chart. The size of the heatmap, its colors, and how it is calculated, can all be freely configured.
Technical Analysis Charts have no limit on how many heatmaps can be drawn on the chart simultaneously.
----------------------
### Heatmap data
Heatmaps are grids that consist of any number of rows and columns. For this reason, the heatmap data is given as an array of number arrays, where one array equals one heatmap row.
```ts
// Heatmap data example:
const values: number[][] = [
[0, 15, 80, 60, 100, 77],
[22, 10, 40, 60, 50, 30],
[44, 30, 60, 40, 80, 90],
[33, 40, 70, 90, 85, 77],
[55, 50, 40, 70, 0, 62],
[77, 65, 80, 50, 33, 55]
]
```
Note that the actual size given when creating the heatmap doesn't affect the row and column count. For example, a heatmap can have only 5 rows and columns but still span from 0 to 100 in axis values. Likewise, the number of rows and columns doesn't affect the heatmap's size on the chart, they only determine the density of the points within the heatmap boundaries.
----------------------
### Adding heatmaps
Heatmaps can be added to the chart with `addHeatmap()` method. The method requires four parameters to determine the heatmap size as well as the actual heatmap data.
```ts
// Adding a heatmap.
const values: number[][] = [
[0, 15, 80, 60, 100, 77],
[22, 10, 40, 60, 50, 30],
[44, 30, 60, 40, 80, 90],
[33, 40, 70, 90, 85, 77],
[55, 50, 40, 70, 0, 62],
[77, 65, 80, 50, 33, 55]
]
const heatmap = tradingChart.addHeatmap(0, 90, 250, 190, values)
```
Note that heatmaps must be added to the chart in code as adding them via user interface is not supported.
----------------------
### Customizing heatmaps
After a heatmap has been created, it can be customized in code or via user interface similarly to technical indicators.
***Palette***
Often the first thing to customize is the color palette. Use `setPalette()` method in code to define an array of any number of steps. Each step consists of a numerical value and its respective color. The method always overrides existing palette.
```ts
// Creating a custom palette.
heatmap.setPalette([
{ value: 0, color: ColorRGBA(0, 0, 0, 0) },
{ value: 25, color: ColorRGBA(0, 0, 200, 30) },
{ value: 50, color: ColorRGBA(200, 0, 200, 40) },
{ value: 75, color: ColorRGBA(255, 150, 255, 50) },
{ value: 100, color: ColorRGBA(255, 255, 255, 60) }
])
```
The palette can also be customized via user interface. The heatmap's settings can be found in the same settings menu in the top-left corner of the chart as all added overlay indicators. After selecting the heatmap from this menu, click the *Palette* button, which opens the palette menu.
The palette menu allows configuring the value, the color, and the alpha channel of each step. Steps can also be added and removed. The changes are applied to the heatmap only when the *Save* button is pressed.
***Other settings***
Heatmaps have several other settings to configure besides palette.
Heatmap's size is given during its creation, but it can also be changed afterwards. Use `setSize()` to give new boundaries (startX/Y and endX/Y) to the heatmap in axis values. Since the X-axis in Technical Analysis Chart is indexed, the given X-values should be given not as DateTimes, but as numbers, where 0 is the first data point, 1 the second point etc. The given Y-values correspond to the price levels on the chart.
By default, heatmaps are not shown in the result table. This can be changed with `showInResultTable()`. Note that the result table doesn't show the palette's color scale. Instead only the closest heatmap point value to the cursor is shown.
Heatmaps use interpolation by default, creating a smooth gradient between the heatmap points. This can be disabled via `setInterpolate()` method, causing the heatmap to use uniform palette.
All the above settings can also be changed via user interface.
---
## Internal chart instance
Technical Analysis Charts are built using regular LightningChart JS charts. While they use completely different API than the charts they're based on, `getInternalChart()` method can be used to access the internal LightningChart instance and its API. The method can be used to alter TradingChart behavior and add features that the Technical Analysis Chart's API normally doesn't allow.
```ts
// Using internal chart to enable animations.
tradingChart.getInternalChart().setAnimationsEnabled(true)
```
The internal chart instance also allows adding new series to the chart, for example to create custom indicators.
```ts
// Using internal chart to add a StepSeries on top of the trading data.
const stepSeries = tradingChart.getInternalChart().addStepSeries()
.setAreaFillStyle(emptyFill)
.setCurvePreprocessing({ type: 'step' })
const data = [
{ x: 0, y: 230 },
{ x: 40, y: 250 },
{ x: 80, y: 230 },
{ x: 120, y: 190 },
{ x: 160, y: 200 },
{ x: 200, y: 230 },
{ x: 240, y: 245 }
]
stepSeries.appendJSON(data)
```
It should be noted that while the internal chart can be used to freely modify appearance or add custom functionalities, it also has the potential to interfere with TradingChart’s built-in behavior. For instance, adding or removing Y-axes manually via the internal chart can easily break indicators drawn below the main chart. For this reason, any modifications should be made carefully.
To find out more about LightningChart JS's features, please check the respective [documentation](https://lightningchart.com/js-charts/docs/features/).
----------------------
### Zoom band chart instance
Zoom band chart's internal chart can be accessed via another method, `getZoomBandChart()`. This can be useful when, for example, the zoom band chart should have different background compared to the main chart. `getZoomBandChart()` works similarly to `getInternalChart()`, though adjustments are less likely to interfere TradingChart's behavior.
```ts
// Using internal zoom band chart instance to make the background black.
tradingChart.getZoomBandChart().setSeriesBackgroundFillStyle(new SolidFill({
color: ColorRGBA( 0, 0, 0 )
}))
```
If zoom band chart has not been added to the chart, `getZoomBandChart()` returns undefined.
---
## Combining charts
Purchasing LightningChart JS Trader allows using both Technical Analysis Charts and regular LightningChart JS. However, the regular charts are used slightly differently compared to non-Trader subscriptions.
To create the regular charts with Trader license, the same TraderEntry has to be used that is used to create the Technical Analysis Chart.
```ts
// Using regular LightningChart JS charts together with Technical Analysis Charts.
trader('my-license-key')
.then(traderEntry => {
const tradingChart = traderEntry.tradingChart({loadFromStorage: false, parentElement: yourTraderContainer, colorTheme: Themes.turquoiseHexagon})
const chartXY = traderEntry.lightningChart().ChartXY({ container: yourXYContainer })
.setTitle('XY Chart')
const chart3D = traderEntry.lightningChart().Chart3D({ container: your3DContainer })
.setTitle('3D Chart')
})
```
Once the charts have been created, you can freely configure them like any regular LightingChart JS chart. The chart can also be synchronized by using events.
```ts
// Adding a series to XY-chart, and an event to it to modify TA-chart when the series is clicked.
chartXY.addPointLineAreaSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } })
.addEventListener('pointerdown', () => {
// Do something in Technical Analysis Chart.
})
```
LightningChart JS Trader subscription allow using all types of JS charts, including XY, 3D, Polar, Pie charts, Map charts, and DataGrid. To find out more about available charts in LightningChart JS, and how to use them, please check the [Interactive Examples](https://lightningchart.com/js-charts/interactive-examples/) and the respective [documentation](https://lightningchart.com/js-charts/docs/features/).
---
## Templates
Templates allow saving the chart layout to a json based text file (.txt format), which then later can be loaded to the chart.
The following information is saved to a template:
-Chart settings such as chart type and cursor settings
-Color settings
-Added technical indicators and their individual settings
-Added drawing tools and their individual settings
Template excludes:
-Added trading data (templates cannot be used to extract trading data from the chart)
-Heatmaps
----------------------
### Local storage
By default, Technical Analysis Chart saves all the same information that is saved to a template to local storage, when the chart is closed due to for example page reload or window closing. Whenever a chart instance is opened again, the chart checks the local storage for settings from previous sessions and loads them.
This feature can be disabled during chart creation by setting `loadFromStorage` parameter false. This prevents both saving to and loading from the local storage.
```ts
const tradingChart = ta.tradingChart({loadFromStorage: false})
```
### Saving chart as a template
Chart can be saved as a template by clicking the Save as template button found in the toolbar to the left of the chart. This opens a small dialogue allowing you to give a name to the template.
Alternatively, you can save the layout as a template in code by calling `saveAsTemplate()` method.
```ts
tradingChart.saveAsTemplate('templateName')
```
### Loading templates
Chart templates are mainly loaded via the user interface. Clicking the Load template button in the toolbar opens a File Upload window allowing you to load any previously saved template file.
It is also possible to load an existing template in code by calling `loadTemplate()` method. This again opens the File Upload window allowing you to browse previously saved template files.
```ts
tradingChart.loadTemplate()
```
### Saving and loading JSON strings
LightningChart JS Trader allows saving the current chart as a JSON string by calling `createSaveString()` method in code. The saved string includes all the same information as a template does. Respectively, `loadPreviousSettings()` method can be used to read this JSON string to load the saved settings to the chart.
```ts
// Saving chart settings as a JSON string.
const jsonString = tradingChart.createSaveString()
// Loading previously saved JSON string.
tradingChart.loadPreviousSettings(jsonString)
```
---
## Events
LightningChart JS Trader has several events that can be used to add custom user interactions to the chart. Each event comes with a built-in set of parameters such as the current pointer location, pressed mouse button, and the current data point count. The available parameters depend on the used event.
All events work by subscribing to *onEventName* event.
```ts
// Subscribing to PointerDown event.
// ZoomToFit action (fit all data on screen) is performed when the middle mouse button is pressed.
tradingChart.onPointerDown((e) => {
if (e.button == 1) {
tradingChart.zoomToFit()
}
})
```
Unsubscribing from an event is done by calling respective *offEventName*.
```ts
// Unsubscribing from PointerDown event.
tradingChart.offPointerDown()
```
----------------------
### Chart events
The following events can be accessed directly via the TradingChart instance. Use the respective *offEventName* method to unsubscribe from them.
***onChartClicked***
Event is triggered when the TradingChart instance is clicked. This includes the main chart, the margin area, and the menus. If only the chart area should trigger the event, it is recommended to use PointerDown or PointerUp events.
Parameters:
* *button* - The pressed mouse button
* *axisX* - The clicked point X-coordinate in axis value
* *axisY* - The clicked point Y-coordinate in axis value
* *pixelsX* - The clicked point X-coordinate in screen coordinates (pixels)
* *pixelsY* - The clicked point Y-coordinate in screen coordinates (pixels)
***onClearEverything***
This event fires when the chart is completely cleared via *Clear Everything* button found under delete menu, or when `clearEverything()` method has been called in code.
Parameters: *None*
***onDataModified***
This event is fired whenever the data added to the chart is modified. The triggering actions include adding or removing data points, replacing the dataset, or updating the last point via `updateLastDataPoint()` method. Switching to certain chart types such as *Renko* and *Kagi* can also trigger the event.
Parameters:
* *pointCount* - The current point count after the changes to the data.
***onPointerDown***
Triggers when any mouse button is pressed down on top of the main chart. Chart's margins do not trigger the event.
Parameters:
* *button* - The pressed mouse button
* *axisX* - The clicked point X-coordinate in axis value
* *axisY* - The clicked point Y-coordinate in axis value
* *pixelsX* - The clicked point X-coordinate in screen coordinates (pixels)
* *pixelsY* - The clicked point Y-coordinate in screen coordinates (pixels)
***onPointerUp***
Triggers when any mouse button is released on top of the main chart. Chart's margins do not trigger the event.
Parameters:
* *button* - The released mouse button
* *axisX* - The clicked point X-coordinate in axis value
* *axisY* - The clicked point Y-coordinate in axis value
* *pixelsX* - The clicked point X-coordinate in screen coordinates (pixels)
* *pixelsY* - The clicked point Y-coordinate in screen coordinates (pixels)
***onPointerMove***
This event is fired when pointer is moved on the main chart.
Parameters:
* *axisX* - The clicked point X-coordinate in axis value
* *axisY* - The clicked point Y-coordinate in axis value
* *pixelsX* - The clicked point X-coordinate in screen coordinates (pixels)
* *pixelsY* - The clicked point Y-coordinate in screen coordinates (pixels)
***onXAxisRangeChanged***
The event is fired whenever the X-axis (time axis) range is changed. This can happen due to zooming or panning, or when new data points are being added. Modifying certain settings such as price chart type or data point limit can also change the axis range thus triggering the event.
Parameters:
* *start* - The new axis start value
* *end* - The new axis end value
***onYAxisRangeChanged***
The event is fired whenever the Y-axis (price axis) range is changed. This can happen due to zooming or panning, or when new data points are being added. Modifying certain settings such as price chart type or data point limit can also change the axis range thus triggering the event. Note that only the main price axis causes the event to fire; study indicators' axes shown below the main chart do not trigger it.
Parameters:
* *start* - The new axis start value
* *end* - The new axis end value
----------------------
### Drawing tool events
Drawing tools have their own specific set of events. These work the same way as the main chart's events.
```ts
// Adding Cross Line drawing tool in code and subscribing to its DrawingToolMoved event.
// The Cross Line's position is written to the console whenever the event is fired.
const crossLine = tradingChart.drawingTools().addCrossLine(5, 5)
crossLine.onDrawingToolMoved((e) => {
console.log('X: ' + e.xPosition + ' Y: ' + e.yPosition)
})
```
Unsubscribing from an event is done by calling respective *offEventName*.
```ts
// Unsubscribing from DrawingToolMoved event.
crossLine.offDrawingToolMoved()
```
***onDrawingToolMoved***
The event triggers when the drawing tool's position is being altered by either dragging the tool, or by calling `updatePosition()` in code. The event parameters indicating the tool's new location vary depending on how many control points the tool has.
Parameters:
* *drawingTool* - Gets the drawing tool instance
* *startX* - The first control point X-value (in drawing tools with two control points)
* *startY* - The first control point Y-value (in drawing tools with two control points)
* *endX* - The second control point X-value (in drawing tools with two control points)
* *endY* - The second control point Y-value (in drawing tools with two control points)
***onPointerDown***
Triggers when any mouse button is pressed down on top of the drawing tool.
Parameters:
* *button* - The pressed mouse button
* *drawingTool* - Gets the drawing tool instance
* *isControlPoint* - Tells if the event was triggered by one of the drawing tool's control points or some other part such as line.
* *xPosition* - The pointer's X-position in axis value
* *yPosition* - The pointer's Y-position in axis value
* *xPositionClient* - The pointer's X-position in screen coordinates (pixels)
* *yPositionClient* - The pointer's Y-position in screen coordinates (pixels)
***onPointerUp***
Triggers when any mouse button is released on top of the drawing tool.
Parameters:
* *button* - The released mouse button
* *drawingTool* - Gets the drawing tool instance
* *isControlPoint* - Tells if the event was triggered by one of the drawing tool's control points or some other part such as line.
* *xPosition* - The pointer's X-position in axis value
* *yPosition* - The pointer's Y-position in axis value
* *xPositionClient* - The pointer's X-position in screen coordinates (pixels)
* *yPositionClient* - The pointer's Y-position in screen coordinates (pixels)
***onPointerEnter***
This event triggers when the pointer is moved onto the drawing tool.
Parameters:
* *drawingTool* - Gets the drawing tool instance
* *isControlPoint* - Tells if the event was triggered by one of the drawing tool's control points or some other part such as line.
* *xPosition* - The pointer's X-position in axis value when it entered the drawing tool
* *yPosition* - The pointer's Y-position in axis value when it entered the drawing tool
* *xPositionClient* - The pointer's X-position in screen coordinates (pixels) when it entered the drawing tool
* *yPositionClient* - The pointer's Y-position in screen coordinates (pixels) when it entered the drawing tool
***onPointerLeave***
This event triggers when the pointer is moved away from the drawing tool.
Parameters:
* *drawingTool* - Gets the drawing tool instance
* *isControlPoint* - Tells if the event was triggered by one of the drawing tool's control points or some other part such as line.
* *xPosition* - The pointer's X-position in axis value when it left the drawing tool
* *yPosition* - The pointer's Y-position in axis value when it left the drawing tool
* *xPositionClient* - The pointer's X-position in screen coordinates (pixels) when it left the drawing tool
* *yPositionClient* - The pointer's Y-position in screen coordinates (pixels) when it left the drawing tool
---
## Technical information
## Dependencies and telemetry
LightningChart JS Trader component is based on LightningChart JS, a JavaScript/TypeScript library for placing high performance data visualizing components in user interfaces.
It is powered by WebGL, which is very well supported (see [support table](https://caniuse.com/webgl)).
## TypeScript
In TypeScript applications, minimum TypeScript version required is currently `4.1` (released Nov 19 2020).
The Trader library build includes Typings which can be used for Intellisense even when working with JavaScript.
## Performance and GPU utilization
LightningChart JS, on which the Trader is based, runs completely on client device without requiring any server setup etc.
Performance is largely affected by client hardware (CPU, GPU, RAM).
Best performance is found on personal computers, gaming laptops, modern mobile phones and embedded devices with dedicated GPUs.
With other hardware, you can expect lesser performance but still significantly better real-time capabilities than with traditional HTML/SVG/Canvas based chart solutions, as long as there is at least an integrated graphics processing unit on the device.
LightningChart JS performance advantages are based on offloading heavy computations that traditional chart solutions run with CPU, to the GPU and utilizing low level graphic APIs directly in the most optimal manner possible for purposes of data visualization.
The GPU driven algorithms of LCJS span from over 15 years of commercial experience with GPU accelerated data visualization, starting with the inception of the original GPU accelerated data visualization product, LightningChart .NET.
LightningChart JS has been excessively benchmarked against virtually all popular players in JavaScript chart solution market (commercial, free, open-source).
It's key performance advantages are:
- Capacity of handling significantly more data (+10 million data points without a sweat).
- Utilizing considerably less CPU.
- Reacting to data or style changes and user interactions at 60 FPS always.
- Real-time oriented design and API.
- Fast loading of large data sets (10 million data points line chart in 0.3 seconds).
- Perfect when you need to interact, zoom, analyze and operate on extremely heavy visualizations.
Learn more about performance studies at our [web site](https://lightningchart.com/js-charts/performance/).
## Deployment and internet connection
LightningChart JS Trader can be deployed to virtually any kind of environment: SaaS, public web site, distributable device, mobile application, desktop application.
Internet connection is required when using LightningChart JS Trader.
## End user legal agreement
By downloading, installing, copying or otherwise using LightningChart® JS Trader, you are agreeing to be bound to the terms of our end user legal agreement.
Please find the latest EULA at our [web site](https://lightningchart.com/eula/lightningchart-js-commercial-license/).
---
## API
A full API reference is available under a separate resource.
This is intended for understanding specific library methods, properties and exports at a detailed level as well as finding their relations to other entries.
Please find the API reference [here](https://lightningchart.com/js-charts/trader/api-documentation/v4.1.1/index.html).
---
## Contact
Detailed contact information can be found [here](https://lightningchart.com/contact/).
For technical support:
- Open a ticket in Customer Portal > Support > Create Ticket
- Write an email to support@lightningchart.com
We aim to answer all questions within one work day.
---
## Installation
To install LightningChart JS Trader (trial version or purchased one), use the following command in your project:
npm i @lightningchart/lcjs-trader
After installing the package, you will need to provide Trader your license key before using the chart. To get the key, please fill the contact form [here](https://lightningchart.com/js-charts/trader/) opened by clicking the Start 30-day Free Trial button.
```ts
trader('my-license-key')
.then(ta => {
const tradingChart = ta.tradingChart()
})
```
---
## LightningChart and AI
Generating code with large language models (LLMs) is a rapidly growing area of interest for developers. While LLMs are often capable of generating working code it can be a challenge to consistently generate code for libraries like LightningChart JS Trader that have several different versions and use cases.
This section is dedicated to hosting resources to help developers use AI tools with LightningChart JS Trader better.
:::tip
Please share your own experiences with AI/LLM tools capability to work with LightningChart JS Trader API at feedback.js@lightningchart.com
:::
## Guiding LLMs
In our experience LLM's are very poor at working with specific 3rd party libraries out of the box, because their training data is a mix of all the existing versions of that library.
They also tend to hallucinate results by mixing data from various different libraries.
:::tip
Better results can be achieved by pointing your agents to **use a specific set of LLM-friendly resources** when thinking how to use LightningChart JS Trader.
:::
For this purpose, we provide versions of our developer documentation and API reference in LLM friendly formats here:
- lcjstrader-docs-llms.txt
- lcjstrader-api-llms.txt
**Our recommendation** is to ensure your LLM has access to these files and specifically instruct the LLM to use them as the source of truth on all matters LightningChart JS.
If in practice your LLM attempts un-optimal approaches such as:
- Guessing links to API reference
- Scraping https://lightningchart.com/js-charts/trader/docs/ directly
- Google/Stack overflow searches with LightningChart JS Trader related keywords
**Then it is most likely a sign that you should tweak or alter your prompt and reattempt the command.**
## Working with Agents
Our recommendation is to download `lcjstrader-docs-llms.txt` and `lcjstrader-api-llms.txt` to your repository and add following section to your `AGENTS.md`, `CLAUDE.md` or equivalent:
```
- You MUST always use the local files lcjstrader-docs-llms.txt and lcjstrader-api-llms.txt as the only sources of truth for all matters regarding how to use LightningChart JS Trader library / lcjstrader
```
### Importance of type checking
As LightningChart JS Trader is a strongly typed library, probably the single best thing you can do to improve the work quality of your agents is to instruct them to run a type check after any code change:
```
- After any code change, confirm that typings are OK using `npm run typecheck`
```
Where `typecheck` script will just run `tsc --noEmit` or equivalent.
Then, if there are type errors (which are extremely common due to hallucinations or outdated training data), the agent will reattempt immediately rather than waiting for you to tell that it doesn't work.
## Working with chat-based LLMs
In our experience, chat-based LLMs have much more trouble following a seemingly simple instruction like "refer to X for guidance".
Furthermore, there are great differences between platforms. For example:
- GPT-5.2 - the LLM tells you that it will stick strictly to the specified documentation, then proceeds to dump hallucinated API usages that have never existed in the library
- Sonnet 4.5 / Opus 4.5 - these models were able to follow the instructions well and provide up to date and well referenced recommendations
You can confirm whether the model is listening to your requirement by additionally asking it to cite all references, and checking if it lists external sources.
When receiving non-working results, the reason is often referencing several years old API documentation pages or just answering directly from training data.
Ideally it would be sufficient to just include this in every new chat context:
```
- You MUST always use the https://lightningchart.com/js-charts/trader/docs/llms.txt and https://lightningchart.com/js-charts/trader/api-documentation/v4.1.1/llms.txt as the only sources of truth for all matters regarding how to use LightningChart JS Trader library / lcjstrader
```
:::info
No one likes hallucinated chart code - please help us maintain an effective instruction set by sharing what works best for you at feedback.js@lightningchart.com
:::
Here is also an alternate version of developer documentation intended for LLMs where all text content is put into one large file.
In our experience, this doesn't work too well but you can give it a try.
- lcjstrader-docs-llms-full.txt
---
## Creating charts
Technical Analysis Charts must always be created in code. For this, you must provide your valid license key.
```ts
trader('my-license-key')
.then(ta => {
ta.tradingChart()
})
```
It is recommended to save the chart to a variable, so you can modify its properties later.
```ts
const tradingChart = ta.tradingChart()
```
----------------------
### Chart options
When a chart is created in code, you can give it a `ChartOptions` object which contains various settings regarding chart's behavior and visual appearance.
All settings are optional.
`ChartOptions` contains the following settings:
***parentElement***
Allows setting a parent HTML-element for the chart. The chart is then rendered inside this element. Use this to position the chart on your page.
***loadFromStorage***
Sets whether chart settings should be saved to and loaded from the local storage.
By default, Technical Analysis Chart saves all the same information that is saved to a [template](/templates) to local storage, when the chart is closed due to for example page reload or window closing. Whenever a chart instance is opened again, the chart checks the local storage for settings from previous sessions and loads them.
Set this option false to disable this. Note that this cannot be changed after the chart has been created.
***axisOnRight***
Determines on which side the price axis (Y-axis) is located. Default side is right (true).
Note that loading from local storage overrides this setting. Therefore, this option works only if loadFromStorage is set false.
***colorTheme***
Selects the overall color theme of the chart from five pre-defined options.
Note that loading from local storage overrides this setting. Therefore, this option works only if loadFromStorage is set false.
***htmlTextRendering***
This setting allows users to switch between Html texts and WebGl texts. Generally, Html texts are visually more appealing but can cause a small decrease in performance especially in demanding applications with 10000+ data points. Html texts are enabled by default.
***canvas***
Optional canvas element that Trader's internal LightningChart component can use for rendering. Can be useful in complex page layouts, otherwise it is recommended to use
parentElement for positioning the chart. Note that using this can cause decrease in performance with some browsers such as Firefox.
***lightningChart***
Optional LightningChart instance that can be used to create charts. Using this can save resources and speed up loading times if application uses several charts including TradingCharts and regular JS LightningCharts. In typical use cases, this can be left out.
```ts
// Using chart options during chart creation. Note that all these options are optional.
const tradingChart = ta.tradingChart({
parentElement: yourHTMLElement,
loadFromStorage: false,
axisOnRight: true,
colorTheme: Themes.turquoiseHexagon,
htmlTextRendering: true,
canvas: yourCanvasElement,
lightningChart: yourLightningChartInstance
})
```
---
## Adding data in code
Trading data can be added to Technical Analysis Chart via code or by reading it from a csv-file.
The data itself can be of any source as long as it is given in correct formats. The data source is up to the user to define,
as LightningChart does not offer any build-in data providers.
This section explains how to add data to the chart in code. See [Reading data from csv](/reading-data-from-csv) to learn about using csv-files.
----------------------
### addDataArray
This method adds an array of data points to the end of the existing data, or to an empty chart.
The array entries are of DataPoint type, each consisting of open, high, low, close and dateTime fields, as well as optional volume and openInterest fields.
Technical Analysis Chart automatically sorts the given array according to the dateTime values. However, the method expects the oldest dateTime to be newer than the current newest dateTime on the chart.
```ts
const dataArray = [
{ open: 10, high: 12, low: 9, close: 11, dateTime: new Date(2023, 10, 27), volume: 150 },
{ open: 11, high: 13, low: 10, close: 10, dateTime: new Date(2023, 10, 28), volume: 200 },
{ open: 9, high: 12, low: 8, close: 10, dateTime: new Date(2023, 10, 29), volume: 250 },
]
tradingChart.addDataArray(dataArray, false)
```
The `chart.addDataArray()` method also allows scrolling the data in real-time applications. Set the `scroll` parameter of the method true to allow this.
This moves the data forward by the number of added data points.
### addDataPoint
The `chart.addDataPoint()` method adds a single data point to the end of the existing data, or to an empty chart.
The chart expects the given dateTime value to be newer than the current newest dateTime value on the chart.
```ts
tradingChart.addDataPoint({ open: 30, high: 40, low: 20, close: 35, dateTime: new Date(), volume: 350 })
```
To allow scrolling the data in real-time applications, set the `scroll` parameter of the method true.
This moves the data forward by one data point.
For example, a scrolling real-time application showing maximum of 200 data points before scrolling:
```ts
tradingChart.addDataPoint({ open: 30, high: 40, low: 20, close: 35, dateTime: new Date(), volume: 350 }, tradingChart.getPointCount() >= 200)
```
### setData
This method sets an array of new data points to the chart, replacing the old data.
The array entries are of DataPoint type, each consisting of open, high, low, close and dateTime fields, as well as optional volume and openInterest fields.
The chart automatically sorts the data into ascending order based on dateTime values.
```ts
const dataArray = [
{ open: 10, high: 12, low: 9, close: 11, dateTime: new Date(2023, 10, 27), volume: 150 },
{ open: 11, high: 13, low: 10, close: 10, dateTime: new Date(2023, 10, 28), volume: 200 },
{ open: 9, high: 12, low: 8, close: 10, dateTime: new Date(2023, 10, 29), volume: 250 },
]
tradingChart.setData(dataArray)
```
### updateLastDataPoint
This method updates the last (newest) data point of the current set displayed in the chart.
It does not update the time stamp of the point, only OHLC-values as well as optional Volume and Open Interest values are affected.
Unlike other data adding methods, `updateLastDataPoint()` does not use DataPoint types. Instead, open, high, low, close
and optional volume and openInterest fields are given separately.
```ts
// Updating the last data point with new open, high, low, close and volume values.
tradingChart.updateLastDataPoint(10, 12, 9, 11, 150)
```
### clearData
Any previously pushed data can be cleared with the `clearData()` method. This clears all trading data including Volume and Open Interest values.
All indicators and drawing tools are then automatically updated.
```ts
tradingChart.clearData()
```
---
## Reading data from csv
Trading data can be added to Technical Analysis Chart via code or by reading it from a csv-file.
The data itself can be of any source as long as it is given in correct formats. The data source is up to the user to define,
as LightningChart does not offer any build-in data providers.
This section explains how to add data to the chart using csv-files. See [Adding data in code](/adding-data-in-code) to assign data to the chart in code.
----------------------
### Csv-file format
The given csv-file should contain at least Date, Open, Close, High and Low fields (headers). Volume and Open Interest fields are optional.
The Date value can be given in any datetime string format as long as it can be parsed by [Date.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) method (Trader does the parsing internally).
Example of a proper csv-file:
```ts
Date,Open,Close,High,Low,Volume
2018-09-18,185.00,186.00,190.00,185.00,918
2018-09-19,187.60,185.20,188.00,185.20,702
2018-09-20,190.00,187.80,190.00,186.40,190
2018-09-21,188.20,186.20,188.40,186.20,234
2018-09-24,186.20,186.60,189.80,183.60,589
2018-09-25,187.40,188.40,188.60,186.80,375
2018-09-26,189.00,190.80,190.80,188.80,822
2018-09-27,190.00,193.40,193.60,184.00,430
2018-09-28,193.20,194.20,194.20,192.80,616
```
Note that reading trading data from csv-file replaces any existing data. Furthermore, the selected time range determines which data points from the file are shown on the chart.
### Adding csv data via user interface
The chart's user interface includes Dataset from file button in the left toolbar. Clicking this opens file explorer, allowing browsing csv-files.
### Adding csv data in code
Trading data read from csv-files can be added to the chart in code by calling `chart.loadCsvString()` method. This method expects the contents of a csv-file as a string,
read for instance via [fetch()](https://www.w3schools.com/jsref/api_fetch.asp) method. A new dataset name can also be given, which is then shown as the title of the price chart.
```ts
await fetch(`${document.head.baseURI}filePath/YourCsvFile.csv`).then((res) => res.text()).then((text) => {
tradingChart.loadCsvString(text, 'YourDatasetName')
})
```
The `chart.loadCsvString()` method also allows defining the delimiter used in csv-file to separate entries. This is comma by default.
### Converting csv data into an array
Technical Analysis Chart provides a method to convert csv string into array. For this, `chart.readCsvString()` under `HelperRoutines` class can be used. The method takes a string and converts it into an array containing separate arrays for Date strings, Open values, High values, Low values, Close values, and optional Volume and Open Interest values. This method is helpful when the data is needed later in code or should be modified somehow.
```ts
const _helperRoutines: HelperRoutines = new HelperRoutines()
const data = _helperRoutines.readCsvString(csvString)
```
---
## Real-time data
Adding data in real-time is mostly handled similarly to adding static data, although it must always be done in code. Here are some general guidelines to follow:
* Use `addDataPoint()` method when adding one data point at a time.
* Use `addDataArray()` method when adding multiple data points at the same time.
* If the dataset needs to be scrolled after new points have been added, set the *scroll* parameter true when using the above methods. The data is then moved left based on the number of added data points. Unless data limit settings (see the next chapter) state otherwise, the out-scrolled data points are not removed from the chart, and can still be seen by panning the chart or zooming out.
* Data points can only be added to the end of the existing data. Therefore, make sure the datetime values of the added data points are newer than the current newest data point on the chart. If this condition is not fulfilled, the points won't be added to the chart. If you need to add data points at the beginning or somewhere in the middle of the dataset, `setData()` method has to be used to re-add the whole dataset.
* Use `updateLastDataPoint()` when you need to update the latest data point, and the total data point count doesn't change. If you need to update more that just the latest point, the whole dataset needs to be re-added with `setData()` method.
* In real-time applications, use `setData()` only when the whole dataset needs to be replaced. Otherwise use the *add* methods.
Check [Adding data in code](/adding-data-in-code) to see code examples about the above methods.
----------------------
### Dropping old data
Memory consumption can become a problem in real-time applications, if new data points are constantly being added and old ones never removed. For this, Technical Analysis Chart has a built-in feature to drop old data points, when the total number of points exceeds certain limit. As this feature is disabled by default, `enableDataPointLimit()` method has to be called to activate the limit. Afterwards, `setDataPointLimit()` can be used to set the maximum number of points allowed on the chart before old points are dropped out. Note that the dropped points are permanently removed from the chart and, unless re-added, cannot be viewed again.
```ts
// Enabling data point limit of one thousand points.
tradingChart.enableDataPointLimit(true)
tradingChart.setDataPointLimit(1000)
```
Both of the above settings can also be found under the chart settings menu in the toolbar.
---
## Chart types
LightningChart JS Trader includes several various chart types to choose from. Chart type determines how the price information is shown in the chart.
----------------------
### Changing chart type
The chart type can be changed via Chart Type button found amongst the UI buttons in the toolbar to the left of the chart. Clicking the button opens a list of available chart types. Selecting a chart type in the list will change the chart to use that type.
The chart type can also be changed in code with `setPriceChartType()` method.
```ts
// Setting the chart type in code.
tradingChart.setPriceChartType(PriceChartType.Bar)
```
----------------------
### Available chart types
| Type | Description | Example |
| ---- | ----------- | ------- |
| Candlestick | Candlestick charts show price movements using Open, High, Low, and Close values for user-selected time periods. Candlesticks consist of a body part displaying Open and Close values, and shadows (wicks) displaying High and Low values. The appearance of the candlesticks can be modified via the ["Color settings"](/color-settings) menu, or in code with respective methods. |  |
| Bar | Bar charts show price movements using Open, High, Low, and Close values for user-selected time periods. Bar charts consist of a vertical line displaying High and Low values, and two small horizontal lines displaying Open and Close values. The appearance of the bars can be modified via the ["Color settings"](/color-settings) menu, or in code with respective methods. |  |
| Line | Line chart draws a simple line based on the Close values of the dataset. The color of the line can be modified via the ["Color settings"](/color-settings) menu, or with `setLineColor()` method in code. |  |
| Mountain | Mountain chart, also known as Area chart, is similar to Line chart, the only difference being that the area below the line is colored. The area color cannot be set individually. Instead, it uses a semi-transparent version of the line color. |  |
| Heikin Ashi | Heikin Ashi is a modified Candlestick chart, which uses average prices of the current and prior timeframe. The appearance of the candlesticks can be modified similarly to regular Candlestick charts, via the ["Color settings"](/color-settings) menu, or in code with respective methods. |  |
| Renko | Renko chart consists of equal-sized bricks. When the price moves up or down a specified amount (box size), a new brick will be drawn. Renko brick size can be based on Close values, High-Low range, Percentage of the price, or Average True Range (ATR) indicator. Use `setRenkoBaseType()` to change this. |  |
| Kagi | Kagi is a line chart changing direction when the price moves by a certain amount. It is constructed using a series of connected, time-independent vertical lines. Kagi chart can be based on Close values, High-Low range, Percentage of the price, or Average True Range (ATR) indicator. Use `setKagiBaseType()` to change this. |  |
| Point & Figure | Point-and-Figure is a time-independent chart consisting of columns of stacked X's and O's, where the X's indicate rising prices while the O's indicate falling prices. Point-and-Figure box size can be based on Close values, High-Low range, Percentage of the price, or Average True Range (ATR) indicator. Use `setPointAndFigureBaseType()` to change this. |  |
### Modifying special chart types
Special charts like Renko, Kagi, and Point & Figure have chart type specific settings which other chart types don't have. These include for instance Box size for Renko and Reversal amount for Point-and-Figure. When the chart type is set to one of these charts, respective chart will appear in the same menu as overlay indicators. Its settings can then be modified similarly to the [indicators](/technical-indicators/modifying-indicators).
To change special chart specific settings in code, the chart has to be gotten via respective getChartTypeInstance method, for example `getRenkoInstance()`. This allows access to methods like `setBoxSize()` or `setReversalAmount()`.
```ts
// Modifying Renko specific settings in code.
const renko = tradingChart.getRenkoInstance()
if (renko) {
renko.setRenkoBaseType(BaseType.HighLowRange)
renko.setBoxSize(2)
}
```
Note that `getRenkoInstance()` and other similar methods work only when the chart type is set to respective type. For instance, if `getRenkoInstance()` is called when the chart type is set to Candlesticks, the method will return null. Hence the null check in the above code.
### Limitations with chart types
Some Trader features are not available for all chart types. For instance, certain technical indicators require Open, High, Low and Close values, or some combination of them, in their calculations. However, some chart types such as Kagi do not show all these values, making it impossible to calculate the indicator properly. In these cases, the indicator appears as empty.
Symbol comparison is unavailable for Renko, Kagi, and Point & Figure chart types due to irregular time axis. If user wants to compare for example a Renko chart with a traditional Candlestick chart, two instances of Trader need to be created. Likewise, Zoom Band Chart is currently not supported with Renko, Kagi and Point & Figure chart types.
---
## Chart settings
LightningChart JS Trader has a large number of various settings to modify the chart behavior and appearance. As with any other aspects of the chart, these can be modified via user interface, or in code.
This section explains general settings of the chart. For color and appearance settings, see ["Color settings"](/color-settings).
----------------------
### Chart settings via user interface
Most of the chart settings can be found in the settings menu, brought up by clicking the Chart settings button found in the toolbar to the left of the chart. Note that appearance and color related settings have their own menu.
Technical indicators and drawing tools have their own respective settings menus.
For indicators, see [Modifying indicators](/technical-indicators/modifying-indicators).
For drawing tools, see [Modifying drawing tools](/drawing-tools/modifying-drawing-tools).
### General settings
***Chart title***
Allows modifying the title text shown on top of the chart.
***Currency***
The currency of the current dataset. When set, is shown after the chart title.
***Price axis on right***
Determines on which side of the chart the price axis is located. Default side is right. Note that changing this causes a page reload which results in losing the trading data added to the chart. Therefore, it is recommended to set this when [creating](/creating-charts) the chart.
***Percent scale***
When enabled, modifies the price axis to show percentage ratios instead of price values.
***Data packing***
When enabled, packs the candlesticks or bars when the chart has a large number of data points. This improves performance but may cause a loss of data accuracy. Data packing is disabled by default.
***Candle auto width***
This setting causes candlestick and bar widths to be automatically adjusted based on the zoom level, leaving less empty space between the data points. Enabled by default.
***Enable data limit***
When enabled, the chart limits on how many data points can be shown simultaneously on the chart. If the limit is exceeded, the oldest data points are automatically removed. Use *Data point limit* setting, or `setDataPointLimit()` method in code, to modify the maximum number of points.
***Data point limit***
Sets the maximum number of data points that can be shown on the chart. If the limit is exceeded, the oldest data points are automatically removed. Data limit has to be enabled via *Enable data limit*, or `enableDataPointLimit()` in code, for this to have effect.
***Zoom band chart***
Shows a small zoom band chart depicting the whole X-axis range of the main chart. Appears directly below the price chart.
***Show chart title***
Can be used to show and hide the chart title. The chart's top margin is automatically adjusted accordingly.
***Show value labels***
This is a master setting to enable or disable all latest value labels in the chart. Affects the main trading data's label as well as all indicator labels. Disabling this overrides all trading data and indicator specific label settings.
***Latest value label***
Controls the type of the latest value label (latest Close) for the trading data. Does not affect indicators' labels.
***Show splitter lines***
When enabled, shows horizontal lines between the main chart and technical indicators. These lines can be dragged to resize the corresponding segments.
***Show file selection***
Can be used to show and hide the csv file selection button in the toolbar.
***Allow hiding toolbar***
When enabled, allows hiding the toolbar via the arrow button in the bottom-left corner of the chart.
***Show watermark***
When enabled, shows a semi-transparent watermark in the middle of the price chart. Use *Watermark text* setting, or `setWatermarkText()` method in code, to set the actual text.
***Watermark text***
Sets the text that is shown in the middle of the price chart, if watermark is enabled. Note that this is often updated automatically when a new dataset is added to the chart.
### Cursor settings
***Cursor Tracking***
Allows setting which OHLC-field is being tracked by the data cursor, and what values are shown in the result table.
***Result Table Position***
Allows setting the position of the result table showing the current cursor values. Options include top-left corner, current cursor position, and hidden result table.
***Show Horizontal Line***
Shows or hides the horizontal line of the data cursor. Affects also all study indicators (indicators below the price chart).
***Show Vertical Line***
Shows or hides the vertical line of the data cursor. Affects also all study indicators (indicators below the price chart).
### Zooming and panning settings
***Wheel zooming***
Defines how the chart is zoomed when the mouse wheel is scrolled. Note that Vertical zooming and Restrict X/Y-axis settings also affects the zooming behavior. There are five behavior options to choose from:
* ***KeepEnd*** - X- and Y-axis maximums are kept visible when zooming.
* ***KeepStart*** - X- and Y-axis minimums are kept visible when zooming.
* ***TowardsPointer*** - Zooms towards the current pointer location. This is the old behavior used before Trader version 3.0 release.
* ***Centered*** - Zooms towards the center of the chart.
* ***Off*** - Mouse wheel zooming is disabled.
***Rectangle zooming***
Defines what button is used for rectangle zooming. If this and panning are set to use the same button, panning is automatically disabled.
***Panning***
Defines what button is used for panning. If this and rectangle zooming are set to use the same button, rectangle zooming is automatically disabled.
***Zooming sensitivity***
Sets the sensitivity of wheel zooming. Value 0 means no zooming while value 1 is the default zooming sensitivity.
***Vertical zooming***
When disabled, chart can be zoomed only in horizontal direction. In other words, X-axis is zoomed but Y-axis is ignored.
***Vertical panning***
When disabled, chart can be panned only in horizontal direction. In other words, X-axis is panned but Y-axis is ignored.
***Restrict X-axis***
When enabled, X-axis cannot be zoomed or panned past the dataset minimum or maximum.
***Restrict Y-axis***
When enabled, Y-axis cannot be zoomed or panned past the dataset minimum or maximum.
***Data padding***
Data padding allows leaving empty space, defined in pixels, between the data and the edges of the chart. The space is automatically added after various zoom actions. Data padding for each edge can be set separately. In code, `setDataPadding()` method is used to set all the values at once.
***X-axis left button***
Sets the action happening when the X-axis is being dragged with the left mouse button. All axes have the same interaction options available:
* ***DragZoom*** - Dragging the axis causes it to stretch/contract.
* ***Pan*** - Pans the chart.
* ***RectangleZoom*** - Draws a rectangle signifying the zooming area.
* ***ZoomToEnd*** - Zooms in/out while keeping the axis end value visible.
* ***Off*** - Interaction with the respective button is disabled.
***X-axis right button***
Sets the action happening when the X-axis is being dragged with the right mouse button. The available options are listed above.
***Y-axis left button***
Sets the action happening when the Y-axis is being dragged with the left mouse button. The available options are listed above. The selected option affects also all indicator Y-axes.
***Y-axis right button***
Sets the action happening when the Y-axis is being dragged with the right mouse button. The available options are listed above. The selected option affects also all indicator Y-axes.
### Chart settings in code
Every chart setting you can do via user interface, can also be done in code. Chart instance has various set...() and show...() methods to alter the behavior of the chart.
```ts
// Various chart settings in code.
tradingChart.showZoomBandChart(true)
tradingChart.showFileSelection(false)
tradingChart.setChartTitle('Dataset Title')
tradingChart.setPercentScale(true)
tradingChart.setOHLCCursorTracking(OHLCTrackingType.Close)
```
Settings for individual technical indicators and drawing tools can also be modified in code. Each indicator and drawing tool have their own methods to modify them. For further information, check the respective documentation:
For indicators, see [Modifying indicators](/technical-indicators/modifying-indicators).
For drawing tools, see [Modifying drawing tools](/drawing-tools/modifying-drawing-tools).
---
## Color settings
LightningChart JS Trader's appearance can be modified via user interface, or in code.
----------------------
### Color themes
Trader has several pre-defined color themes: Cyber Space, Dark Gold, Light, Light Nature, and Turquoise Hexagon. You can define the theme when [creating](/creating-charts) the chart. Alternatively, the theme can be changed in the Color settings menu.
```ts
// Setting the color theme during chart creation.
const tradingChart = ta.tradingChart({colorTheme: Themes.turquoiseHexagon})
```
It should be noted that changing color themes overrides all user-defined colors. For instance, if you have modified the colors of an indicator or a drawing tool, you will lose these modifications. Furthermore, changing themes causes a page reload since the chart has to be re-created in order to modify all the components of the chart. This will cause you to lose all the trading data you have added to the chart. For these reasons, it is recommended to define the color theme when creating the chart, and refrain from changing it afterwards.
### Color settings via user interface
Various color settings can be found in the respective menu, brought up by clicking the Color settings button found in the toolbar to the left of the chart.
The menu has two tabs. The first tab includes series related settings such as candlestick colors, while the second contains background related options such as color theme and custom background colors.
Colors for individual technical indicators and drawing tools can also be modified. However, this is done via their own settings menus.
For indicators, see [Modifying indicators](/technical-indicators/modifying-indicators).
For drawing tools, see [Modifying drawing tools](/drawing-tools/modifying-drawing-tools).
### Color settings in code
Every color setting you can do via user interface, can also be done in code. Chart instance has various set...() methods to alter the appearance of the chart.
```ts
// Various color settings in code.
tradingChart.setPositiveBodyColor('#00FF55')
tradingChart.setPositiveWickColor('#00FF55')
tradingChart.setLineColor('#55FF00')
// Setting color theme in code. This will override the above settings.
tradingChart.setColorTheme(Themes.cyberSpace)
```
Note that in LightningChart JS Trader, the color values for respective methods should be given in HEX format e.g. #FFFFFF.
If the method doesn't seem to do anything, check the console of your browser, as Trader often informs the user in case the given values are in wrong format.
Colors for individual technical indicators and drawing tools can also be modified in code. Each indicator and tool have their own methods to modify them. For further information, check the respective documentation:
For indicators, see [Modifying indicators](/technical-indicators/modifying-indicators).
For drawing tools, see [Modifying drawing tools](/drawing-tools/modifying-drawing-tools).
### Custom backgrounds
LightningChart JS Trader allows users to define their own chart backgrounds. Available options include solid fill, linear and radial gradients, as well as image backgrounds. All background options, excluding image settings, can be found in the background tab in the color settings menu. Modifying any of the settings will override the default background with the currently selected fill type.
In code, there are two methods to change the background colors. `setSeriesBackgroundColor` changes only the series area color while `setBackgroundColor` modifies the color of the whole chart including both margin and series areas. The latter affects the series area only if the former has not been set. `setSeriesBackgroundColor` method also includes the fill type settings as well as various optional gradient related settings.
```ts
// Setting a radial gradient as background.
tradingChart.setSeriesBackgroundColor('#408000', FillStyle.RadialGradient, '#000000', 0, 0.4, 0.9, 0.9)
// Setting margin area color (and series area color if setSeriesBackgroundColor has not been called).
tradingChart.setBackgroundColor('#001020')
```
Default background can be restored by calling `restoreDefaultBackground` method in code or by clicking Default background button in the Background tab.
Images can be set as backgrounds via `setBackgroundImage` method, which accepts image URL or path as a string. Image backgrounds can currently be set only in code.
```ts
// Setting image as chart background.
tradingChart.setBackgroundImage('Image URL or path')
```