LightningChart JS 中顶部、底部和右侧的填充

Question

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) 

Answer 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)
}

On Y axis you want to control both of the start and end of the axis interval so the changes to interval in onScaleChange have to be aggregated to a single call to setInterval . The applying of padding is done same way as on X axis just now with event attached to the Y axis.

const axisY = chart.getDefaultAxisY()
let yMaxVal = 15
let yMinVal = 0
axisY.onScaleChange((start, end) => {
    let newScaleStart = start
    let newScaleEnd = end
    let updateInterval = false

    if (end < yMaxVal + padding) {
        newScaleEnd = yMaxVal + padding
        updateInterval = true
    }
    if (start > yMinVal - padding) {
        newScaleStart = yMinVal - padding
        updateInterval = true
    }
    if (updateInterval) {
        axisY.setInterval(newScaleStart, newScaleEnd, false, true)
    }
})

If you would like to fix the Y start and end to a specific value you can just change the < and > comparisons when comparing the start and end to the padding value with !== comparison.

    if (start !== yMinVal - padding) {
        newScaleStart = yMinVal - padding
        updateInterval = true
    }

That would keep the Y axis minimum value on a fixed point with padding included.