Padding on top, bottom and right in LightningChart JS

Sometimes my line chart is at very bottom right of the screen which makes it little hard to read. How can I set the padding around multiple line charts?

I tried something like this but I get a max stack call size error:

// Bind X Axes together.
const HandleScaleChangeX = (chartIndex) => {
    return (start, end) => {
        for (let i = 0; i < charts.length; i++) {
            const axis = charts[i].getDefaultAxisX()
  
            if (end !== xVal) {
                axis.setInterval(start, xVal+50, false, true)
            }
        }
    }
}
for (let i = 0; i < charts.length; i++) {
    const chart = charts[i]
    chart.getDefaultAxisX()
         .onScaleChange(HandleScaleChangeX(i))
}

Whereas the following line, where xVal is the length of the chart, works fine:

axis.setInterval(start, xVal, false, true) 

6 thoughts on “Padding on top, bottom and right in LightningChart JS”

  1. You are really close to achieving the code with padding on the right with fixed X end value. You just need to change the if(end !== xVal) check to check if the end is same as xVal + padding, where padding is the amount you want to have as padding. Then when setting the new interval you can set the end value to be xVal + padding.

    let padding = 50
    if (end !== xVal + padding) {
        axis.setInterval(start, xVal + padding, false, true)
    }
    
    Reply

Leave a Comment