CODEWITHSUNDEEP
lightningchart
Gracie williams
Gracie williams

Reputation: 1145

zoom only the x axis of chart lightning js

How do I zoom only the x axis when I swipe up via touchpad , and pan to left or right when i swipe left or right

 chart[1].getDefaultAxisY()
  .setScrollStrategy(undefined)
  .setInterval(-250,250)

Also I want to zoom the x axis with full height of y axis no matter where i click and drag in the screen.Is this possible ? Thanks

enter image description here

Also Can I control the scroll behaviour with custom functions like If i wish to scroll by keeping last value of series fixed , I don't know how to explain but something like this

onScroll()
    {
    axisX.setInterval(X,250);
    }

Where here 250 is fixed but X value varies from 0 to 249 as we scroll .

Upvotes: 0

Views: 1145

Answers (1)

Snekw
Snekw

Reputation: 2620

You can disable axis chart interactions with axis.setChartInteractions(false). This will disable zooming by mouse wheel, zoom by drag, fit by drag and pan by drag for the axis. Meaning that when the zooming interaction is done only the X axis would zoom.

Alternatively you can control each of the interactions individually. axis.setChartInteractionFitByDrag axis.setChartInteractionPanByDrag axis.setChartInteractionZoomByDrag axis.setChartInteractionZoomByWheel

You can also disable interactions on the axis.

To keep the axis interval end value at a single value you can attach a listener to the onScaleChange event on the axis. This event is called when ever the scale of the axis has changed. The event handler will receive the start and end values of the next interval when the interval changes. In the handler you can force the interval end value to be constant.

const axisX = chart.getDefaultAxisX()

axisX.onScaleChange((start, end) => {
    if (end !== 250)
        axisX.setInterval(start, 250, false, true)
})


const {
  lightningChart,
  SolidLine,
  SolidFill,
  ColorRGBA,
  AxisTickStrategies,
  UIOrigins,
  DataPatterns,
  Themes
} = lcjs

const {
  createProgressiveTraceGenerator
} = xydata

const chart = lightningChart().ChartXY()

const lineSeries = chart.addLineSeries()

const lineSeries2 = chart.addLineSeries()

const generator = createProgressiveTraceGenerator()
  .setNumberOfPoints(250)

const dataSets = [
  generator
  .generate()
  .toPromise(),

  generator
  .generate()
  .toPromise()
]

Promise.all(dataSets)
  .then((data) => {
    lineSeries.add(data[0])
    lineSeries2.add(data[1])
  })

chart.getDefaultAxisY()
  .setChartInteractionFitByDrag(false)
  .setChartInteractionZoomByDrag(false)
  .setChartInteractionPanByDrag(false)
  .setChartInteractionZoomByWheel(false)

// setup handler to keep interval end at 250
const axisX = chart.getDefaultAxisX()
axisX.onScaleChange((start, end) => {
  if (end !== 250)
    axisX.setInterval(start, 250, false, true)
})
<script src="https://unpkg.com/@arction/[email protected]/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>

Upvotes: 1

Related Questions