A Guide to Volume Technical Indicator with LightningChart JS Trader

Article

Learn how to implement a Volume Technical Indicator in your fintech application development using LightningChart JS Trader charting components.
Soroush Sohrabian

Ahmad Omid

Data Science Developer

LinkedIn icon
Volume-Technical-Indicator-Cover

Introduction to Volume Technical Indicator

The volume technical indicator is a fundamental tool in technical analysis, representing the total number of traded securities over a specified time frame. It offers critical insights into market activity, helping traders identify trends, confirm breakouts, and gauge the strength of market movements.

Historically, volume has been a cornerstone of technical analysis. Analysts such as Charles Dow emphasized the importance of volume in confirming trends, making it a vital component of the Dow Theory. Modern trading tools like LightningChart JS Trader have advanced these concepts, enabling the integration of volume indicators directly into price charts or as separate studies, giving traders unprecedented flexibility.

How is It Used in Trading?

Volume technical indicators are employed to:

  • Confirm Trends: High volume during a price increase or decrease validates the trend’s strength.
  • Identify Breakouts: Sudden spikes in volume often signal breakouts from support or resistance levels.
  • Detect Divergences: A mismatch between price movement and volume can indicate potential reversals.
  • Measure Market Interest: High trading volume reflects significant market interest, while low volume indicates lackluster participation.

LightningChart JS Trader enhances this analysis by allowing users to display volume as an overlay or a separate chart using the setShowAsOverlay() method, providing clarity and customization for traders.

How does the Volume Technical Indicator work?

Volume indicators do not rely on the calculation of OHLC (Open, High, Low, Close) data directly. Instead, they track the number of shares or contracts traded during a specific interval. In LightningChart JS Trader, users can assign volume values independently via tradingChart.setVolumeData() or by adding a complete dataset. This separation ensures precise representation of trading activity.

Additionally, cumulative volume—a variation often used in analysis—sums the volume over time, creating a cumulative volume line. This line helps identify periods of sustained buying or selling pressure.

Interpretation

Interpreting volume indicators revolves around understanding the relationship between price and volume. Key interpretations include:

  • Rising Volume with Price Movement: Confirms the direction of the price trend.
  • Divergence: If price rises but volume decreases, it may signal weakening momentum.
  • Volume Spikes: Sudden, isolated volume spikes often indicate market events, news, or breakout opportunities.

The cumulative volume line serves as a broader measure of market sentiment, smoothing out short-term fluctuations to reveal overarching trends.

Key Components

  1. Raw Volume Data: Represents the fundamental measure of traded securities.
  2. Overlay/Study Display: LightningChart JS Trader allows volume data to be shown as an overlay or separate chart for better analysis.
  3. Cumulative Volume: A derived indicator that aggregates volume over time to detect long-term buying or selling trends.

How to Create the Technical Indicator Using LC JS Trader

Step 1: Get LightningChart JS Trader

To begin, you’ll need access to LightningChart JS Trader. This library provides the tools necessary to create advanced technical indicators, including the Volume Technical Indicator. Visit the LightningChart JS Trader page to download the required components and review the documentation.

Step 2: Review the Interactive Example

LightningChart JS Trader includes interactive examples that demonstrate how to create custom technical indicators. Start by reviewing the documentation, focusing on how to integrate the Volume Technical Indicator into your chart setup. The interactive examples will guide you through the process of setting up the Volume Technical Indicator, from importing the necessary modules to modify the chart settings.

Step 3: Code Explanation

In this step, we will break down the code that creates the chart with the Volume Technical Indicator, as shown in the image, using LightningChart JS Trader. The code demonstrates how to initialize a trading chart, apply the Volume Technical Indicator, and customize its appearance.

Volume-Technical-Indicator-Chart-Example

Here’s a detailed breakdown of each section:

A. Importing the Required Libraries:

   const lcjsTrader = require('@arction/lcjs-trader')
   const lcjs = require('@arction/lcjs')
   const { Themes } = lcjs
  • lcjsTrader: This library provides access to the LightningChart JS Trader functionalities, allowing you to create advanced financial charts.
  • lcjs: The main LightningChart JS library, used for general charting functionality.
  • Themes: A property within lcjs that provides access to pre-built themes. In this case, we are using the darkGold theme to style the chart.

