z-index not working

[Seungwoo321]

(!important) Maybe you would prefer making an interactive demo with https://tvjs.io/play. If so, please select the PlayGround template.

(!important 2) Consider reading the FAQ first, because it helps to solve 82% of issues.

Description

completedTrades based on trades should appear above the candlestick.

Screenshot

Code (MVP)

.
.
    onchart: [
      {
        name: 'Trades',
        type: 'CompletedTrades',
        data: trades,
        settings: {
          'z-index': 1000
        }
      }
    ]
.
.

Data Sample

The data sample must follow the current data structure.

 "ohlcv": [
    [1646830800000, 305.45, 306.2, 304.6, 305, 7082],
    [1646834400000, 305, 307.85, 305.05, 306.65, 8455]
  ],
  "onchart": [
      {
        "name": "Trades",
        "type": "CompletedTrades",
        "data": [
           [1649412063000, 1, 334.6, "long"],
           [1649415833000, 0, 331.25, "long", -1.0012]
         ],
        "settings": {
          "z-index": 1000
        }
      }
  ]

Console errors (if any)

No console error

Additional Info

(if needed to reproduce the issue)

(tvjs version, OS, browser, npm version...)

• tvjs version: ^1.0.2
• OS: mac OS Monterey
• npm version: 8.5.0

my code:

• CompletedTrades: https://github.com/Seungwoo321/cats/blob/master/web/src/utils/Overlays/trades.js
• z-index setting : https://github.com/Seungwoo321/cats/blob/master/web/src/components/TradingVueChart.vue#L161

[Seungwoo321]

my mistake