Interface ChartXYLayoutChangedEvent

Event fired when ChartXY layout is changed. This means any change to the dimensions of:

• any axis
• any margin within chart
• chart container size

The event is fired just before the chart proceeds to re-render. This event is designed so that user can apply last minute layout changes in the callback function that will take immediate effect. For example, user can change CSS or chart padding in the callback to make last minute corrections to the displayed layout.

 // Example syntax
 chart.addEventListener('layoutchanged', (event) => {
     console.log(event)
 })

If user modifies the chart layout in someway during the callback function, then the chart should be informed like this:

 chart.addEventListener('layoutchanged', (event) => {
     // Example, ensure that viewport is 500px wide
     chart.engine.container.style.width = `${ chart.engine.container.clientWidth + (500 - event.viewportWidth) }px`
     lc.layout() // if the CSS change may offset the position of OTHER charts than this one, then calling `layout` is essential to ensure they are also updated.
     event.userChangedLayout()
 })

Position UI elements:

 const textBox = chart.addUIElement(undefined, chart.coordsRelative)
 chart.addEventListener('layoutchanged', (event) => {
     textBox.setOrigin(UIOrigins.LeftTop).setPosition({ x: event.margins.left, y: event.margins.bottom + event.viewportHeight })
 })

Fixed aspect ratio:

 // Example: Fixed aspect ratio, extra space is allocated as chart padding
 const aspectRatio = 1.8 // width / height
 chart.addEventListener('layoutchanged', (event) => {
     const spaceAvailable = { x: event.viewportWidth + chart.getPadding().right, y: event.viewportHeight + chart.getPadding().bottom }
     // Fit desired aspect ratio within space available in chart.
     let width
     let height
     if (spaceAvailable.x / spaceAvailable.y > aspectRatio) {
         height = spaceAvailable.y
         width = height * aspectRatio
     } else {
         width = spaceAvailable.x
         height = width / aspectRatio
     }
     chart.setPadding({
         right: chart.getPadding().right + (event.viewportWidth - width) + 20,
         bottom: chart.getPadding().bottom + (event.viewportHeight - height) + 20,
     })
 })