Get visible points for a series in LightningChartJs

Question

Exists a function in LightningChartJs to get all visible points from a line or point series in a chart?

If I zoom the chart I want to show something if no visible points available. In some cases I have breaks in my data.

For now I have to check the range and filter all points within this range, but that seems not to be very performant. I guess LC is aware of all the visible points and can give me that.

I would very much welcome any thoughts on the subject or other solutions. Thanks.

Answer 1

LightningChart JS doesn't track the data points that are visible at any time. So the method that you have used to solve the issue is the best way currently.

Something like this seems to be reasonably performant.

function getDataInRange(data, rangeStart, rangeEnd){
    const inRangeData = []
    const dataLength = data.length
    let curPoint
    for(let i = 0; i < dataLength; i += 1){
        curPoint = data[i]
        if(curPoint.x >= rangeStart && curPoint.x <= rangeEnd){
            inRangeData.push(curPoint)
        }
    }
    return inRangeData
}

On my personal machine it can process 1 million points in ~10ms ± 2ms. If you only want to know that a point is visible in the range then you could just break the loop as soon as a single point is in the visible range.

Answer 2

Late to the game but for anybody googling:

If you already have a chart defined and it happens to be named 'chart' (otherwise change chart to your chart's object name), you can track the visible start and end data points like this:

axisX = chart.getDefaultAxisX()
window.axisXScaleChangeToken = axisX.onScaleChange((s, e) => {
window.axisXVisibleDataRangeStart = s
window.axisXVisibleDataRangeEnd = e
})
let visiblePoints = [];
for(let i of cur.data){
 if(i[0] > window.axisXVisibleDataRangeStart && i[0] < window.axisXVisibleDataRangeEnd) visiblePoints.push(i)
}

Every time the X axis is scaled/zoomed/moved, axisXVisibleDataRangeStart and axisXVisibleDataRangeEnd will change. You're then iterating over where your data points are stored (cur.data in my case and the example) and comparing: If timestamp is within range, push to visiblePoints.

(I am using OHLC where data[0] is the timestamp. Your comparison might be to an object array where {x:} is the value youre looking to compare. You get the idea.)

To remove the listener and stop the logging:

axisX.offScaleChange(window.axisXScaleChangeToken)