Getting Started #

This section will help you build first NightVision chart from ground up. You'll need a basic knowledge of javascript and the npm ecosystem.

Step 1: Create a new Vite project #

This will create a new directory night-vision-101 with a vanilla-js Vite template:

# 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

Run the following commands to install it:

cd night-vision-101
npm install

Step 2: Install NightVision package #

npm i night-vision

Step 3: Make your first chart #

Replace the content of main.js in the root folder with:

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

document.querySelector('#app').innerHTML = `
<style>
body {
    background-color: #0c0d0e;
}
</style>
<h1>Night Vision Charts</h1>
<div id="chart-container"></div>
`
// 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()
    ])
}
let chart = new NightVision('chart-container')
chart.data = {
    panes: [{
        overlays: [{
            name: 'APE Stock',
            type: 'Spline',
            data: data(),
            settings: {
                precision: 2
            }
        }]
    }]
}

And run:

npm run dev

Voila! The chart is live.

What's next? #

Now that you know how easy it is to create a great simple chart, we can move towards making mega-charts, packed with various indicators and custom overlays. First, we will learn about the main component configuration, then will study the chart internals and finally will dive into overlay-creation API and real-world charts.