Creating charts

Technical Analysis Charts must always be created in code. For this, you must provide your valid license key.

import { trader } from "@lightningchart/lcjs-trader";

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.

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 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.

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

Chart options​

Chart options