DOCSEARCHbyAlgolia
Submit Docs

NightVision Documentation

website·Indexed 31 days ago

https://nightvision.dev/

Documentation for NightVision and NavyJS, featuring a comprehensive suite of built-in technical analysis indicators (such as MACD, RSI, and EMA), overlays, and a Script Engine. Includes detailed API references for Chart API, DataHub API, and the Script Engine standard library for building custom indicators and manipulating financial datasets.

Tokens
29.9K
Snippets
283
Records
309
Agent score
52%

What's inside NightVision

  1. Overview of Night Vision Charts

    NightVision is a highly customizable charting library designed for professional traders, specifically optimized for displaying candlestick and time-series data. It is a continuation of the TradingVueJS project, focusing on improved performance and better design decisions. While currently in active development with an evolving API, it provides a vanilla-js API that is compatible with any framework, including Vue, React, and Svelte.

  2. Overview of Navy JS scripting

    Navy JS is a scripting system for NightVision that combines a technical analysis (TA) scripting environment (similar to TradingView's Pine Script) with the ability to create custom overlays using the CanvasJS API. It allows for the implementation of unique charting ideas and mathematical functions that go beyond predefined primitives.

  3. Overview of NightVision Events system

    The Events component is a foundation of the NightVision library, providing a high-performance communication mechanism for components, scripts, and external modules. Unlike standard Svelte or Vue events, these events introduce no delay, which is critical for responsive charting software.
    let chart = new NightVision()
console.log(chart.events)

  4. Access and use the NightVision Layout object

    The Layout object is the central descriptor for a chart's positions, sizes, and markups. A new Layout object is created every time the chart updates to recalculate grids, scales, precisions, and mapping functions. It is accessible via the chart reference.
    let chart = new NightVision()
console.log(chart.layout)

  5. Implement an Area chart overlay

    The Area overlay creates a stylized area chart similar to the Apple Stocks app. It expects data as an array of tuples containing a timestamp and a value.
    // Data format: [<timestamp>, <value>]
const data = [
  [1625097600000, 150.25],
  [1625184000000, 155.10],
  // ...
];

  6. Access and use the NightVision MetaHub

    The MetaHub is a central repository for properties that specify how elements are rendered. It listens to events emitted by layers and stores information used by layout-building algorithms to adjust the output. You can access the current meta state via the chart.meta property.
    let chart = new NightVision();
console.log(chart.meta);

  7. Understand NavyJS Indicator Script core concepts

    Indicator scripts use the Script Engine to perform mathematical functions on chart data and generate overlays.

    Timeseries (TS): Data is handled as regular JavaScript arrays with __id__ and __len__ properties. New elements are added to the beginning of the array, and the array size is limited by the __len__ property.

    Standard Library: Built-in functions like atr(), bb(), cci(), cmo(), dmi(), and ema() are available. These functions can be nested (e.g., using the output of one as the input for another).

    // Example of nesting built-in functions
Spline(sma(atr(close, 14), 20))

  8. Understand the role of DataHub in NightVision

    DataHub acts as the central container for the main dataset in NightVision. It is responsible for producing the view (the current visible subset of data), listening to internal update events (such as the display flag for overlays), and providing helper functions to simplify data access.
    let chart = new NightVision();
console.log(chart.hub);

  9. Manage chart rendering and scales

    NightVision includes a flexible scale system and a layered rendering architecture:

    • Scales: Supports mixing different datasets on the same pane, switching between datasets, and moving scales to the left side of the chart.
    • Multiple Renderers: Each renderer is an instance of CanvasJS with multiple overlay layers. Renderers can be stacked on top of each other to achieve independent rendering processes.

  10. Access and interact with NightVision core elements

    NightVision provides access to its internal components through the main chart wrapper object. Key core elements include:

    • DataHub: Main data wrapper
    • Layout: Configuration for grids and scales
    • Scripts: NavyJs script collection
    • MetaHub: Meta information about grids and scales
    • DataScan: Meta information about the main data
    • Cursor: Current cursor position and values
    • Events: Event Hub

    Note that DataHub, Scripts, MetaHub, DataScan, and Events are implemented as singletons and can be imported anywhere in the application to facilitate interaction between different chart instances.

    let chart = new NightVision();

// Access panes via the DataHub
let panes = chart.hub.panes();

// Access current cursor position
let x = chart.cursor;

// Emit an event via the Event Hub
chart.events.emit('update-layout');

  11. Understand the Nightvision top-level data structure

    The Nightvision dataset acts as the central source of truth. It follows a hierarchical structure where the top level contains an array of panes, and each pane contains an array of overlays. To update the chart state using the Low-Level API, you must first modify the dataset and then call the corresponding update method(s).
    {
    // Defines panes (vertical sections of the chart)
    panes: [
        {
            // Defines overlays (layers of graphics)
            overlays: [
                {
                    name: "…", // Overlay name
                    type: "…", // Overlay type
                    data: […], // Time-series: [[<time>, value, …], …]
                    settings: {…}, // Overlay settings
                    props: {…}, // Overlay props
                    // ...
                }
            ],
            settings: {…}, // Pane settings
        }
    ]
}