Overlay Object

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

// 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

Type: Array
Default: []

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

[
    [<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:

// 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.

overlay.settings.legendSettings

Type: array
Default []

legendSettings You can send an array of objects to each overlay to add custom icons.The object should be like this:

// Example of `overlay.settings.legendSettings`
[
  {
    id: "close",
    // icon must be base64 string of icon
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEDUlEQVRoQ+2Zi3HUQAyGkwqACjgqIFSAqQCoAFMBUAGmAqACQgVABZgKCBXgVABUAPpgNaPI+74HczPRjObs9UqrX9JqZd/pyZHT6ZHbf3IN4H9HcJcROBMwD4UH4ZvC3Fu6kJufwnPgL7sAvy0ADH0mPApvGg1aZP5H4VcBWKP4v+m9ANTw58HbXYsHIaLyRvhtD5AeAI9kodcRj/8KHiVF8K4ydhIdGODIwzccaoA8DTqqHdIK4KVonpx2cpkxDG+hIcjdd0LoIq2qqBYAnsPro9F6Ge5bDfeGAYQUumsenMv1C2GikqVaAO+c8e/lnvwvLlAyIDzHQYB44kCQUlsDmEQDqaNEeBnbBzWvVYoAm+3DgYzXZTyIx/KAchulHADC+l2YX4i0Gffh9ojOcxnTdCJN7whH0zUHwHrimygYEkpYCHA9lJLFabOwbuxk2qYAeO8/CAq9kbq58VhxwznhkiwO+xxkklFIAaAi0CJA1HmUeRplACOUWkD4qgZ45D3NMqDnBCc1le8KpQCQ+5swM+V9HrNoa+mLlWScEaNBBjUKi1yzF4oArBDtgW7ixBpNIFqM1/VIH207Vs6MRWASAa37tZWnJhI9xvsorzZzDMAsUpp32RrsQpID0Ws8S9izaLUfYwC+itBZMC6X/7GUioFg3mgm10ZVRWxKX8jgPbtwDMBvM4FNs6SSPzHuQdhprcYjizNxqtIVm0sASq1GClsMRI/xqt869SAAfM5jCKBaD7utAfSkUMx4NaQHRHMKsVG0B2ndxLFqg/Gth51NTbuJ6cm0wPydUyqjqSM+lvu5Uun3REskRllMW5ZPck1Zje/oMDrJb+tBVlPne0FYOV4z6dOyAGzOcYzfirnbjNUYr9N7QPwQYW1nOANI8SwAHi7Ct8Os3D5oMb4HxCBC2sxdyvXGOzNV520azSIECE+jDNh2uqXO+0ik9hrGAwJa9UEMpgAQMqKQ7AKDUjWkxXgfiZSs9T5dMd5fvVbmTlobBcCQf7H3UiIBkB5KyeJA2geMTno/FwGeoYQNo3uBLwN0p4cgvoRouST3KSzNL/UYaltZ7qOvdTtGNIk+LeOo7v6sonbxHspnRSXqMPV4H4ThAFBa1X2/aG23eS6Cth0gnagc0bB2ICNdqWj2lK0qDLUAWADPWxBLiARgtqEhGL8xSjCeyBcdVAtAdft0YnwO4OhTWgjDSRl+LUXrfUpxKwD0EGaiodVJdeMtogGgRZjarcc+VYQzZRMMRoe2ByrP/DHoqHZEDwCUszjRgP0/LdWLh4kYjkPgYsp45b0AVI8CwXM+IiUg1HciNvUYrsq3BWCNJE1IDX5JFfuPC/N4GcHDs+ESyOLzXQIoLraPCdcA9uHVFp1HH4E/ffX2MfTubGgAAAAASUVORK5CYII=",
  },
  {
    id: "settings",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEj0lEQVRoQ+2ZjXETQQyFkwqgA0wFQAUcFRAqwFQAVICpAKiAo4JABRwVABVgOoAKgj5YZZ432p+zbwDPRDM7zu2PpPe0q9VdTk+OXE6P3P+TawD/OoJLR+C9AXrYAPXBxs+WAr40gM/m2N2Gc19s/N7/CuCi07HFiFtMUWKeCCCfrA0ZmMme76c+IkAkDpYlAeDwx+TRO/tdZ96N9vw49T2wXwAdLD0AbpqVHx2WNjbnRZr30n55VmmNRyaatnsAwCqKXluD2UgG63xlzQ/wE/t7zCau7flt6mP71PQRqWeJOKJVlBYA0t25rN6KYaKCwzgOAJVoizDHt5jPBchza5M1SHLHV6Lskf1Neg6lBeCbrVJlrgTnUboOtH61PoBvszH0jNb8IOsw/awBRC7oub0PgI0t8j39Mzl0p6CIcbYErXVecBLg6L9R0AcJAPZxooTuK1KKAEZg3xnxQzlYH3tTb9sS4yXSvB/dRFEjwi2No1MC6ARCClG4Qk4JAEqeJkvf7Ze9rothByDIJlLc8l7GnVl+t9IPQJ49Cm/E5uW0CADOwb5LlFFm+HfQ1LWt9syFIqKgIMNymkwxiFmYBv0cgT22BpFDyDbczq3zkdtgF+jen+x5J61GEQA1i/SAsVeJRI8D7FtA5xmFtejlPLWEtTB/JhNJFPiGL5dSOgOrNFGzzjaBgIWSYBQjNRmTntKcwQa4e5QAoodefNiR1j2gh9kXllLaxiZ41mAuh9/ZgslbYjkqNRgmclyMKqW5v+e0ADAH46M131KRQtjStEvJAWMq6PBirpQWlQQIwDbnpyg9AFg8WfN8HV3tGPKSA8OrgsWt9XskWnrYNkPNecb2AUAWAJCKMhfm6zRZt2QUSRz2eukagDI8ZwuxTbhwItHi8K9tIfY36dHTWukQ47gf9NH+5t5Q0RRLTl9Zy+8V3YqMARLyitI6A6Q0UptKbxoFkKZRHHaZk0YBVbz8ahcZWcVLAQyTXdYNRkYb91RZYi1KsTp3sAf06L1BKiUakLIjpVIC5vUmpMzF+Z5SAsaIWl7r+zsD4y3BNiC0bMc20af/UiIAk41qjV58mah4gQODNY8gDKK3hwBVm9/MV1JrBGBlGo66nIYBvXC29syHKGUPkJS6ME2E5jLrLLOe7cp6LkBs6ZiWJ90vNChAMcry+mdIjpNaXdgepMxqzSLz/U+2F6lVEwVZC0cnaxtr+k6+SkB3VNXSqCqAIQCpsdyn0TpId8yrCY7g2LoyCTKY54lk9ku968YZTWfeT0aBrShlllIeDuWp2fWRWolq9JWiVhw2izmU6octlHE+YJuoEBGe8289UcE32Dwv1NxxvmgQCUDDNn+TeZS0gz5sYWhKyt1xN66/AN1Y8zc4zgQgVXDOX9BxvKbPgUASwIvSKiVYCDM9WQYAfuiiUqE1HjnZtN0DoEZAHgXfblG5QET8zERbrNfOzrwlAXAejvofHDBz0UnjYsQtpig5TjYpfQB2bBzg2n3SycGfaUsD4G7QCjJyhspWb/JZDueTlwZwkDP7LL4GsA9rS645+gj8AlPgFECNj2uZAAAAAElFTkSuQmCC",
  },
]

To access the event of each icon, we use the "app:select-overlay" event:

chart.events.on("app:select-overlay", (event) => {
      switch (event.index[2]) { // event.index[2] is the icon id
        case "settings":
          ....
          break;
        case "close":
         ...
          break;
        default:
          console.log("click other area of legend controller");
      }
    });

Overlay Object #

overlay.id #

overlay.uuid #

overlay.name #

overlay.type #

overlay.main #

overlay.data #

overlay.dataSubset #

overlay.dataView #

overlay.props #

overlay.settings #

overlay.settings.display #

overlay.settings.scale #

overlay.settings.precision #

overlay.settings.zIndex #

overlay.settings.timeframe #

overlay.settings.legendSettings #