Lightningchart js ButtonBox border color

Question

Need help with coloring the ButtonBox border (yellow lines).

this.chart
      .addUIElement(UIElementBuilders.ButtonBox.setBackground(UIBackgrounds.Rectangle))
      .setPosition({ x: 18, y: 99 })
      .setOrigin(UIOrigins.RightTop)
      .setText("Download PNG Image")
      .setPadding({ top: 5, right: 20, bottom: 5, left: 20 })
      .setButtonOffSize(0)
      .setButtonOnSize(0)
      .setDraggingMode(UIDraggingModes.notDraggable)
      .onMouseClick((event) => {
        this.chart.saveToFile(this.chart.getTitle())
      })
  }

Chart screenshot:

Answer 1

The color of the ButtonBox can be edited by editing the background stroke style of the UI element.

const uiElement = chart.addUIElement(UIElementBuilders.ButtonBox.setBackground(UIBackgrounds.Rectangle))

uiElement.setBackground(bg => bg
        .setStrokeStyle((lineStyle) => lineStyle
            .setFillStyle(fillStyle => fillStyle
                .setColor(ColorHEX('#f00'))
            )
        )
    )

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    UIBackgrounds,
    UIOrigins,
    UIElementBuilders,
    UIDraggingModes,
    ColorHEX
} = lcjs

// Create a XY Chart.
const chart = lightningChart().ChartXY()

chart.addUIElement(UIElementBuilders.ButtonBox.setBackground(UIBackgrounds.Rectangle))
    .setPosition({ x: 99, y: 99 })
    .setOrigin(UIOrigins.RightTop)
    .setText('Download PNG Image')
    .setPadding({ top: 5, right: 20, bottom: 5, left: 20 })
    .setButtonOffSize(0)
    .setButtonOnSize(0)
    .setDraggingMode(UIDraggingModes.notDraggable)
    .setBackground(bg => bg
        .setStrokeStyle((lineStyle) => lineStyle.setFillStyle(fillStyle => fillStyle.setColor(ColorHEX('#f00'))))
    )
    .onMouseClick((event) => {
        chart.saveToFile(chartTitle + ' - Screenshot')
    })

<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>