Skip to main content

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 the chart. Alternatively, the theme can be changed in the Color settings menu.

// Setting the color theme during chart creation.
const tradingChart = ta.tradingChart({colorTheme: Themes.turquoiseHexagon})

Color themes

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.

Setting colors via UI

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.
For drawing tools, see 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.

// 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.
For drawing tools, see 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. 

// 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')

Background settings

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.

// Setting image as chart background.
tradingChart.setBackgroundImage('Image URL or path')