Customizable & High-performance Financial Chart Library – Night Vision

An alternative to TradingVue.

Night Vision is a feature-rich, customizable, and performant charting library to generate time-series/candlestick charts using Vite.

Basic usage:

1. Import the Night Vision charting library.

import './style.css'
import { NightVision } from 'night-vision'

2. Create your first chart.

document.querySelector('#app').innerHTML = `
  <style>
  body {
    background-color: #0c0d0e;
  }
  </style>
  <h1>Night Vision Charts</h1>
  <div id="chart-container"></div>
`
// Example Data
function data() {
    return Array(30).fill(1).map((x, i) => [
        new Date(`${i+1} Nov 2022 GMT+0000`).getTime(),
        i * Math.random()
    ])
}
// Push the data to the chart
let chart = new NightVision('chart-container')
chart.data = {
  panes: [{
    overlays: [{
      name: 'APE Stock',
      type: 'Spline',
      data: data(),
      settings: {
        precision: 2
      }
    }]
  }]
}

Preview:

Download Details:

Author: project-nv

Live Demo: https://nightvision.dev/guide/intro/10-basic-examples.html

Download Link: https://github.com/project-nv/night-vision/archive/refs/heads/main.zip

Official Website: https://github.com/project-nv/night-vision

Install & Download:

# npm 6.x
npm create vite@latest night-vision-101 --template vanilla

# npm 7+, extra double-dash is needed:
npm create vite@latest night-vision-101 -- --template vanilla

# yarn
yarn create vite night-vision-101 --template vanilla

# pnpm
pnpm create vite night-vision-101 --template vanilla