Customizable & High-performance Financial Chart Library – 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

Description:

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: