Skip to content

Overlay Object

Overlay Object describes an overlay. Overlay id is determined by its position in the overlays array:

js
// Pane Object
{
    overlays: [
        {…}, // Overlay #0
        {…}, // Overlay #1
        {…}, // Overlay #2
        // ...
    ]
}

INFO

means that it's expected that the library can change the property. But this only applies to the Low-Level API and not Data API, which is specifically designed to manipulate the dataset.

overlay.id

  • Type: number

Sequential overlay id, heavily used in the library, calculated by DataHub. Usually you need to specify it to access stuff.

overlay.uuid

  • Type: string

Unique id that stays the same even if the overlay changes its position. Generated by DataHub.

overlay.name

  • Type: string

Human-readable name that will be shown in the legend. Example: APE / Tether US.

overlay.type

  • Type: string

Overlay type (name) that will be used for rendering the data. The library performs a lookup over prefabs in the Scripts component to find a matching script. If not found, the overlay wont be rendered.

overlay.main

  • Type: boolean
  • Default false

Marks the main overlay of the chart. This overlay's data will be used to calculate the grid x-positions and align other overlays. If not provided by user, will be automatically activated on the first overlay of the chart (with paneId == 0, ovId == 0). Other overlay's flags will be set to false.

overlay.data

INFO

IMPORTANT: The data timestamps should be sorted in ascending order. Otherwise, you'll encounter glitches like disappearing data points.

  • Type: Array
  • Default: []

Timeseries data of the overlay. Must have the following format:

js
[
    [<time>, <value-1>, <value-2>, ...],
    // ...
]
  • <time> is a Unix timestamp (e.g. 1667580570000)
  • <value-N> can be anything: number, string, object, array or even null

overlay.dataSubset

  • Type: Array

A subset of the previous array, limited by the chart range. Has the same format; produced by DataHub

overlay.dataView

  • Type: Object

To produce the data subset the library creates a data view first. DataView is a reference to a data section, defined by two indices and the data source: i1, i2 and src:

js
// Example of `overlay.dataView`
{
    i1: 4148, // Start index
    i2: 4199, // End index (included)
    length: 52, // length of the section
    src: […] // Reference to `overlay.data`
}

overlay.props

  • Type: Object
  • Default: {}

Props contains an information specific for this overlay. Examples: lineWidth, color, showVolume. The default values of the props are defined in the overlay script (see this example).

overlay.settings

  • Type: Object
  • Default: {}

Overlay settings. Specifies how this overlay should be rendered.

overlay.settings.display

  • Type: boolean
  • Default: true

Flag that shows should the lib render the overlay or not. This includes calculation of a common y-range (max among all overlays on the pane).

overlay.settings.scale

  • Type: string
  • Default A

Assigns a new or existing scale to the overlay. Scale definitions are in pane.settings.scales.

overlay.settings.precision

  • Type: number

Set the precision of this overlay. It will not affect other overlays on the pane / scale. The pane precision is calculated as a max of all overlay's precisions, auto-detected or set up by this property. pane.settings.precision overwrites all these precisions.

overlay.settings.zIndex

  • Type: number
  • Default -1 for regular overlay, 0 for the main overlay

zIndex (z-index) determines an order in which overlays are rendered. The bigger the number is, the higher the overlay's layer is placed. For example, Grid layer has zIndex of -1000000, Crosshair instead, has value of 1000000.

overlay.settings.timeFrame

  • Type: string | number String e.g., '1h, 15m, 1d' or number of milliseconds.

Forced time-frame of the chart (if specified for the main overlay). Overwrites the auto-detected time-frame.

Released under the MIT License.