X-Trace and Zoom Options in XY Chart Component

Ignition
,
1

XY Chart
XY Chart1568×452 83.4 KB

X-Trace and Zoom option in power chart
X-Trace and Zoom option in power chart1628×727 44.9 KB

Hello,

I have created a chart using the XY Chart component in Ignition Perspective. However, I need functionalities such as X-Trace and Zoom, similar to those available in the Power Chart component.

I have used bullets in the XY Chart, which can display tooltips, but I specifically need the X-Trace feature. Could someone please advise on how to achieve this or suggest any possible workarounds?

Thank you in advance for your support!

Best regards,
Gokulakannan.P

2

I know I am a bit (year) late but If you are looking for Zoom or Pan functionality in the Perspective XY Chart, it isn't enabled by default, but it is fully supported. Since the XY Chart is built on the amCharts 4 library, you can configure the cursor properties to change how user interaction works.

The Core Setting: cursor.behavior

Navigate to props.cursor in the Property Editor. By changing the behavior property, you define what happens when a user clicks and drags on the chart area:

  • zoomX: (Recommended for Time Series) Allows users to click and drag to select a horizontal range. The chart zooms into that time/category range while keeping the Y-axis scale stable.
  • zoomY: Allows vertical zooming only.
  • zoomXY: Allows users to draw a "zoom box." The chart will zoom into both the X and Y dimensions of that box.
  • panX / panY / panXY: Changes the cursor to a "hand" tool. Instead of selecting a range to zoom, the user "grabs" the chart and slides the data around.

[!NOTE] Pro Tip: If you use a pan behavior, you must also enable Scrollbars (props.scrollbarX or props.scrollbarY) so users can actually zoom in/out, as the "click-and-drag" action is now reserved for moving the chart.

The "Missing" Zoom Out Button

Once a user zooms in using any of the zoom behaviors, a "Zoom Out" button will automatically appear in the top-right corner of the chart plot area. This is a built-in feature of the underlying library and doesn't require extra scripting!