Time Series Chart Markers

Tim · September 2, 2025, 6:12pm

I’m hoping someone can shed some light on markers within the Perspective Time Series Chart. I’m on version 8.1.44 and have been unable to get a marker of any form to display on the chart. Can someone post an extremely basic example JSON of the chart with a marker? Maybe just the default chart config with the default data including one vertical marker added. Is this known to not work?

Note: I can successfully add markers to the XY Chart, but no luck with the Time Series Chart.

schenk · September 2, 2025, 7:26pm

Try adding the series name under props.plots[0].trends[0].series

Here is a working Time Series Chart with a single line marker:

View JSON

{
"custom": {},
"params": {},
"props": {},
"root": {
"children": [
{
"meta": {
"name": "TimeSeriesChart"
},
"position": {
"basis": "400px",
"grow": 1
},
"props": {
"plots": [
{
"axes": [],
"markers": [
{
"axis": "",
"line": {
"color": "",
"dashArray": 0,
"label": {
"font": {
"color": "",
"size": 10
},
"position": "right",
"style": {
"classes": ""
},
"text": ""
},
"opacity": 0.5,
"style": {
"classes": ""
},
"width": 3
},
"type": "line",
"value": 20,
"visible": true
}
],
"relativeWeight": 1,
"trends": [
{
"axis": "",
"baselines": [],
"breakLine": true,
"columns": [],
"interpolation": "curveLinear",
"radius": 2,
"series": "Boiler",
"stack": true,
"type": "line",
"visible": true
}
]
}
],
"series": [
{
"data": [
{
"Pressure": 12,
"Temperature": 52,
"time": 1560469431423
},
{
"Pressure": 42,
"Temperature": 18,
"time": 1560469432423
},
{
"Pressure": 81,
"Temperature": 26,
"time": 1560469433423
},
{
"Pressure": 11,
"Temperature": 63,
"time": 1560469434423
},
{
"Pressure": 23,
"Temperature": 65,
"time": 1560469435423
},
{
"Pressure": 43,
"Temperature": 12,
"time": 1560469436423
},
{
"Pressure": 71,
"Temperature": 61,
"time": 1560469437423
},
{
"Pressure": 89,
"Temperature": 60,
"time": 1560469438423
},
{
"Pressure": 66,
"Temperature": 58,
"time": 1560469439423
},
{
"Pressure": 33,
"Temperature": 1,
"time": 1560469440423
}
],
"name": "Boiler"
}
]
},
"type": "ia.chart.timeseries"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}

Tim · September 2, 2025, 7:46pm

Thanks this is great. Is it possible with this component to have a vertical marker or only the horizontal?

schenk · September 2, 2025, 9:05pm

I was able to add a highlighted range to the chart. I think these are all of the steps I took, but I attached an updated view with an example in case I missed something:

Add a new series with the start and end of the range you want, with a value of 1 for each
Add a new axis, set the width to -1 to hide it, and the min/max to 0 and 1
Add a new trend with props.plots[0].trends[1].type set to "area" and set the axis and series to the newly created ones
Add a column to the new trend and set the key to the new series x-axis key, and set the color to something with opacity

View JSON

{
"custom": {
"data": {
"$": [
"ds",
192,
1756846855478
],
"$columns": [
{
"data": [],
"name": "t_stamp",
"type": "Date"
},
{
"data": [],
"name": "RandomInteger",
"type": "Long"
}
]
},
"tags": "value"
},
"params": {},
"propConfig": {
"custom.data": {
"binding": {
"config": {
"avoidScanClassValidation": true,
"dateRange": {
"mostRecent": "4",
"mostRecentUnits": "HOUR"
},
"enableValueCache": true,
"ignoreBadQuality": false,
"polling": {
"enabled": true,
"rate": "10"
},
"preventInterpolation": true,
"returnFormat": "Wide",
"returnSize": {
"type": "RAW"
},
"tags": [
{
"alias": "RandomInteger",
"path": "[InternalQuestDB/Ignition-USWN3469:Ignition3079]HistorianTest/RandomInteger1"
}
],
"valueFormat": "DATASET"
},
"type": "tag-history"
},
"persistent": true
},
"custom.tags": {
"persistent": true
}
},
"props": {},
"root": {
"children": [
{
"meta": {
"name": "TimeSeriesChart"
},
"position": {
"basis": "400px",
"grow": 1
},
"props": {
"plots": [
{
"axes": [
{
"alignment": "left",
"grid": {
"color": "",
"dashArray": 0,
"opacity": 0.9,
"style": {
"classes": ""
},
"visible": false
},
"label": {
"font": {
"color": "",
"size": 10
},
"offset": 0,
"style": {
"classes": ""
},
"text": "",
"visible": true
},
"max": "",
"min": "",
"name": "Axis0",
"style": {
"classes": ""
},
"tick": {
"color": "",
"count": "Auto",
"label": {
"font": {
"color": "",
"size": 10
},
"format": "Auto",
"style": {
"classes": ""
}
},
"style": {
"classes": ""
}
},
"width": 60
},
{
"alignment": "left",
"grid": {
"color": "",
"dashArray": 0,
"opacity": 0.9,
"style": {
"classes": ""
},
"visible": false
},
"label": {
"font": {
"color": "",
"size": 10
},
"offset": 0,
"style": {
"classes": ""
},
"text": "",
"visible": false
},
"max": 1,
"min": 0,
"name": "HighlightAxis",
"style": {
"classes": ""
},
"tick": {
"color": "",
"count": "Auto",
"label": {
"font": {
"color": "",
"size": 10
},
"format": "Auto",
"style": {
"classes": ""
}
},
"style": {
"classes": ""
}
},
"width": -1
}
],
"markers": [
{
"axis": "Axis0",
"line": {
"color": "black",
"dashArray": 0,
"label": {
"font": {
"color": "",
"size": 10
},
"position": "left",
"style": {
"classes": ""
},
"text": "Marker"
},
"opacity": 1,
"style": {
"classes": ""
},
"width": 1
},
"type": "line",
"value": 20,
"visible": true
}
],
"relativeWeight": 1,
"trends": [
{
"axis": "Axis0",
"baselines": [],
"breakLine": true,
"columns": [],
"interpolation": "curveLinear",
"radius": 2,
"series": "Boiler",
"stack": true,
"type": "line",
"visible": true
},
{
"axis": "HighlightAxis",
"baselines": [],
"breakLine": true,
"columns": [
{
"color": "#0000FF30",
"key": "x",
"styles": {
"highlighted": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"color": "",
"dashArray": null,
"opacity": null,
"width": null
}
},
"muted": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"color": "",
"dashArray": null,
"opacity": null,
"width": null
}
},
"normal": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"color": "",
"dashArray": null,
"opacity": null,
"width": null
}
},
"selected": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"color": "",
"dashArray": null,
"opacity": null,
"width": null
}
}
}
}
],
"interpolation": "curveLinear",
"radius": 2,
"series": "HighlightRange",
"stack": false,
"type": "area",
"visible": true
}
]
}
],
"series": [
{
"data": [
{
"Pressure": 12,
"Temperature": 52,
"time": 1560469431423
},
{
"Pressure": 42,
"Temperature": 18,
"time": 1560469432423
},
{
"Pressure": 81,
"Temperature": 26,
"time": 1560469433423
},
{
"Pressure": 11,
"Temperature": 63,
"time": 1560469434423
},
{
"Pressure": 23,
"Temperature": 65,
"time": 1560469435423
},
{
"Pressure": 43,
"Temperature": 12,
"time": 1560469436423
},
{
"Pressure": 71,
"Temperature": 61,
"time": 1560469437423
},
{
"Pressure": 89,
"Temperature": 60,
"time": 1560469438423
},
{
"Pressure": 66,
"Temperature": 58,
"time": 1560469439423
},
{
"Pressure": 33,
"Temperature": 1,
"time": 1560469440423
}
],
"name": "Boiler"
},
{
"data": [
{
"x": 1560469432423,
"y": 1
},
{
"x": 1560469435423,
"y": 1
}
],
"name": "HighlightRange"
}
],
"timeAxis": {
"grid": {
"color": "red"
},
"tickCount": 1
}
},
"type": "ia.chart.timeseries"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}

Tim · September 3, 2025, 1:37pm

Thanks! This may be a viable work around. But I may have to fall back to ApexCharts to obtain a vertical marker. I feel there is something lacking in this component which IA may want to fix because it seems like a vertical marker should be possible.