B. Initializing the Trading Chart:

   lcjsTrader.trader(TRADER_LICENSE).then(async (trader) => {
    // Create a trading chart.
    const tradingChart = trader.tradingChart({ loadFromStorage: false, colorTheme: Themes.darkGold })
  • trader(TRADER_LICENSE): Initializes the LightningChart JS Trader with the provided license key (TRADER_LICENSE). This is required to access the charting functionalities for financial data.

Note you can request a LightningChart JS Trader trial license, which is free.

  • tradingChart(): This function creates a trading chart with certain options.
  • loadFromStorage: false: This disables the loading of previously stored chart data from local storage, ensuring a fresh chart setup.
  • colorTheme: Themes.darkGold: This applies the darkGold theme to the chart, which influences the background color, gridlines, and other visual elements.

C. Adding and Customizing the Indicator

    // Add a Volume Technical indicator
    const volume = tradingChart.indicators().addVolume(true, true)
  • addVolume(true, true): Volume is the number of traded securities over a certain time period. The first “true” inside the parenthesis is “addAsOverlay”, and the second one is “twoColoredBars”.
  • Parameters:
    • addAsOverlay: boolean= true. When enabled, Volume is shown as an overlay in the price chart. Setting the parameter false shows Volume in a separate chart.
    • twoColoredBars: boolean= true. The Volume bars are colored based on the OHLC-data’s candlestick/bar color of that day.

    D. Loading Data from a CSV File

        // Reading data from a file.
        await fetch(`${document.head.baseURI}examples/assets/0000/Alphabet Inc (GOOGL).csv`).then((res) => res.text()).then((text) => {
            tradingChart.readCsvString(text, 'Alphabet Inc (GOOGL)')
        })
    • fetch(): This function retrieves a CSV file containing historical data for Alphabet Inc. (GOOGL). The CSV file includes pricing information for the company’s stock, which is plotted on the chart.
    • readCsvString(): This function reads the CSV data and interprets it as pricing data for Alphabet Inc. The second argument (‘Alphabet Inc (GOOGL)’) sets the label for the chart, as seen at the top of the chart image.

    E. Setting the Currency for the Chart

        tradingChart.setCurrency('USD')
       })
    • setCurrency('USD'): This sets the currency of the chart to USD, ensuring that the pricing data is interpreted and displayed in US dollars.

    Advantages and Limitations of the Indicator

    Advantages

    • Market Transparency: Provides a direct view of market activity and interest.
    • Trend Validation: Confirms the strength of price movements, enhancing confidence in trading decisions.
    • Flexibility in Display: LightningChart JS Trader’s overlay and separate chart options cater to diverse trading strategies.
    • Customizability: Volume data can be adjusted or assigned independently, ensuring precise analysis.

    Limitations

    • Lagging Nature: Volume indicators often react after price movements, limiting their predictive capacity.
    • Ambiguity in Isolation: Volume requires correlation with price action or other indicators to provide meaningful insights.
    • Data Dependency: Reliable data is critical; errors in volume data can distort analysis.

    Conclusion

    Volume technical indicators are indispensable in technical analysis, offering insights into market trends, strength, and sentiment. Moreover, LightningChart JS Trader empower traders with advanced tools, allowing seamless integration of volume data as overlays or separate studies. By leveraging these indicators and understanding their components, traders can make informed decisions and enhance their strategies.

    For optimal results, always combine volume indicators with other technical analysis tools, ensuring a comprehensive view of the market. LightningChart JS Trader’s flexibility and advanced features make it an ideal choice for analyzing volume technical indicators effectively.

    Continue learning with LightningChart

    Data Visualization Template for Electron JS | LightningChart®

    Updated on April 4th, 2025 | Written by humanAre you already building cross-platform applications with Electron JS?  In some of our previous articles, we’ve worked on TypeScript projects where we created pie charts and vibration chart applications. And as we...

    Bar chart race JavaScript

    Bar chart race JavaScript

    Updated on April 14th, 2025 | Written by humanBar chart race JavaScript  When I wrote this article, the COVID-19 pandemic was at its peak point. Today, things are much better thanks to vaccinations that continued their steady positive global effect. With this bar...

    A brief look into ‘performance’ in Web Data Visualization

    A brief look into ‘performance’ in Web Data Visualization  Introduction  Throughout the existence of humankind, we’ve been trying to present data in various visual forms. Therefore, it is quite accurate to say that the concept of data visualization is...