Night Vision Charts™

NightVision is a highly customizable charting library, created for professional traders. It is a continuation of TradingVueJS project, borrowing its core ideas, but applying better design decisions and improving performance. Built with Svelte.

Start your charting journey with our interactive [DOCS].

Installation

npm i night-vision

Usage

import { NightVision } from 'night-vision'

let chart = new NightVision('<root-element-id>')

// Generate some random data
function data() {
    return Array(30).fill(1).map((x, i) => [
        new Date(`${i+1} Nov 2022 GMT+0000`).getTime(),
        i * Math.random()
    ])
}

// Set the dataset
chart.data = {
    panes: [{
        overlays: [{
            name: 'APE Stock',
            type: 'Spline',
            data: data(),
            settings: {
                precision: 2
            }
        }]
    }]
}

Usage of Tools

• Switch to cursor tool to disable drawing: "idBtnToolCursor"

• Active messurement: "idBtnToolRange"

  // activate range tool script
  for (var p = 0; p < 2; p++) {
      chart.data.panes[p].overlays.push({
          name: 'RangeTool',
          type: 'RangeTool',
          data: [],
          props: {},
          settings: {
              zIndex: 1000
          }
      })
  }
  chart.update()

• Active drawing box: "idBtnToolBox"

  // activate boundingbox box tool script
  for (var p = 0; p < 2; p++) {
      chart.data.panes[p].overlays.push({
          name: 'BoxTool',
          type: 'BoxTool',
          data: [],
          dataExt: {
              lines: [{}]
          }, // Here we place non-timeseries data
          props: {},
          settings: {
              zIndex: 1
          }
      })
  }
  chart.update()

Build Package

    npm run build-cdn

find the build package under: ./night-vision/dist/cdn

Roadmap

• Add stocks support (Index-Based mode)
• Improve the layout: x/y axis calculation
• Expand the built-in overlay collection
• Add keyboard & mouse events
• Port the script system from TVJS
• Create a built-in indicator collection
• NavyJS tutorial
• Data API (the high-level API)
• Add tool overlays ???
• external Toolbar
• Mobile support

Happy charting!