CODEWITHSUNDEEP
lightningchart
Gracie williams
Gracie williams

Reputation: 1145

Max zoom in and zoom out in lightning chart js

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

Upvotes: 0

Views: 891

Answers (1)

Snekw
Snekw

Reputation: 2620

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/[email protected]/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
}

Upvotes: 2

Related Questions