# Marker Line in TimeSeriesChart in Ignition Perspective **URL:** \ **Category:** Ignition\ **Tags:** ignition80, ignition81, perspective\ **Created:** [February 11, 2025, 10:28am UTC](https://forum.inductiveautomation.com/t/marker-line-in-timeserieschart-in-ignition-perspective/102150 "2025-02-11T10:28:27Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![Goutham\_Rao\_Y](https://avatars.discourse-cdn.com/v4/letter/g/eb9ed0/32.png) [@Goutham\_Rao\_Y](https://forum.inductiveautomation.com/u/Goutham_Rao_Y)\ **Post date:** [February 11, 2025, 10:28am UTC](https://forum.inductiveautomation.com/t/marker-line-in-timeserieschart-in-ignition-perspective/102150/1 "2025-02-11T10:28:27Z")
Hello Team, I would like to add a mark line on the X-axis in the TimeSeriesChart [Ignition Perspective in the viewpage], as shown in the screenshot below: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/6/46d75a352cf0539db87787959d5ff6a5b877dbd1.png) Is there a way to set a marker line only at the required point, as depicted in the screenshot? Regards, Goutham Rao Y ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [February 11, 2025, 10:58am UTC](https://forum.inductiveautomation.com/t/marker-line-in-timeserieschart-in-ignition-perspective/102150/2 "2025-02-11T10:58:09Z")
As in the red vertical line? ---
**Author:** ![Goutham\_Rao\_Y](https://avatars.discourse-cdn.com/v4/letter/g/eb9ed0/32.png) [@Goutham\_Rao\_Y](https://forum.inductiveautomation.com/u/Goutham_Rao_Y)\ **Post date:** [February 11, 2025, 11:10am UTC](https://forum.inductiveautomation.com/t/marker-line-in-timeserieschart-in-ignition-perspective/102150/3 "2025-02-11T11:10:27Z")
yes ---
**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\ **Post date:** [February 11, 2025, 2:56pm UTC](https://forum.inductiveautomation.com/t/marker-line-in-timeserieschart-in-ignition-perspective/102150/4 "2025-02-11T14:56:45Z")
I don't think the component itself supports it, but I've achieved it by putting it inside a Coordinate Container and laying the lines on top: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/004dcc0813568472ec005140365d5dc7413132c3.png) You just have to perform your own calculation of where the line should fall on the x axis. ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [February 11, 2025, 3:23pm UTC](https://forum.inductiveautomation.com/t/marker-line-in-timeserieschart-in-ignition-perspective/102150/5 "2025-02-11T15:23:26Z")
My Chart.js component includes the annotations plugin, which allows for line, point, box, and several other types of annotations. Most of the annotation values are scriptable options, meaning you can position the annotations based on calculations in the client (i.e. average/min/max of the charts data). The annotations are intractable; you can allow selection, detect clicks, allow dragging, etc. > **[Chart.js | Musson Industrial](https://docs.mussonindustrial.com/ignition/embr-charts/components/chart-js/)** > > chart-js.png > **[Intro | chartjs-plugin-annotation](https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/intro.html)** > > Annotations for Chart.js ---
**Author:** ![Goutham\_Rao\_Y](https://avatars.discourse-cdn.com/v4/letter/g/eb9ed0/32.png) [@Goutham\_Rao\_Y](https://forum.inductiveautomation.com/u/Goutham_Rao_Y)\ **Post date:** [February 12, 2025, 6:51am UTC](https://forum.inductiveautomation.com/t/marker-line-in-timeserieschart-in-ignition-perspective/102150/6 "2025-02-12T06:51:16Z")
Is there any way to add a marker line in the Timeseries Chart (using Ignition built-in component, not external) without using alternative methods. "This is a temporary solution I am implementing for the time being, but I have an issue here as well. I need to hide the second Y-axis line. The 1st Y-axis displays the series data, while the 2nd Y-axis contains the series data as a Marker Line. I want to keep the Marker Line but hide the 2nd Y-axis line Is there a way to achieve this?" [Screenshot] ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/e/3e7933dd22e4e91b0d2bb546cfd9c698984bdab5.png) ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [February 12, 2025, 11:08am UTC](https://forum.inductiveautomation.com/t/marker-line-in-timeserieschart-in-ignition-perspective/102150/7 "2025-02-12T11:08:26Z")
Looks like you can do it... maybe there's another way, but this way provides two data points for the same time that draw a line from y1 (0) to y2 (100). I wouldn't call it good by any means ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7ab1d16daf9ee616b7ecac7f97f9f997b2b3fcf5.png) ```python [ { "type": "ia.chart.xy", "version": 0, "props": { "xAxes": [ { "name": "time", "label": { "enabled": true, "text": "Time", "color": "" }, "visible": true, "tooltip": { "enabled": true, "text": "", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "inversed": false, "render": "date", "category": { "break": { "enabled": false, "startCategory": "", "endCategory": "", "size": 0.05 } }, "date": { "baseInterval": { "enabled": false, "timeUnit": "hour", "count": 1, "skipEmptyPeriods": false }, "range": { "max": "", "min": "", "useStrict": false }, "break": { "enabled": false, "startDate": "", "endDate": "", "size": 0.05 }, "inputFormat": "yyyy-MM-dd kk:mm:ss", "format": "YYYY-MM-dd" }, "value": { "range": { "max": "", "min": "", "useStrict": false }, "logarithmic": false, "break": { "enabled": false, "startValue": 0, "endValue": 100, "size": 0.05 }, "format": "#,###.##" }, "appearance": { "opposite": false, "inside": false, "labels": { "color": "", "opacity": 1, "rotation": 0, "verticalCenter": "middle", "horizontalCenter": "middle" }, "grid": { "color": "", "opacity": 1, "dashArray": "", "minDistance": 60, "position": 0.5 }, "font": { "size": "", "weight": 500 } } } ], "yAxes": [ { "name": "process temp", "label": { "enabled": true, "text": "Process Temp", "color": "" }, "visible": true, "tooltip": { "enabled": true, "text": "", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "inversed": false, "render": "value", "category": { "break": { "enabled": false, "startCategory": "", "endCategory": "", "size": 0.05 } }, "date": { "baseInterval": { "enabled": false, "timeUnit": "hour", "count": 1, "skipEmptyPeriods": false }, "range": { "max": "", "min": "", "useStrict": false }, "break": { "enabled": false, "startDate": "", "endDate": "", "size": 0.05 }, "inputFormat": "yyyy-MM-dd kk:mm:ss", "format": "M/d/yyyy HH:mm:ss" }, "value": { "range": { "max": "", "min": "", "useStrict": false }, "logarithmic": false, "break": { "enabled": false, "startValue": 0, "endValue": 100, "size": 0.05 }, "format": "#,###.##" }, "appearance": { "opposite": false, "inside": false, "labels": { "color": "", "opacity": 1, "rotation": 0, "verticalCenter": "middle", "horizontalCenter": "middle" }, "grid": { "color": "", "opacity": 1, "dashArray": "", "minDistance": null, "position": 0.5 }, "font": { "size": "", "weight": 500 } } }, { "name": "output temp", "label": { "enabled": true, "text": "Output Temp", "color": "" }, "visible": true, "inversed": false, "tooltip": { "enabled": true, "text": "", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "render": "value", "category": { "break": { "enabled": false, "startCategory": "", "endCategory": "", "size": 0.05 } }, "date": { "baseInterval": { "enabled": false, "timeUnit": "hour", "count": 1, "skipEmptyPeriods": false }, "range": { "max": "", "min": "", "useStrict": false }, "break": { "enabled": false, "startDate": "", "endDate": "", "size": 0.05 }, "inputFormat": "yyyy-MM-dd kk:mm:ss", "format": "M/d/yyyy" }, "value": { "range": { "min": "", "max": "", "useStrict": false }, "logarithmic": false, "break": { "enabled": false, "startValue": 0, "endValue": 100, "size": 0.05 }, "format": "#,###.##" }, "appearance": { "opposite": true, "inside": false, "labels": { "color": "", "opacity": 1, "rotation": 0, "verticalCenter": "middle", "horizontalCenter": "middle" }, "grid": { "color": "", "opacity": 1, "dashArray": "4,4", "minDistance": null, "position": 0.5 }, "font": { "size": "", "weight": 500 } } } ], "series": [ { "name": "process temp", "label": { "text": "Process Temp" }, "visible": true, "hiddenInLegend": false, "defaultState": { "visible": true }, "data": { "source": "example", "x": "t_stamp", "y": "process_temp" }, "xAxis": "time", "yAxis": "process temp", "zIndex": 0, "tooltip": { "enabled": true, "text": "{name}: [bold]{valueY}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "render": "line", "candlestick": { "open": { "x": "", "y": "" }, "high": { "x": "", "y": "" }, "low": { "x": "", "y": "" }, "appearance": { "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "stacked": false, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" } }, "heatRules": { "enabled": false, "max": "", "min": "", "dataField": "" } } }, "column": { "open": { "x": "", "y": "" }, "appearance": { "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "width": null, "height": null, "stacked": false, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" } }, "heatRules": { "enabled": false, "max": "", "min": "", "dataField": "" } } }, "line": { "open": { "x": "", "y": "" }, "appearance": { "connect": true, "tensionX": 1, "tensionY": 1, "minDistance": 0.5, "stroke": { "width": 3, "opacity": 1, "color": "", "dashArray": "" }, "fill": { "color": "", "opacity": 0 }, "bullets": [ { "enabled": false, "render": "circle", "width": 10, "height": 10, "label": { "text": "{value}", "position": { "dx": 0, "dy": 0 } }, "tooltip": { "enabled": true, "text": "{name}: [bold]{valueY}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "width": 1, "opacity": 1 }, "rotation": 0, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" }, "rotation": "" }, "heatRules": { "enabled": false, "max": 100, "min": 2, "dataField": "" } } ] } }, "stepLine": { "open": { "x": "", "y": "" }, "appearance": { "connect": true, "tensionX": 1, "tensionY": 1, "minDistance": 0.5, "stroke": { "width": 3, "opacity": 1, "color": "", "dashArray": "" }, "fill": { "color": "", "opacity": 0 }, "bullets": [ { "enabled": true, "render": "circle", "width": 10, "height": 10, "label": { "text": "{value}", "position": { "dx": 0, "dy": 0 } }, "tooltip": { "enabled": true, "text": "{name}: [bold]{valueY}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "width": 1, "opacity": 1 }, "rotation": 0, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" }, "rotation": "" }, "heatRules": { "enabled": false, "max": 100, "min": 2, "dataField": "" } } ] } } }, { "name": "VerticalLine", "label": { "text": "" }, "visible": true, "hiddenInLegend": false, "defaultState": { "visible": true }, "data": { "source": "VerticalLine", "x": "t_stamp", "y": "points" }, "xAxis": "time", "yAxis": "process temp", "zIndex": 0, "tooltip": { "enabled": true, "text": "{name}: [bold]{valueY}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "render": "line", "candlestick": { "open": { "x": "", "y": "" }, "high": { "x": "", "y": "" }, "low": { "x": "", "y": "" }, "appearance": { "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "stacked": false, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" } }, "heatRules": { "enabled": false, "max": "", "min": "", "dataField": "" } } }, "column": { "open": { "x": "", "y": "" }, "appearance": { "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "stacked": false, "width": null, "height": null, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" } }, "heatRules": { "enabled": false, "max": "", "min": "", "dataField": "" } } }, "line": { "open": { "x": "", "y": "" }, "appearance": { "connect": true, "tensionX": 1, "tensionY": 1, "minDistance": 0.5, "stroke": { "width": 3, "opacity": 1, "color": "#FF000C", "dashArray": "" }, "fill": { "opacity": 0, "color": "" }, "bullets": [ { "enabled": false, "render": "circle", "width": 10, "height": 10, "label": { "text": "{value}", "position": { "dx": 0, "dy": 0 } }, "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "rotation": 0, "tooltip": { "enabled": true, "text": "{name}: [bold]{valueY}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" }, "rotation": "" }, "heatRules": { "enabled": false, "max": 100, "min": 2, "dataField": "" } } ] } }, "stepLine": { "open": { "x": "", "y": "" }, "appearance": { "connect": true, "tensionX": 1, "tensionY": 1, "minDistance": 0.5, "stroke": { "width": 3, "opacity": 1, "color": "", "dashArray": "" }, "fill": { "opacity": 0, "color": "" }, "bullets": [ { "enabled": true, "render": "circle", "width": 10, "height": 10, "label": { "text": "{value}", "position": { "dx": 0, "dy": 0 } }, "fill": { "color": "", "opacity": 1 }, "stroke": { "color": "", "opacity": 1, "width": 1 }, "rotation": 0, "tooltip": { "enabled": true, "text": "{name}: [bold]{valueY}[/]", "cornerRadius": 3, "pointerLength": 4, "background": { "color": "", "opacity": 1 } }, "deriveFieldsFromData": { "fill": { "color": "", "opacity": "" }, "stroke": { "color": "", "opacity": "", "width": "" }, "rotation": "" }, "heatRules": { "enabled": false, "max": 100, "min": 2, "dataField": "" } } ] } } } ], "dataSources": { "example": [ { "t_stamp": "2025-01-01 00:00:00", "process_temp": 63, "output_temp": 38 }, { "t_stamp": "2025-01-02 00:00:00", "process_temp": 59, "output_temp": 39 }, { "t_stamp": "2025-01-03 00:00:00", "process_temp": 62, "output_temp": 41 }, { "t_stamp": "2025-01-04 00:00:00", "process_temp": 63, "output_temp": 37 }, { "t_stamp": "2025-01-05 00:00:00", "process_temp": 48, "output_temp": 31 }, { "t_stamp": "2025-01-06 00:00:00", "process_temp": 54, "output_temp": 42 } ], "VerticalLine": [ { "t_stamp": "2025-01-02 00:00:00", "points": 0 }, { "t_stamp": "2025-01-02 00:00:00", "points": 100 } ] } }, "meta": { "name": "XYChart" }, "position": { "basis": "435px" }, "custom": {} } ] ```