CODEWITHSUNDEEP
javascriptlightningchart
Gracie williams
Gracie williams

Reputation: 1145

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)

Upvotes: 1

Views: 195

Answers (1)

Snekw
Snekw

Reputation: 2620

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.

Upvotes: 2

Related Questions