Adding html button to panes

[vishnuc]

Hi , Is there any way to add html button to panes, I also want to know when panes are resized , is there any callbacks ?

I cannot see anything in documentation , Any help is appreciated.

[SlicedSilver]

Yes, you can add HTML buttons to panes in Lightweight Charts by manipulating the DOM directly:

1. Each pane is rendered as a table row (<tr>) within a table inside the container div. You can append custom HTML elements to these rows using standard DOM APIs.

2. For proper positioning:

   • Set position: absolute and z-index: 100 (some number large enough to stack on top) on your button elements
   • Set position: relative on the parent <tr> elements to establish positioning context

For detecting pane resizes, Lightweight Charts doesn't provide direct callbacks for individual pane resizing. However, you can:

1. Implement a MutationObserver to watch for DOM changes on the pane elements. However you code would be responsible for adding and removing panes so you could skip this because you already know when these events happen.
2. Use ResizeObserver (browser API) on the pane elements

[vishnuc]

Hi , i have 10 charts , and each chart has multi panes , is there a way to get tr of particular panes ?

[vishnuc]

Uploading Screen Recording 2025-04-09 at 21.23.00.mov…

Hi , i am adding a buttons to each created pane , but I think its swapping the series instead of removing the actual pane , is that the correct behaviour ,, how does pane work

@SlicedSilver Actually I want to set the indicator names , but when i remove it , the deleted indicator name is still shown , what is the correct approach to solve this.

p.s : i cannot upload video in discussion ?

[SlicedSilver]

You could either implement your button as a Plugin (rendered using Canvas) and thus it could be attached to a series (and it would follow it if swapping panes) or attach to Pane. This is likely the best approach but also the most difficult to implement.

If use the normal HTML approach then some state management on your side would be required to keep track of which series is in which pane. You can know when this is changing because your code evokes the change. And you can expect that the elements in the DOM will be visual order (first row element will be the top pane, etc...).

[vishnuc]

Hi , i can create plugin , please let me know if its possible with plugins

1.can i use HTML buttons with hover etc and events inside canvas
2.can i show the canvas buttons on hover

[SlicedSilver]

If you use a plugin then you wouldn't use HTML DOM elements like <button> anymore but would rather draw everything yourself using the canvas API.

It is possible to implement hover effects, and know when buttons are clicked.

The following two plugin examples implement a button in canvas:

• https://github.com/tradingview/lightweight-charts/tree/master/plugin-examples/src/plugins/user-price-alerts
• https://github.com/tradingview/lightweight-charts/tree/master/plugin-examples/src/plugins/user-price-lines

Using a plugin is the more reliable approach but it is also the more difficult approach. The alternative of keeping track of where each series is, and updating the dom elements might be easier.

[vishnuc]

Yea hover,hit effects etc seems complex, I think i will stick to updating dom elements.Any tips on html dom I should consider before implementing it ?