Max zoom in and zoom out in lightning chart js - lightningchart

Question

I want to set max zoom, when I try below code again the chart is crashing
const HandleScaleChangeX = (chartIndex) => {
return (start, end) => {
for (let i = 0; i < charts.length; i++) {
const axis = charts[i].getDefaultAxisX()
if (end !== xVal) {
if (xVal - start > 100 && xVal - start < xVal * 2) {
axis.setInterval(start, xVal, false, true);
}
}
}
}
}
I am trying to not set interval less than 100 and zoom level max to 2X

Answer 1

It's not clear what your xVal is and what is defined as 2X zoom level? Is the zoom level 2x some specific range?
If your goal is to limit the axis interval to always be in a some specific range. For example making sure that the start and end of axis interval is always more than 100 and less than 200 then you can do that with the onScaleChange event handler. You will just need to keep track what the previous scale was.
const axisX = chart.getDefaultAxisX()
let previousScaleStart = 0
let minimumRange = 100
let maximumRange = 200
axisX.onScaleChange((start, end) => {
let range = end - start
let newScaleStart = start
let newScaleEnd = end
let updateInterval = false
if (range < minimumRange - 1) {
// Minimum range
newScaleStart = xVal - minimumRange
newScaleEnd = xVal
updateInterval = true
} else if (range > maximumRange + 1) {
// Maximum range
newScaleStart = xVal - maximumRange
newScaleEnd = xVal
updateInterval = true
}
// Only update the interval if there is a need
if (updateInterval) {
axisX.setInterval(newScaleStart, newScaleEnd, false, true)
} else {
// update previous scale info
previousScaleStart = start
}
})
See the example below where the X axis range is limited to always be in range 100 - xVal * 2.
const {
lightningChart
} = lcjs
const lc = lightningChart()
const chart = lc.ChartXY()
const series = chart.addLineSeries()
const data = [{
x: 0,
y: 5
},
{
x: 20,
y: 10
},
{
x: 40,
y: 0
},
{
x: 60,
y: 2
},
{
x: 80,
y: 8
},
]
series.add(data)
const axisX = chart.getDefaultAxisX()
let previousScaleStart = 0
let xVal = 80
let minimumRange = 100
let maximumRange = xVal * 2
axisX.onScaleChange((start, end) => {
let range = end - start
let newScaleStart = start
let newScaleEnd = end
let updateInterval = false
// minimum range
if (range < minimumRange - 1) {
newScaleStart = xVal - minimumRange
newScaleEnd = xVal
updateInterval = true
} else if (range > maximumRange + 1) {
newScaleStart = xVal - maximumRange
newScaleEnd = xVal
updateInterval = true
}
// Fix x axis end value to the value of xVal
if (end > xVal) {
newScaleEnd = xVal
updateInterval = true
}
if (updateInterval) {
axisX.setInterval(newScaleStart, newScaleEnd, false, true)
} else {
// update previous scale info
previousScaleStart = start
}
})
<script src="https://unpkg.com/#arction/lcjs#2.2.1/dist/lcjs.iife.js"></script>
Fixing the X axis end to a specific value can be easily extended to this code.
You need to add a check if the axis interval end is different than the wanted end value and update the newScaleEnd value to the xVal and then specify that you want to update the interval.
You can add the following code before the if(updateInterval) code
// Fix x axis end value to the value of xVal
if( end !== xVal ){
newScaleEnd = xVal
updateInterval = true
}