Chart API

Chart API describes the main chart interface.

WARNING

Some properties are not fully reactive - we are working on this.

Chart Properties

Put the following values in the property-object:

let chart = new NightVision('<root-element-id>', {
    /* Property object */
    width: ...,
    height: ...
    // ...
})

chart.id

• Type: string
• Default: nvjs

Main chart id. Used as a prefix to all html-indices of the internal elements. If you are creating multiple instances, each of them should get a unique id. See Multi-chart Example.

chart.width

• Type: number
• Default: 750

Full chart width. Measured from the left edge to the right (includes the toolbar and sidebar).

chart.height

• Type: number
• Default: 420

Full chart height. Measured from the top edge to the bottom (includes the botbar).

chart.autoResize

• Type: boolean
• Default: false

Sets the auto-resize mode. This means, the library will track a size of the root-container with <root-element-id>. This is useful when you are making a responsive grid of charts.

chart.colors

• Type: Object
• Default: {}

Allows you to overwrite the default colors. For example: colors: { back: 'gray' } will change the background color.

chart.showLogo

• Type: boolean
• Default: false

Show NV logo or not

chart.scripts

• Type: Array Array of strings
• Default: []

User's collection of NavyJS scripts.

chart.data

• Type: Object
• Default: {}

Main dataset. Should follow a specific structure

chart.config

• Type: Object
• Default: {}

Allows you to overwrite the chart config. For example: config: { MAX_ZOOM: 10000 } will increase a maximum amount of candles the library can display.

chart.timezone

• Type: number
• Default: 0

Shift from UTC, hours.

Internal Variables

Here you can access some internal stuff, e.g.:

console.log(chart.layout)

chart.hub

• Type: DataHub

A reference to the DataHub instance of this chart. Alternatively, can be accessed through the singleton class:

import { DataHub } from 'night-vision'
let chart = new NightVision()
let hub = DataHub.instance(chart.id)

chart.meta

• Type: MetaHub

A reference to the MetaHub instance of this chart. Alternatively, can be accessed through the singleton class (see chart.hub)

chart.scan

• Type: DataScan

A reference to the DataScan instance of this chart. Alternatively, can be accessed through the singleton class (see chart.hub)

chart.events

• Type: Events

A reference to the Events instance of this chart. Alternatively, can be accessed through the singleton class (see chart.hub)

chart.scriptHub

• Type: Scripts

A reference to the Scripts instance of this chart. Alternatively, can be accessed through the singleton class (see chart.hub)

chart.root

• Type: HtmlElement

Root HTML element of the chart

chart.comp

• Type: Object

Main Svelte component

chart.layout

• Type: Layout

The Layout object of the chart. See Layout API for the full description.

chart.range

WARNING

May change in the future

• Type: Array Array of [<number>, <number>]

A time range of the visible area of the chart: [timeStart, timeEnd]

chart.cursor

• Type: Cursor

Chart Cursor

Chart Methods

// For example
chart.update()

chart.update(?type, ?opt)

• Type: function
• Arguments:
  • ?type: string Update type, default layout
  • ?opt: object Update options, default {}

A function that allows you to perform different chart updates:

• "layout" A regular fast update, re-calculating the Layout & triggering renderers.
• "data" An update to be used when the overlay data changes (if the length, timestamp sequence changes).
• "full" A full update, resetting pane & overlay structure. Slower than the previous.
• "grid" An update re-making grids (rebuilding the layers and the renderer list). Optionally can by sent to only one grid: "grid-0"
• "legend" A legend update. Optionally can by sent to only one legend: "legend-1"

chart.fullReset

• Type: function

A full update that also resets the time-range. Equivalent of:

chart.update('full', {resetRange: true})

chart.goto

• Type: function

Go to time/index (depending on the mode).

chart.goto(new Date().getTime()) // Warp into now

chart.scroll

• Type: function

Scrolls the chart on one interval forward. Useful when you add a new candle.

chart.destroy

• Type: function

Destroys the chart instance and cleans up all event listeners.