Adding button to lightningchart

Question

I am adding UIelement by using following code

legendBox =  chart[unique].addUIElement(UILayoutBuilders.Column.setBackground( UIBackgrounds.Rectangle ))
.setPosition({ x: 0, y: 100 })
.setOrigin(UIOrigins.LeftTop)
   
   

Right now I am able to add series to it by following code

entry = legendBox.addElement(UIElementBuilders.CheckBox);
series.attach(entry);

Instead , can I add the button with some value ? On clicking of that button I need call an function with that value.

For example if I add button with value

<button val="22">Click<button>

Now when i click that button , I need a callback function returning 22.Is it possible ?

Answer 1

In your case, the entry variable is of type UICheckBox.

To apply a custom action when clicking it, the onSwitch method should do it.

series.attach(entry); is only required if you want the button to hide/restore the series, you can remove this code if you want that only your custom action is triggered.

entry = legendBox.addElement(UIElementBuilders.CheckBox)
entry.onSwitch((_, checked) => {
   console.log('clicked', checked)
})

See also UIElementBuilders.ButtonBox if you want to add automatic bounce-back.

entry = legendBox.addElement(UIElementBuilders.ButtonBox)
entry.onSwitch((_, checked) => {
   if (checked) {
       console.log('button pressed')
   }
})