Configuring Ignition Perspective Time Series Marker Lines

The request looks simple: a trend on a Perspective view and one red vertical line at a specific timestamp, such as a batch start, an alarm, or a setpoint change. You open the Time Series Chart property tree and find nothing to set. The usual first workaround creates a new problem. You put the marker on a second Y axis, the line draws, and now a useless 0–100 axis sits on the right side of the trend.

Work through the checks below in order. Each one tells you which branch to take next.

Check 1: Confirm the Time Series Chart Has No Marker Property

Start here. Open the Time Series Chart in the Designer and expand its full property tree for your Ignition version. Look for anything named marker, annotation, guide, or reference line on the time axis.

• You find one: use it and stop here.
• You find nothing: the component does not draw a vertical marker natively. Stop hunting for a hidden setting and go to Check 2.

You have three real ways to build the marker:

• Data-driven: add a series whose points form a vertical segment.
• Overlay: lay a drawn line on top of the chart.
• Third-party: use a chart component that has an annotation layer.

Check 2: Decide Whether the Marker Must Be Interactive

Ask what operators will do with the line.

• They need to click it, select it, or drag it to pick a time: built-in components will fight you. Go to the third-party branch below.
• They only need to see it at a computed or tag-driven timestamp: stay with built-in components and go to Check 3.

Third-party branch. Musson Industrial publishes a Chart.js component for Perspective that bundles chartjs-plugin-annotation. The plugin supports these annotation types:

• line
• point
• box
• several other types

Most annotation values are scriptable options. That means the client can compute the position from the chart data, for example the average, minimum, or maximum of a series. The annotations are interactive. You can allow selection, detect clicks, and allow dragging.

This is the cleanest route if module installation is allowed on your gateway. If your site allows built-in components only, skip it.

Check 3: Built-In Only? Choose Data Series or Overlay

Two built-in methods work. Pick one based on how the chart behaves at runtime.

How the data-driven marker works. A line series connects its points in order. Give it exactly two points with the same timestamp and different Y values, for example y = 0 and y = 100. The segment between those two points is vertical.

The line only spans the full plot height if those two Y values match the top and bottom of the axis the series uses. That axis therefore needs a fixed, strict range.

If you already built this on the Time Series Chart: check that component's axis configuration for a visibility property. If it has one, set it to false on the marker axis and go straight to verification. If it does not, rebuild on the XY Chart (ia.chart.xy). That is a built-in component, so you stay within the built-in-only rule.

Match the Symptom to the Cause

Build the Marker on the XY Chart

This is the resolving branch for most built-in-only installations.

A typical XY Chart setup looks like this:

• A time X axis named time with render: "date" and inputFormat set to yyyy-MM-dd kk:mm:ss.
• A process Y axis, for example process temp.
• Series whose data block points at a data source key and the t_stamp and value columns.

Add the marker on top of that structure.

1. Add a marker Y axis. Append an entry to props.yAxes. Hide it, fix its range, and remove its grid:

   {
     "name": "marker",
     "visible": false,
     "render": "value",
     "value": {
       "range": { "min": 0, "max": 100, "useStrict": true }
     },
     "appearance": {
       "opposite": true,
       "grid": { "opacity": 0 }
     }
   }

2. Add a marker data source. Create a new key under the chart's data sources, for example marker. Bind it to the marker timestamp, which can be a tag, a view parameter, or a query result. Add a script transform that returns two rows:

   def transform(self, value, quality, timestamp):
       # value = marker timestamp, same type/format as the process t_stamp column
       return [
           {"t_stamp": value, "marker": 0},
           {"t_stamp": value, "marker": 100}
       ]

3. Add a marker series. Append an entry to props.series:

   {
     "name": "marker",
     "visible": true,
     "hiddenInLegend": true,
     "data": { "source": "marker", "x": "t_stamp", "y": "marker" },
     "xAxis": "time",
     "yAxis": "marker",
     "render": "line",
     "tooltip": { "enabled": false }
   }

4. Color the line. Set the stroke color and width in the marker series' line appearance settings, for example red at a width that stands out from the process pen.
5. Add more markers if needed. Repeat steps 2 and 3 with a new data source key and a new series for each marker. Point every marker series at the same hidden marker axis.

Common time-wasters:

• Do not put the 0/100 points on the process axis to avoid a second axis. That squashes the trend.
• Do not leave the marker axis on autoscale. That shortens the line.
• Do not use a string timestamp when the process series uses epoch or date values, or the reverse. The marker lands outside the plotted range, or never parses.

Build the Overlay in a Coordinate Container

Use this only when you must keep the Time Series Chart untouched and the display geometry is stable.

1. Place the Time Series Chart inside a Coordinate Container, sized to fill it.
2. Add a thin line or shape component on top of the chart, styled red and set to the full plot height.
3. Lock the time window. Bind the chart's displayed start and end times to known values. Without a fixed window you have nothing to calculate against.
4. Bind the overlay's X position with an expression or script:

   x_px = plot_left + plot_width * (t_marker - t_start) / (t_end - t_start)

   Here plot_left and plot_width are the pixel offset and width of the actual plot area inside the chart. They are not the component bounds. Measure both on the running view, because Y-axis labels and the legend eat into the component width.

5. Hide the overlay whenever t_marker falls outside t_start to t_end.

This method breaks whenever the plot area moves. Watch for these triggers:

• A longer axis label
• A legend change
• A different screen size

If operators resize or zoom, stop maintaining pixel math and move to the XY Chart branch.

Verify the Marker

1. Position. Set the marker timestamp to a known process event. Confirm the line crosses the process pen at the same time shown in the process series tooltip.
2. Full height. The line must touch both the top and bottom of the plot area. If it does not, recheck the min, max, and useStrict values on the marker axis against the marker Y values.
3. No extra axis. Look at both sides of the plot. Neither side should show a 0–100 scale or dashed gridlines from the marker axis.
4. Process scale unchanged. Compare the process axis range with and without the marker series. It must be identical.
5. Range change. Shift the chart time window. The data-driven marker should move with the axis. An overlay marker must track correctly or hide itself.
6. Legend and tooltip. Confirm the marker is absent from the legend. Hovering the line should show no tooltip.
7. Session check. Open the view in a real Perspective session at the target screen resolution, not only in the Designer preview.

FAQ